/* _content/AlchemosPositive.Portal/Components/Layout/AuthLayout.razor.rz.scp.css */
/* =============================================================================
   AuthLayout — Brand Panel & Form Panel Scoped Styles
   Style Contract v1.1 — Spring Morning
   
   ⚠ CRITICAL: MudBlazor's global `.mud-typography { color: var(--color-text-primary) }`
   from app.css/joy-mud-overrides.css overrides any inline Style="" attribute on
   <MudText> components. Never rely on inline Style props for text color in the brand
   panel. All text colors MUST be enforced via scoped CSS (::deep) or CSS classes.
   ============================================================================= */

/* ── Brand panel (dark left half) ───────────────────────────────────────────── */
[b-pdr4c4wlya] .auth-brand-panel {
    width: 50%;
    padding: var(--space-12);    /* 3rem / 48px */
    position: relative;
    overflow: hidden;
    background: var(--slate-12) !important;  /* #0F1A25 — near-black deep navy */
}

/* All typography inside the brand panel must be light regardless of theme or
   global cascade. This is the authoritative selector — do not remove !important.
   background-color: transparent is required because app.css sets
   background-color: var(--color-bg-app) on .mud-typography — without this override
   each <p class="mud-typography"> renders as a white rectangle on the dark panel. */
[b-pdr4c4wlya] .auth-brand-panel .mud-typography,
[b-pdr4c4wlya] .auth-brand-panel p,
[b-pdr4c4wlya] .auth-brand-panel span,
[b-pdr4c4wlya] .auth-brand-panel h1,
[b-pdr4c4wlya] .auth-brand-panel h2,
[b-pdr4c4wlya] .auth-brand-panel h3,
[b-pdr4c4wlya] .auth-brand-panel h4,
[b-pdr4c4wlya] .auth-brand-panel h5,
[b-pdr4c4wlya] .auth-brand-panel h6 {
    color: rgba(255, 255, 255, 0.90) !important;
    -webkit-text-fill-color: rgba(255, 255, 255, 0.90) !important;
    background-color: transparent !important;
}

/* H4 brand name — full opacity */
[b-pdr4c4wlya] .auth-brand-panel .mud-typography-h4 {
    color: rgba(255, 255, 255, 0.97) !important;
    -webkit-text-fill-color: rgba(255, 255, 255, 0.97) !important;
    font-weight: 700;
    line-height: 1.25;
}

/* Body1 tagline — slightly muted */
[b-pdr4c4wlya] .auth-brand-panel .mud-typography-body1 {
    color: rgba(255, 255, 255, 0.78) !important;
    -webkit-text-fill-color: rgba(255, 255, 255, 0.78) !important;
    line-height: 1.7;
}

/* Emoji labels in feature pills */
[b-pdr4c4wlya] .auth-brand-panel .auth-feature-icon {
    color: rgba(255, 255, 255, 0.97) !important;
    -webkit-text-fill-color: rgba(255, 255, 255, 0.97) !important;
    font-size: 1.25rem;
    line-height: 1;
    flex-shrink: 0;
}

/* Feature pill text */
[b-pdr4c4wlya] .auth-brand-panel .auth-feature-text {
    color: rgba(255, 255, 255, 0.90) !important;
    -webkit-text-fill-color: rgba(255, 255, 255, 0.90) !important;
    font-size: 0.875rem;
    font-weight: 500;
    letter-spacing: 0.01em;
}

/* Feature pill container */
[b-pdr4c4wlya] .auth-feature-pill {
    background: rgba(255, 255, 255, 0.10);
    border-radius: var(--radius-lg);
    padding: 0.75rem 1rem;
    border: 1px solid rgba(255, 255, 255, 0.15);
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    transition: background-color var(--transition-interactive);
}
[b-pdr4c4wlya] .auth-feature-pill:hover {
    background: rgba(255, 255, 255, 0.14);
}

/* Teal top-bar accent on the feature pill on hover */
[b-pdr4c4wlya] .auth-feature-pill:hover .auth-feature-text {
    color: rgba(255, 255, 255, 1) !important;
    -webkit-text-fill-color: rgba(255, 255, 255, 1) !important;
}

/* ── Right form panel ────────────────────────────────────────────────────────── */
[b-pdr4c4wlya] .auth-right-panel {
    background: var(--color-surface-1);
}

/* Ensure form inputs show dark text on the light form panel */
[b-pdr4c4wlya] .auth-right-panel .mud-typography {
    color: var(--color-text-primary);
}
[b-pdr4c4wlya] .auth-right-panel .mud-typography-h5 {
    color: var(--color-text-primary);
    font-weight: 600;
}
[b-pdr4c4wlya] .auth-right-panel .mud-typography-body2 {
    color: var(--color-text-secondary);
}

/* ── Dark mode: both panels adapt ───────────────────────────────────────────── */
/* Brand panel stays dark in both modes (its bg is always --slate-12 = #0F1A25) */
/* Form panel reacts to data-theme="dark" */
[data-theme="dark"][b-pdr4c4wlya]  .auth-right-panel {
    background: var(--color-surface-2);
}
[data-theme="dark"][b-pdr4c4wlya]  .auth-right-panel .mud-typography {
    color: var(--color-text-primary);   /* #E1E8EE in dark mode */
}
/* _content/AlchemosPositive.Portal/Components/Layout/GlobalSearch.razor.rz.scp.css */
/* =============================================================================
   GlobalSearch — Scoped Styles
   Max-width moved here from inline Style="" to comply with the style contract
   (no hardcoded values in component markup).
   ============================================================================= */

[b-0rmcvaeh6v] .global-search {
    max-width: 400px;
}
/* _content/AlchemosPositive.Portal/Components/Layout/MainLayout.razor.rz.scp.css */
/* =============================================================================
   MainLayout — Spring Morning Scoped Styles
   ============================================================================= */

/* Spring AppBar — white surface with subtle spring-tinted bottom border */
[b-xpe3ru8euy] .mud-appbar {
  background: rgba(255, 255, 255, 0.94) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--slate-6) !important;
  box-shadow: 0 1px 8px rgba(90, 138, 96, 0.08) !important;
}

/* Dark mode AppBar — deep forest black with blur */
[data-theme="dark"][b-xpe3ru8euy]  .mud-appbar {
  background: rgba(13, 23, 16, 0.95) !important;
  border-bottom: 1px solid var(--color-border-subtle) !important;
  box-shadow: 0 1px 8px rgba(0, 0, 0, 0.30) !important;
}

/* Sidebar drawer — clean slate-2, premium flat surface */
[b-xpe3ru8euy] .mud-drawer {
  background-color: var(--slate-2) !important;    /* #F4F6F8 — Linear-style cool grey */
  background-image: none !important;
  border-right: 1px solid var(--slate-5) !important;  /* slightly stronger than subtle */
}

/* Dark mode Drawer */
[data-theme="dark"][b-xpe3ru8euy]  .mud-drawer {
  background-color: var(--color-bg-subtle) !important;
  background-image: none !important;
  border-right: 1px solid var(--color-border-subtle) !important;
}

/* Scrollability and mini-mode rules moved to app.css (global)
   because ::deep does not pierce MudBlazor component internals. */

/* Spring search box placeholder */
[b-xpe3ru8euy] .mud-input-root::placeholder {
  color: var(--slate-7);
}
[data-theme="dark"][b-xpe3ru8euy]  .mud-input-root::placeholder {
  color: var(--color-text-secondary);
}

/* AppBar icon buttons — spring-tinted */
[b-xpe3ru8euy] .mud-appbar .mud-icon-button {
  color: var(--slate-11) !important;
  border-radius: var(--radius-md);
  transition: background-color var(--transition-interactive),
              color var(--transition-interactive);
}
[data-theme="dark"][b-xpe3ru8euy]  .mud-appbar .mud-icon-button {
  color: var(--color-text-primary) !important;
}
[b-xpe3ru8euy] .mud-appbar .mud-icon-button:hover {
  background-color: var(--color-accent-subtle) !important;
  color: var(--color-accent) !important;
}

/* AppBar text (logo text, page title) */
[b-xpe3ru8euy] .mud-appbar .mud-typography {
  color: var(--slate-12);
}
[data-theme="dark"][b-xpe3ru8euy]  .mud-appbar .mud-typography {
  color: var(--color-text-primary);
}

/* Main content area — spring morning background */
[b-xpe3ru8euy] .mud-main-content {
  background-color: var(--color-bg-app);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   Mobile search panel — fixed strip below AppBar on xs/sm
   Uses z-index just above the AppBar (--joy-z-appbar + 10) so it overlays the
   drawer on sm and sits below dialogs/tooltips.
   ═══════════════════════════════════════════════════════════════════════════════ */
.mobile-search-panel[b-xpe3ru8euy] {
    position: fixed;
    top: 48px; /* MudAppBar Dense height */
    left: 0;
    right: 0;
    z-index: calc(var(--joy-z-appbar) + 10);
    background: var(--color-surface-1);
    border-bottom: 1px solid var(--color-border-subtle);
    padding: var(--space-2) var(--space-3);
    display: flex;
    align-items: center;
    gap: var(--space-2);
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.12);
    animation: mobileSearchSlideDown-b-xpe3ru8euy var(--transition-reveal) ease-out both;
}

[data-theme="dark"] .mobile-search-panel[b-xpe3ru8euy] {
    background: var(--color-surface-2);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.30);
}

/* Make the GlobalSearch autocomplete fill the available width inside the panel */
[b-xpe3ru8euy] .mobile-search-panel .global-search {
    flex: 1 !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

@keyframes mobileSearchSlideDown-b-xpe3ru8euy {
    from { transform: translateY(-100%); opacity: 0; }
    to   { transform: translateY(0);     opacity: 1; }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   Blazor error UI — spring-friendly warning
   ═══════════════════════════════════════════════════════════════════════════════ */
#blazor-error-ui[b-xpe3ru8euy] {
    background: var(--color-warning-bg, #FFFBEB);
    color: var(--color-text-primary);
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(30, 49, 34, 0.10);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss[b-xpe3ru8euy] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* _content/AlchemosPositive.Portal/Components/Layout/NavMenu.razor.rz.scp.css */
/* =============================================================================
   NavMenu — Premium Sidebar Navigation
   Design contract: Slate + Teal, Inter, calm confidence, semantic tokens only.
   ============================================================================= */

/* ── Override mud-typography BG bleed (must be first) ───────────────────────── */
[b-ua8uhdo0ro] .mud-typography {
  background-color: transparent !important;
}

/* ── Section labels: "Main", "Settings", "Help" ─────────────────────────────── */
[b-ua8uhdo0ro] .nav-section-header {
  font-size: var(--text-xs);           /* 0.75rem — style contract §2.1 */
  font-weight: 600;
  letter-spacing: var(--tracking-wide); /* 0.04em — style contract §2.3 */
  text-transform: uppercase;
  color: var(--color-text-secondary);
  padding-left: 1.25rem !important;    /* !important — overrides mud-typography padding:0 reset */
  padding-right: 1rem !important;
  padding-top: var(--space-3) !important;
  padding-bottom: var(--space-2) !important;
  margin-top: var(--space-2);
  display: block;
}

/* ── Nav link base ──────────────────────────────────────────────────────────── */
[b-ua8uhdo0ro] .mud-nav-link {
  border-radius: var(--radius-md);
  margin: 1px var(--space-2);
  padding: 7px 12px;
  font-size: var(--text-sm);
  font-weight: 400;
  font-variation-settings: "wght" 420;   /* Inter variable — softer than 500, firmer than 400 */
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1, "ss01" 1;
  line-height: 1.45;                     /* breathing room between label and icon */
  color: var(--color-text-primary);
  letter-spacing: var(--tracking-normal);
  transition: background-color var(--transition-interactive),
              color var(--transition-interactive);
}

/* ── Hover ──────────────────────────────────────────────────────────────────── */
[b-ua8uhdo0ro] .mud-nav-link:hover {
  background-color: var(--color-accent-subtle) !important;  /* teal-1 = #F0FDFA */
  color: var(--color-accent) !important;
}

/* ── Active / selected item ─────────────────────────────────────────────────── */
/* Use inset box-shadow (not border-left) — works with border-radius + margin */
[b-ua8uhdo0ro] .mud-nav-item.mud-nav-item-active > .mud-nav-link,
[b-ua8uhdo0ro] .mud-nav-link.active {
  background-color: var(--teal-1) !important;      /* #F0FDFA — teal tint */
  color: var(--color-accent) !important;           /* teal-9 — strong accent */
  box-shadow: inset 3px 0 0 var(--color-accent) !important;
  font-weight: 550;                                /* Inter variable — between semibold and medium */
  font-variation-settings: "wght" 550 !important;
}

/* ── Icons in nav links ─────────────────────────────────────────────────────── */
[b-ua8uhdo0ro] .mud-nav-link .mud-icon-root {
  font-size: 19px;
  color: var(--color-text-secondary);
  flex-shrink: 0;
  transition: color var(--transition-interactive);
}
[b-ua8uhdo0ro] .mud-nav-link:hover .mud-icon-root {
  color: var(--color-accent);
}
[b-ua8uhdo0ro] .mud-nav-item.mud-nav-item-active > .mud-nav-link .mud-icon-root,
[b-ua8uhdo0ro] .mud-nav-link.active .mud-icon-root {
  color: var(--color-accent);
}

/* ── Nav group header row ───────────────────────────────────────────────────── */
[b-ua8uhdo0ro] .mud-nav-group > .mud-expand-panel > .mud-expand-panel-header .mud-nav-link {
  font-weight: 500;
  font-variation-settings: "wght" 520;  /* Inter variable — soft semibold, not heavy */
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1, "ss01" 1;
  font-size: var(--text-sm);
  color: var(--color-text-primary);
  letter-spacing: -0.005em;             /* very subtle negative tracking for headlines */
  padding: 8px 12px;
  line-height: 1.45;
}

/* Group header icon — slightly larger, same secondary color */
[b-ua8uhdo0ro] .mud-nav-group > .mud-expand-panel > .mud-expand-panel-header .mud-nav-link .mud-icon-root {
  font-size: 20px;
  color: var(--slate-9);             /* slate-9 = #64748B — neutral, refined */
}

/* Group expanded: color its header icon with accent */
[b-ua8uhdo0ro] .mud-nav-group.mud-nav-group-expanded > .mud-expand-panel > .mud-expand-panel-header .mud-nav-link .mud-icon-root {
  color: var(--color-accent);
}

/* ── Group expand/collapse chevron button ───────────────────────────────────── */
/* Override MudBlazor's default teal Color.Primary fill on the chevron button */
[b-ua8uhdo0ro] .mud-nav-group > .mud-expand-panel > .mud-expand-panel-header .mud-icon-button {
  color: var(--color-text-secondary) !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 4px;
  border-radius: var(--radius-sm);
  transition: color var(--transition-interactive),
              transform var(--transition-interactive);
}
[b-ua8uhdo0ro] .mud-nav-group > .mud-expand-panel > .mud-expand-panel-header .mud-icon-button:hover {
  color: var(--color-accent) !important;
  background: var(--color-accent-subtle) !important;
}
[b-ua8uhdo0ro] .mud-nav-group > .mud-expand-panel > .mud-expand-panel-header .mud-icon-button .mud-icon-root {
  font-size: 16px;
}

/* ── Child nav links (inside collapsed groups) ──────────────────────────────── */
[b-ua8uhdo0ro] .mud-nav-group .mud-collapse-container .mud-nav-link {
  padding-left: 44px;                /* optical indent: aligns with parent label text */
  font-size: 0.8125rem;              /* 13px — one notch smaller than parent for hierarchy */
  font-weight: 400;
  font-variation-settings: "wght" 390;  /* slight softness */
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1, "ss01" 1;
  line-height: 1.45;
  color: var(--slate-11);            /* #3D4E5C — clear but not primary-level */
}
[b-ua8uhdo0ro] .mud-nav-group .mud-collapse-container .mud-nav-link:hover {
  color: var(--color-accent) !important;
}
[b-ua8uhdo0ro] .mud-nav-group .mud-collapse-container .mud-nav-item.mud-nav-item-active > .mud-nav-link,
[b-ua8uhdo0ro] .mud-nav-group .mud-collapse-container .mud-nav-link.active {
  color: var(--color-accent) !important;
  font-weight: 500;
  font-variation-settings: "wght" 520 !important;
}

/* Child item leaf icons — smaller and more muted */
[b-ua8uhdo0ro] .mud-nav-group .mud-collapse-container .mud-nav-link .mud-icon-root {
  font-size: 17px;
  color: var(--slate-8);             /* slate-8 = #96A3B0 — deliberately muted */
}
[b-ua8uhdo0ro] .mud-nav-group .mud-collapse-container .mud-nav-link:hover .mud-icon-root,
[b-ua8uhdo0ro] .mud-nav-group .mud-collapse-container .mud-nav-item.mud-nav-item-active > .mud-nav-link .mud-icon-root {
  color: var(--color-accent);
}

/* ── Emission cart nav link — badge row & count chip ────────────────────────── */
/* .nav-badge-row wraps the text + chip inside a MudNavLink child slot.
   In mini/collapsed mode the entire .mud-collapse-container is display:none so this
   never affects the 64px collapsed drawer width. */
[b-ua8uhdo0ro] .nav-badge-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

[b-ua8uhdo0ro] .nav-cart-chip.mud-chip {
  height: 18px !important;
  min-width: 22px !important;
  padding: 0 var(--space-1) !important;
  font-size: 11px !important;
  line-height: 18px !important;
}

/* ── MudDivider in sidebar ──────────────────────────────────────────────────── */
[b-ua8uhdo0ro] .mud-divider {
  border-color: var(--color-border-subtle) !important;
}

/* ── Bottom version caption ─────────────────────────────────────────────────── */
[b-ua8uhdo0ro] .mud-typography-caption {
  font-size: var(--text-xs);
  color: var(--color-text-secondary);
  letter-spacing: var(--tracking-normal);
}

/* ── Dark mode overrides for direct palette refs ────────────────────────────── */
[data-theme="dark"][b-ua8uhdo0ro]  .mud-nav-group > .mud-expand-panel > .mud-expand-panel-header .mud-nav-link .mud-icon-root {
  color: var(--color-text-secondary);
}
[data-theme="dark"][b-ua8uhdo0ro]  .mud-nav-group.mud-nav-group-expanded > .mud-expand-panel > .mud-expand-panel-header .mud-nav-link .mud-icon-root {
  color: var(--color-accent);
}
[data-theme="dark"][b-ua8uhdo0ro]  .mud-nav-group .mud-collapse-container .mud-nav-link .mud-icon-root {
  color: var(--color-text-secondary);
}
[data-theme="dark"][b-ua8uhdo0ro]  .mud-nav-item.mud-nav-item-active > .mud-nav-link,
[data-theme="dark"][b-ua8uhdo0ro]  .mud-nav-link.active {
  background-color: var(--color-accent-subtle) !important;
  box-shadow: inset 3px 0 0 var(--color-accent) !important;
}
/* _content/AlchemosPositive.Portal/Components/Shared/EmptyState.razor.rz.scp.css */
/* =============================================================================
   EmptyState — Spring Shared Component Styles
   ============================================================================= */

[b-bx8hs2qm2t] .mud-paper.empty-state {
  background: linear-gradient(135deg, var(--slate-1) 0%, #F0F7EE 100%);
  border: 1px dashed var(--slate-6);
  border-radius: var(--radius-xl);
  padding: 3rem 1.5rem;
}

/* Spring-tinted empty icon */
[b-bx8hs2qm2t] .empty-state .mud-icon-root {
  color: var(--slate-7) !important;
  opacity: 0.65;
}
/* _content/AlchemosPositive.Portal/Components/Shared/KpiCard.razor.rz.scp.css */
/* =============================================================================
   KpiCard — Spring Shared Component Styles
   Spring-themed KPI cards with colored accent strip and hover lift.
   ============================================================================= */

[b-wsmkw44r4b] .mud-paper.kpi-card {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-xl) !important;
  border: 1px solid var(--color-border-subtle);
  background: var(--color-surface-1);
  transition: transform var(--transition-interactive),
              box-shadow var(--transition-interactive);
}

[b-wsmkw44r4b] .mud-paper.kpi-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--color-accent), var(--color-border-default));
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
}

[b-wsmkw44r4b] .mud-paper.kpi-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(30, 49, 34, 0.10) !important;
}

/* Icon avatar - spring tinted */
[b-wsmkw44r4b] .kpi-card .mud-avatar-outlined {
  border-color: var(--slate-6);
  background-color: var(--color-accent-subtle);
  color: var(--color-accent);
}
/* _content/AlchemosPositive.Portal/Features/Approvals/ApprovalQueue.razor.rz.scp.css */
/* ══════════════════════════════════════════════════════════════
   ApprovalQueue.razor.css — Spring Aesthetics
   §7.3.2 transparency fix | §0.2 Typo-first | Misty Spring palette
   ══════════════════════════════════════════════════════════════ */

[b-tplovwo6oq] .mud-typography {
    background-color: transparent !important;
}

/* ── Page root ───────────────────────────────────────────────── */
.approvals-root[b-tplovwo6oq] {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
    padding-bottom: var(--space-8);
    animation: approvalsFadeIn-b-tplovwo6oq var(--transition-reveal) ease-out both;
    background:
        radial-gradient(ellipse 130% 55% at 60% 0%, rgba(204, 251, 241, 0.18) 0%, transparent 55%),
        radial-gradient(ellipse 90% 40% at 5% 80%, rgba(240, 244, 255, 0.12) 0%, transparent 55%);
}

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

/* ── Hero Banner ─────────────────────────────────────────────── */
.approvals-hero[b-tplovwo6oq] {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-xl);
    padding: var(--space-8) var(--space-content);
    background: linear-gradient(
        130deg,
        #ddf3ee 0%,
        #e8f5e9 22%,
        #eff6fb 48%,
        #f3eff9 72%,
        #fdf5ee 100%
    );
    border: 1px solid rgba(180, 210, 200, 0.55);
    box-shadow: 0 2px 20px rgba(15, 118, 110, 0.06), 0 1px 4px rgba(15, 23, 42, 0.04);
    min-height: 110px;
    display: flex;
    align-items: center;
}

.approvals-hero[b-tplovwo6oq]::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 5% 50%, rgba(45, 212, 191, 0.10) 0%, transparent 55%),
        radial-gradient(ellipse at 90% 30%, rgba(167, 139, 250, 0.07) 0%, transparent 50%);
    pointer-events: none;
}

.approvals-hero__body[b-tplovwo6oq] {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    flex: 1;
}

.approvals-hero__eyebrow[b-tplovwo6oq] {
    color: var(--color-accent-text, #0C5E58);
    margin: 0 0 var(--space-1) 0;
}

.approvals-hero__title[b-tplovwo6oq] {
    color: var(--color-text-primary, #0F1A25);
    margin: 0 0 var(--space-1) 0;
    font-weight: 700;
}

.approvals-hero__sub[b-tplovwo6oq] {
    color: var(--color-text-secondary, #3D4E5C);
    margin: 0;
    max-width: 560px;
}

.approvals-hero__icon-wrap[b-tplovwo6oq] {
    position: absolute;
    right: var(--space-8);
    top: 50%;
    transform: translateY(-50%);
    width: 72px;
    height: 72px;
    background: rgba(255, 255, 255, 0.55);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(196, 205, 214, 0.35);
    opacity: 0.6;
    pointer-events: none;
}

@media (max-width: 599px) {
    .approvals-hero[b-tplovwo6oq] { padding: var(--space-6) var(--space-4); }
    .approvals-hero__icon-wrap[b-tplovwo6oq] { display: none; }
}

/* ── KPI Stat Cards ──────────────────────────────────────────── */
.approvals-kpi-card[b-tplovwo6oq] {
    background: var(--color-surface-2);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    transition: transform var(--transition-interactive);
}

.approvals-kpi-card:hover[b-tplovwo6oq] { transform: translateY(-1px); }

.approvals-kpi-card--urgent[b-tplovwo6oq]  { border-left: 4px solid var(--color-error-solid, #EF4444) !important; }
.approvals-kpi-card--pending[b-tplovwo6oq] { border-left: 4px solid var(--color-info-solid, #3B82F6) !important; }
.approvals-kpi-card--success[b-tplovwo6oq] { border-left: 4px solid var(--color-success-solid, #22C55E) !important; }
.approvals-kpi-card--warn[b-tplovwo6oq]    { border-left: 4px solid var(--color-warning-solid, #F59E0B) !important; }

/* ── Filter Tabs ─────────────────────────────────────────────── */
[b-tplovwo6oq] .mud-tabs .mud-tab {
    font-weight: 500;
    letter-spacing: 0.02em;
}

[b-tplovwo6oq] .mud-tabs .mud-tab-active {
    color: var(--color-accent) !important;
}

[b-tplovwo6oq] .mud-tabs .mud-tab-slider {
    background-color: var(--color-accent) !important;
}

/* ── Approval Item Cards ─────────────────────────────────────── */
.approvals-item-card[b-tplovwo6oq] {
    background: var(--color-surface-2);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-lg);
    transition: transform var(--transition-interactive), background var(--transition-interactive);
}

.approvals-item-card:hover[b-tplovwo6oq] {
    transform: translateY(-1px);
    background: var(--color-bg-subtle);
}

.approvals-item-card--urgent[b-tplovwo6oq] {
    border-left: 3px solid var(--color-error-solid, #EF4444) !important;
}

.approvals-item-card--high[b-tplovwo6oq] {
    border-left: 3px solid var(--color-warning-solid, #F59E0B) !important;
}

/* ── Empty State ─────────────────────────────────────────────── */
.approvals-empty[b-tplovwo6oq] {
    background: var(--color-surface-2);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-lg);
    padding: var(--space-12) var(--space-8);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
}
/* _content/AlchemosPositive.Portal/Features/Approvals/WorkflowConfiguration.razor.rz.scp.css */
/* ══════════════════════════════════════════════════════════════
   WorkflowConfiguration.razor.css — Archetype 3 List Page
   §7.3.2 transparency fix | §0.2 Typo-first | Spring Slate/Teal palette
   ══════════════════════════════════════════════════════════════ */

/* §7.3.2 — Required: defeat global app.css background-color on MudText
   inside any non-page-background surface (hero, cards, table rows). */
[b-e22hm624d6] .mud-typography {
    background-color: transparent !important;
}

/* ── Page root ───────────────────────────────────────────────── */
.wf-root[b-e22hm624d6] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    padding-bottom: var(--space-8);
    animation: wfFadeIn-b-e22hm624d6 var(--transition-reveal) ease-out both;
}

@keyframes wfFadeIn-b-e22hm624d6 {
    from { opacity: 0; transform: translateY(5px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Hero decorative icon ────────────────────────────────────── */
.wf-hero-icon[b-e22hm624d6] {
    font-size: 3rem;
    opacity: 0.18;
    color: var(--color-accent, #0F766E);
}

/* ── Two-line row height override ────────────────────────────── */
[b-e22hm624d6] .wf-table .mud-table-row td {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
    vertical-align: top;
}

/* ── Alternating row tint ────────────────────────────────────── */
[b-e22hm624d6] .wf-table tr.row-even td {
    background-color: rgba(0, 0, 0, 0.018);
}

/* ── Row hover ───────────────────────────────────────────────── */
[b-e22hm624d6] .wf-table .mud-table-hover-row:hover td {
    background-color: var(--color-bg-hover, #DDE3EA) !important;
    transition: background-color var(--transition-interactive);
}

/* ── Status column: avatar scale on active ───────────────────── */
.wf-status-active .mud-avatar[b-e22hm624d6] {
    transform: scale(1.05);
}

/* ── Conditions pill ─────────────────────────────────────────── */
.wf-conditions-pill[b-e22hm624d6] {
    display: inline-block;
    font-size: var(--text-xs, 0.75rem);
    font-weight: 500;
    color: var(--color-text-secondary, #3D4E5C);
    background: var(--color-bg-component, #EAEEF2);
    border: 1px solid var(--color-border-subtle, #C4CDD6);
    border-radius: 999px;
    padding: 2px 8px;
}

/* ── Mobile: actions always visible ─────────────────────────── */
@media (max-width: 599px) {
    [b-e22hm624d6] .wf-table .mud-table-row { 
        border-bottom: 6px solid var(--color-bg-subtle, #F4F6F8) !important; 
    }

    .wf-hero-icon[b-e22hm624d6] { display: none; }

    [b-e22hm624d6] .wf-table .mud-table-row td {
        padding-top: 8px !important;
        padding-bottom: 8px !important;
    }
}

/* ── Entity type color dots ──────────────────────────────────── */
.entity-dot[b-e22hm624d6] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
}
/* _content/AlchemosPositive.Portal/Features/CalculatorBuilder/BatchImport.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════
   BatchImport.razor.css  — Spring Aesthetics
   Style Contract §7.3.2  ·  §0.2 Typo-first  ·  §7.3.1 Equal-height
   ═══════════════════════════════════════════════════════════════ */

/* §7.3.2 — Defeat global app.css background-color on MudText inside gradient surfaces */
[b-1bhinxygf6] .mud-typography {
    background-color: transparent !important;
}

/* ── Hero Banner ─────────────────────────────────────────────── */
.batch-hero[b-1bhinxygf6] {
    background: linear-gradient(135deg,
        #ddf3ee 0%,
        #e8f5e9 28%,
        #eff6fb 56%,
        #f3eff9 80%,
        #fdf5ee 100%
    );
    border-radius: var(--radius-xl);
    padding: var(--space-8) var(--space-8);
    margin-bottom: var(--space-6);
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(221, 243, 238, 0.7);
}

.batch-hero[b-1bhinxygf6]::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 10% 50%, rgba(45, 212, 191, 0.08) 0%, transparent 60%),
                radial-gradient(ellipse at 90% 30%, rgba(167, 139, 250, 0.07) 0%, transparent 55%);
    pointer-events: none;
}

.batch-hero__eyebrow[b-1bhinxygf6] {
    color: var(--teal-11, #0C5E58);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 600;
    margin: 0 0 var(--space-2) 0;
}

.batch-hero__title[b-1bhinxygf6] {
    color: var(--color-text-primary, #0F1A25);
    margin: 0 0 var(--space-2) 0;
    line-height: 1.2;
    letter-spacing: -0.02em;
}

.batch-hero__sub[b-1bhinxygf6] {
    color: var(--color-text-secondary, #3D4E5C);
    margin: 0;
    max-width: 540px;
    line-height: 1.65;
}

.batch-hero__actions[b-1bhinxygf6] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-top: var(--space-4);
    flex-wrap: wrap;
}

.batch-hero__badge[b-1bhinxygf6] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--text-xs, 0.75rem);
    font-weight: 500;
    color: var(--color-text-secondary, #3D4E5C);
    background: rgba(255, 255, 255, 0.55);
    border: 1px solid rgba(196, 205, 214, 0.5);
    border-radius: 999px;
    padding: 4px 12px;
    letter-spacing: 0.03em;
}

.batch-hero__icon-wrap[b-1bhinxygf6] {
    position: absolute;
    right: var(--space-8);
    top: 50%;
    transform: translateY(-50%);
    width: 80px;
    height: 80px;
    background: rgba(255, 255, 255, 0.55);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(196, 205, 214, 0.35);
    opacity: 0.65;
}

@media (max-width: 599px) {
    .batch-hero[b-1bhinxygf6] { padding: var(--space-6) var(--space-4); }
    .batch-hero__icon-wrap[b-1bhinxygf6] { display: none; }
}

/* ── Main Stepper Card ───────────────────────────────────────── */
.batch-wizard-card[b-1bhinxygf6] {
    background: var(--color-surface-2, #FAFBFC);
    border: 1px solid var(--color-border-subtle, #C4CDD6);
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.06);
}

/* Stepper override — pill/tab style */
[b-1bhinxygf6] .mud-stepper {
    background: transparent !important;
}

[b-1bhinxygf6] .mud-step-label {
    font-size: var(--text-sm, 0.875rem);
    font-weight: 500;
    letter-spacing: 0;
}

/* MudBlazor 8 connector line */
[b-1bhinxygf6] .mud-stepper-nav-connector-line {
    border-top-color: var(--color-border-subtle, #C4CDD6);
}

/* Inactive step icons — light bg + dark text → WCAG AAA contrast (~11:1)
   !important needed: MudBlazor's .mud-stepper .mud-stepper-nav .mud-step .mud-step-label .mud-step-label-icon
   has 0-5-0 specificity vs our scoped [b-xxxx] .mud-step-label-icon at 0-2-0 */
[b-1bhinxygf6] .mud-step-label-icon {
    background-color: var(--color-bg-component, #EAEEF2) !important;
    color: var(--color-text-primary, #0F1A25) !important;
    font-size: var(--text-xs, 0.75rem) !important;
    font-weight: 700 !important;
}

/* Active / primary step icon */
[b-1bhinxygf6] .mud-step-label-icon.mud-primary {
    background-color: var(--color-accent, #119E79) !important;
    color: #FFFFFF !important;
    font-weight: 700 !important;
}

/* Completed step icon (uses mud-success or mud-secondary in MudBlazor 8) */
[b-1bhinxygf6] .mud-step-label-icon.mud-success,
[b-1bhinxygf6] .mud-step-label-icon.mud-secondary {
    background-color: var(--color-accent, #119E79) !important;
    color: #FFFFFF !important;
    font-weight: 700 !important;
}

/* ── Step Content Container ──────────────────────────────────── */
.step-content[b-1bhinxygf6] {
    padding: var(--space-6);
}

.step-title[b-1bhinxygf6] {
    color: var(--color-text-primary, #0F1A25);
    margin: 0 0 var(--space-2) 0;
    letter-spacing: -0.02em;
}

.step-subtitle[b-1bhinxygf6] {
    color: var(--color-text-secondary, #3D4E5C);
    margin: 0 0 var(--space-6) 0;
    line-height: 1.65;
}

/* ── Calculator (Step 1) — Select Card ──────────────────────── */
.calc-select-wrapper[b-1bhinxygf6] {
    max-width: 100%;
}

.calc-info-banner[b-1bhinxygf6] {
    margin-top: var(--space-4);
    background: var(--teal-1, #F0FDFA);
    border: 1px solid var(--teal-6, #14B8A6);
    border-radius: var(--radius-md);
    padding: var(--space-3) var(--space-4);
    display: flex;
    gap: var(--space-3);
    align-items: flex-start;
}

.calc-info-banner__icon[b-1bhinxygf6] {
    color: var(--teal-9, #0F766E);
    flex-shrink: 0;
    margin-top: 1px;
}

.calc-info-banner__label[b-1bhinxygf6] {
    color: var(--teal-11, #0C5E58);
    font-size: var(--text-xs, 0.75rem);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin: 0 0 4px 0;
}

.calc-info-banner__text[b-1bhinxygf6] {
    color: var(--color-text-secondary, #3D4E5C);
    font-size: var(--text-sm, 0.875rem);
    margin: 0;
    line-height: 1.6;
}

/* Scope chip variants */
.scope-chip-scope1[b-1bhinxygf6] {
    background-color: var(--error-50, #FEF2F2) !important;
    color: var(--error-700, #B91C1C) !important;
    border: none !important;
    font-size: var(--text-xs) !important;
    font-weight: 500 !important;
}

.scope-chip-scope2[b-1bhinxygf6] {
    background-color: var(--warning-50, #FFFBEB) !important;
    color: var(--warning-700, #B45309) !important;
    border: none !important;
    font-size: var(--text-xs) !important;
    font-weight: 500 !important;
}

.scope-chip-scope3[b-1bhinxygf6] {
    background-color: var(--info-50, #F0F9FF) !important;
    color: var(--info-700, #0369A1) !important;
    border: none !important;
    font-size: var(--text-xs) !important;
    font-weight: 500 !important;
}

/* ── Upload Zone (Step 2) ────────────────────────────────────── */
.upload-zone[b-1bhinxygf6] {
    border: 2px dashed var(--teal-7, #0D9488);
    border-radius: var(--radius-xl);
    background: linear-gradient(135deg, var(--teal-1, #F0FDFA) 0%, #f9fffe 100%);
    padding: var(--space-10) var(--space-8);
    text-align: center;
    cursor: pointer;
    transition: border-color 120ms cubic-bezier(0.4, 0, 0.2, 1),
                background-color 120ms cubic-bezier(0.4, 0, 0.2, 1),
                transform 120ms cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.upload-zone[b-1bhinxygf6]::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 50% 0%, rgba(45, 212, 191, 0.07) 0%, transparent 60%);
    pointer-events: none;
}

.upload-zone:hover[b-1bhinxygf6] {
    border-color: var(--teal-9, #0F766E);
    background: linear-gradient(135deg, var(--teal-2, #CCFBF1) 0%, #f0fdf9 100%);
    transform: translateY(-1px);
}

.upload-zone:active[b-1bhinxygf6] {
    transform: translateY(0);
}

.upload-zone__icon-ring[b-1bhinxygf6] {
    width: 64px;
    height: 64px;
    background: rgba(255, 255, 255, 0.8);
    border: 1px solid var(--teal-6, #14B8A6);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto var(--space-4);
    transition: background-color 120ms cubic-bezier(0.4, 0, 0.2, 1);
}

.upload-zone:hover .upload-zone__icon-ring[b-1bhinxygf6] {
    background: rgba(255, 255, 255, 0.95);
}

.upload-zone__title[b-1bhinxygf6] {
    color: var(--color-text-primary, #0F1A25);
    margin: 0 0 var(--space-1) 0;
    font-weight: 600;
}

.upload-zone__hint[b-1bhinxygf6] {
    color: var(--color-text-secondary, #3D4E5C);
    margin: 0;
    font-size: var(--text-sm, 0.875rem);
}

.upload-zone__meta[b-1bhinxygf6] {
    color: var(--color-text-secondary, #3D4E5C);
    font-size: var(--text-xs, 0.75rem);
    margin: var(--space-2) 0 0 0;
    opacity: 0.7;
}

/* File accepted badge */
.file-accepted-badge[b-1bhinxygf6] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    background: var(--color-success-bg, #F0FDF4);
    border: 1px solid var(--color-success-border, #BBF7D0);
    border-radius: var(--radius-md);
    padding: var(--space-2) var(--space-4);
    margin-top: var(--space-4);
    font-size: var(--text-sm, 0.875rem);
    color: var(--color-success-text, #15803D);
    font-weight: 500;
    cursor: pointer;
    transition: background-color 120ms cubic-bezier(0.4, 0, 0.2, 1);
}

.file-accepted-badge:hover[b-1bhinxygf6] {
    background: var(--success-100, #DCFCE7);
}

.file-accepted-badge__remove[b-1bhinxygf6] {
    color: var(--color-success-text, #15803D);
    opacity: 0.6;
    cursor: pointer;
    transition: opacity 120ms;
    margin-left: var(--space-1);
    border-radius: 50%;
    display: flex;
    align-items: center;
}

.file-accepted-badge__remove:hover[b-1bhinxygf6] { opacity: 1; }

/* Template download link */
.template-link[b-1bhinxygf6] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--color-accent-text, #0C5E58) !important;
    font-size: var(--text-sm, 0.875rem);
    font-weight: 500;
    text-decoration: none;
    margin-top: var(--space-4);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md);
    transition: background-color 120ms;
}

.template-link:hover[b-1bhinxygf6] {
    background: var(--color-accent-subtle, #CCFBF1);
}

/* CSV preview table */
.csv-preview-section[b-1bhinxygf6] {
    margin-top: var(--space-6);
}

.csv-preview-label[b-1bhinxygf6] {
    color: var(--color-text-secondary, #3D4E5C);
    font-size: var(--text-xs, 0.75rem);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin: 0 0 var(--space-3) 0;
}

[b-1bhinxygf6] .csv-preview-table .mud-table-head .mud-table-cell {
    background-color: var(--teal-1, #F0FDFA);
    color: var(--teal-11, #0C5E58);
    font-size: var(--text-xs, 0.75rem);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 1px solid var(--teal-6, #14B8A6);
}

[b-1bhinxygf6] .csv-preview-table .mud-table-row .mud-table-cell {
    font-size: var(--text-sm, 0.875rem);
    color: var(--color-text-primary, #0F1A25);
    border-bottom: 1px solid var(--color-border-subtle, #C4CDD6);
}

[b-1bhinxygf6] .csv-preview-table .mud-table-root {
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border-subtle, #C4CDD6);
    overflow: hidden;
    box-shadow: none;
}

/* ── Field Reference Panel (Step 2) ─────────────────────────── */
[b-1bhinxygf6] .field-ref-panels .mud-expand-panel {
    background: var(--color-surface-2, #FAFBFC);
    border: 1px solid var(--color-border-subtle, #C4CDD6) !important;
    border-radius: var(--radius-md) !important;
    box-shadow: none !important;
}

[b-1bhinxygf6] .field-ref-panels .mud-expand-panel-header {
    color: var(--color-text-secondary, #3D4E5C);
    font-size: var(--text-sm, 0.875rem);
    font-weight: 600;
}

.field-ref-body[b-1bhinxygf6] {
    padding: var(--space-1) 0 var(--space-2) 0;
}

.field-ref-row[b-1bhinxygf6] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-4);
    padding: var(--space-2) var(--space-2);
    border-bottom: 1px solid var(--color-border-subtle, #C4CDD6);
}

.field-ref-row:last-child[b-1bhinxygf6] { border-bottom: none; }

.field-ref-meta[b-1bhinxygf6] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-width: 220px;
    flex-shrink: 0;
    flex-wrap: wrap;
}

.field-ref-label[b-1bhinxygf6] {
    color: var(--color-text-primary, #0F1A25);
    font-size: var(--text-sm, 0.875rem);
    font-weight: 600;
}

.field-ref-type-badge[b-1bhinxygf6] {
    font-size: var(--text-xs, 0.75rem);
    color: var(--color-text-secondary, #3D4E5C);
    background: var(--color-bg-component, #EAEEF2);
    border-radius: 4px;
    padding: 1px 6px;
    white-space: nowrap;
}

.field-ref-values[b-1bhinxygf6] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
    align-items: center;
    flex: 1;
    padding-top: 1px;
}

.field-ref-chip[b-1bhinxygf6] {
    display: inline-flex;
    align-items: center;
    font-size: var(--text-xs, 0.75rem);
    font-weight: 500;
    color: var(--teal-11, #0C5E58);
    background: var(--teal-1, #F0FDFA);
    border: 1px solid var(--teal-5, #2DD4BF);
    border-radius: 999px;
    padding: 2px 10px;
    cursor: default;
}

.field-ref-format[b-1bhinxygf6] {
    color: var(--color-text-secondary, #3D4E5C);
    font-size: var(--text-sm, 0.875rem);
    font-style: italic;
}

@media (max-width: 599px) {
    .field-ref-meta[b-1bhinxygf6] {
        min-width: unset;
    }

    .field-ref-row[b-1bhinxygf6] {
        flex-direction: column;
        gap: var(--space-2);
    }
}

/* ── Column Mapping (Step 3) ─────────────────────────────────── */
.mapping-field-card[b-1bhinxygf6] {
    background: var(--color-surface-2, #FAFBFC);
    border: 1px solid var(--color-border-subtle, #C4CDD6);
    border-radius: var(--radius-md);
    padding: var(--space-4);
    transition: border-color 120ms cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 120ms cubic-bezier(0.4, 0, 0.2, 1);
    height: 100%;
    box-sizing: border-box;
}

.mapping-field-card:hover[b-1bhinxygf6] {
    border-color: var(--teal-7, #0D9488);
    box-shadow: 0 2px 8px rgba(15, 184, 166, 0.1);
}

.mapping-field-card.mapped[b-1bhinxygf6] {
    border-color: var(--teal-6, #14B8A6);
    background: var(--teal-1, #F0FDFA);
}

.mapping-field-header[b-1bhinxygf6] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
}

.mapping-field-label[b-1bhinxygf6] {
    color: var(--color-text-primary, #0F1A25);
    font-size: var(--text-sm, 0.875rem);
    font-weight: 600;
    flex: 1;
}

.required-badge[b-1bhinxygf6] {
    font-size: 0.65rem;
    font-weight: 600;
    color: var(--color-error-text, #B91C1C);
    background: var(--color-error-bg, #FEF2F2);
    border: 1px solid var(--color-error-border, #FECACA);
    border-radius: 4px;
    padding: 1px 6px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    flex-shrink: 0;
}

.mapping-field-help[b-1bhinxygf6] {
    color: var(--color-text-secondary, #3D4E5C);
    font-size: var(--text-xs, 0.75rem);
    margin: var(--space-2) 0 0 0;
    line-height: 1.5;
}

.mapping-arrow[b-1bhinxygf6] {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-secondary, #3D4E5C);
    opacity: 0.5;
    font-size: 1rem;
    margin-bottom: var(--space-2);
}

/* ── Validation Stats (Step 4) ───────────────────────────────── */
.validation-stats-row[b-1bhinxygf6] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-4);
    margin-bottom: var(--space-6);
}

@media (max-width: 599px) {
    .validation-stats-row[b-1bhinxygf6] { grid-template-columns: 1fr; }
}

.stat-card[b-1bhinxygf6] {
    background: var(--color-surface-2, #FAFBFC);
    border: 1px solid var(--color-border-subtle, #C4CDD6);
    border-radius: var(--radius-lg);
    padding: var(--space-4) var(--space-5);
    display: flex;
    align-items: center;
    gap: var(--space-4);
    height: 100%;
    box-sizing: border-box;
}

.stat-card__icon-ring[b-1bhinxygf6] {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.stat-card__icon-ring.total[b-1bhinxygf6]  { background: var(--color-accent-subtle, #CCFBF1); }
.stat-card__icon-ring.valid[b-1bhinxygf6]  { background: var(--color-success-bg, #F0FDF4); }
.stat-card__icon-ring.error[b-1bhinxygf6]  { background: var(--color-error-bg, #FEF2F2); }

.stat-card__number[b-1bhinxygf6] {
    color: var(--color-text-primary, #0F1A25);
    font-size: 2rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.03em;
    margin: 0 0 2px 0;
}

.stat-card__number.valid[b-1bhinxygf6] { color: var(--color-success-text, #15803D); }
.stat-card__number.error[b-1bhinxygf6] { color: var(--color-error-text, #B91C1C); }

.stat-card__label[b-1bhinxygf6] {
    color: var(--color-text-secondary, #3D4E5C);
    font-size: var(--text-xs, 0.75rem);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 0;
}

/* Validating spinner placeholder */
.validation-loading[b-1bhinxygf6] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-12) var(--space-6);
}

.validation-loading__label[b-1bhinxygf6] {
    color: var(--color-text-secondary, #3D4E5C);
    font-size: var(--text-sm, 0.875rem);
}

/* Validation errors list */
.validation-errors-section[b-1bhinxygf6] {
    margin-top: var(--space-4);
    background: var(--color-error-bg, #FEF2F2);
    border: 1px solid var(--color-error-border, #FECACA);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.validation-errors-header[b-1bhinxygf6] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    background: var(--error-100, #FEE2E2);
    border-bottom: 1px solid var(--color-error-border, #FECACA);
}

.validation-errors-label[b-1bhinxygf6] {
    color: var(--color-error-text, #B91C1C);
    font-size: var(--text-xs, 0.75rem);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 0;
    flex: 1;
}

.validation-error-item[b-1bhinxygf6] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-4) var(--space-2) var(--space-4);
    border-bottom: 1px solid rgba(254, 202, 202, 0.5);
    font-size: var(--text-sm, 0.875rem);
    line-height: 1.5;
}

.validation-error-item:last-child[b-1bhinxygf6] { border-bottom: none; }

.validation-error-row-badge[b-1bhinxygf6] {
    font-size: var(--text-xs, 0.75rem);
    font-weight: 600;
    color: var(--color-error-text, #B91C1C);
    background: var(--error-100, #FEE2E2);
    border-radius: var(--radius-sm);
    padding: 1px 7px;
    flex-shrink: 0;
    margin-top: 2px;
}

.validation-error-msg[b-1bhinxygf6] {
    color: var(--color-text-primary, #0F1A25);
}

.validation-errors-more[b-1bhinxygf6] {
    color: var(--color-text-secondary, #3D4E5C);
    font-size: var(--text-xs, 0.75rem);
    padding: var(--space-2) var(--space-4);
    font-style: italic;
}

/* ── Execute Step (Step 5) ───────────────────────────────────── */
.execute-ready-banner[b-1bhinxygf6] {
    background: var(--teal-1, #F0FDFA);
    border: 1px solid var(--teal-6, #14B8A6);
    border-radius: var(--radius-md);
    padding: var(--space-4) var(--space-5);
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-6);
}

.execute-ready-banner__icon[b-1bhinxygf6] { color: var(--teal-9, #0F766E); }
.execute-ready-banner__text[b-1bhinxygf6] { color: var(--color-text-secondary, #3D4E5C); font-size: var(--text-sm); }
.execute-ready-banner__number[b-1bhinxygf6] {
    color: var(--teal-11, #0C5E58);
    font-weight: 700;
}

.execute-progress-section[b-1bhinxygf6] {
    padding: var(--space-6) 0;
}

.execute-progress-label[b-1bhinxygf6] {
    color: var(--color-text-secondary, #3D4E5C);
    font-size: var(--text-sm, 0.875rem);
    text-align: center;
    margin: var(--space-3) 0 0 0;
}

[b-1bhinxygf6] .execute-progress .mud-progress-linear-bar {
    background-color: var(--teal-9, #0F766E);
    border-radius: 999px;
}

[b-1bhinxygf6] .execute-progress {
    border-radius: 999px;
    height: 8px;
    background-color: var(--teal-2, #CCFBF1);
}

.execute-progress-stats[b-1bhinxygf6] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: var(--space-2);
}

.execute-progress-pct[b-1bhinxygf6] {
    color: var(--teal-11, #0C5E58);
    font-size: var(--text-sm, 0.875rem);
    font-weight: 600;
}

.execute-complete-banner[b-1bhinxygf6] {
    background: linear-gradient(135deg, var(--success-50, #F0FDF4) 0%, #f9fff9 100%);
    border: 1px solid var(--color-success-border, #BBF7D0);
    border-radius: var(--radius-lg);
    padding: var(--space-6) var(--space-6);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--space-3);
    margin-bottom: var(--space-6);
}

.execute-complete-banner__icon-ring[b-1bhinxygf6] {
    width: 60px;
    height: 60px;
    background: var(--color-success-bg, #F0FDF4);
    border: 2px solid var(--color-success-border, #BBF7D0);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.execute-complete-banner__title[b-1bhinxygf6] {
    color: var(--color-success-text, #15803D);
    margin: 0;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.execute-complete-banner__sub[b-1bhinxygf6] {
    color: var(--color-text-secondary, #3D4E5C);
    font-size: var(--text-sm, 0.875rem);
    margin: 0;
}

.execute-actions[b-1bhinxygf6] {
    display: flex;
    gap: var(--space-3);
    flex-wrap: wrap;
    justify-content: center;
}

/* ── Navigation footer ───────────────────────────────────────── */
.step-nav-bar[b-1bhinxygf6] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-4) var(--space-6);
    border-top: 1px solid var(--color-border-subtle, #C4CDD6);
    background: var(--color-bg-subtle, #F4F6F8);
}

.step-nav-bar__left[b-1bhinxygf6] { display: flex; gap: var(--space-2); }
.step-nav-bar__right[b-1bhinxygf6] { display: flex; gap: var(--space-2); }

/* Breadcrumb tweaks */
[b-1bhinxygf6] .mud-breadcrumb-item .mud-link {
    color: var(--color-text-secondary, #3D4E5C) !important;
    font-size: var(--text-sm, 0.875rem);
}

[b-1bhinxygf6] .mud-breadcrumb-separator {
    color: var(--color-border-default, #B3BEC9);
}

/* ── Category filter container ──────────────────────────────── */
.batch-category-filter[b-1bhinxygf6] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2);
    padding: var(--space-3) 0;
}

/* ── Semantic utility classes (replace inline Style= attributes) ─ */

/* Hero area */
.bi-hero-breadcrumbs[b-1bhinxygf6] { opacity: 0.75; }
.bi-hero-icon[b-1bhinxygf6] {
    font-size: 3rem;
    opacity: 0.18;
    color: var(--color-accent);
}

/* Text utilities */
.bi-filter-label[b-1bhinxygf6] {
    color: var(--color-text-secondary);
    font-weight: 600;
    white-space: nowrap;
}

.bi-calc-item-cat[b-1bhinxygf6] {
    color: var(--color-text-secondary);
    margin-left: 4px;
    font-size: var(--text-xs);
}

.bi-caption-text[b-1bhinxygf6] { color: var(--color-text-secondary); }
.bi-error-text[b-1bhinxygf6]   { color: var(--color-error-text); }

/* Icon sizes */
.bi-icon-sm[b-1bhinxygf6] { font-size: 18px; }
.bi-icon-xs[b-1bhinxygf6] { font-size: 16px; }

/* Upload zone icon */
.bi-upload-icon[b-1bhinxygf6] {
    color: var(--color-accent);
    font-size: 28px;
}

/* Stat-card icons — size shared, color per variant */
.bi-stat-icon[b-1bhinxygf6]         { font-size: 22px; }
.bi-stat-icon--total[b-1bhinxygf6]  { color: var(--color-accent); }
.bi-stat-icon--valid[b-1bhinxygf6]  { color: var(--color-success-text); }
.bi-stat-icon--error[b-1bhinxygf6]  { color: var(--color-error-text); }

/* Validation errors header icon */
.bi-error-icon-sm[b-1bhinxygf6] {
    color: var(--color-error-text);
    font-size: 18px;
    flex-shrink: 0;
}

/* Execute complete check icon */
.bi-complete-icon[b-1bhinxygf6] {
    color: var(--color-success-text);
    font-size: 30px;
}

/* ── Responsive — Archetype 7 Wizard (xs/sm) ─────────────────── */
@media (max-width: 599px) {
    .step-content[b-1bhinxygf6] {
        padding: var(--space-4);
    }

    .batch-wizard-card[b-1bhinxygf6] {
        border-radius: var(--radius-lg);
    }

    .validation-stats-row[b-1bhinxygf6] {
        grid-template-columns: 1fr;
    }

    .execute-actions[b-1bhinxygf6] {
        flex-direction: column;
    }

    .execute-actions .mud-button[b-1bhinxygf6] {
        width: 100%;
    }

    .step-nav-bar[b-1bhinxygf6] {
        padding: var(--space-3) var(--space-4);
    }

    .stat-card[b-1bhinxygf6] {
        padding: var(--space-3) var(--space-4);
    }

    .upload-zone[b-1bhinxygf6] {
        padding: var(--space-8) var(--space-4);
    }

    .execute-ready-banner[b-1bhinxygf6] {
        flex-direction: column;
        text-align: center;
    }
}

@media (min-width: 600px) and (max-width: 959px) {
    .step-content[b-1bhinxygf6] {
        padding: var(--space-5);
    }

    .validation-stats-row[b-1bhinxygf6] {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* ── Reduced motion ──────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .upload-zone[b-1bhinxygf6],
    .upload-zone:hover[b-1bhinxygf6],
    .mapping-field-card[b-1bhinxygf6],
    .file-accepted-badge[b-1bhinxygf6] { transition: none !important; }
}
/* _content/AlchemosPositive.Portal/Features/CalculatorBuilder/CalculatorDetail.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════
   CalculatorDetail.razor.css
   Slot: Features/CalculatorBuilder
   Design system: Slate + Teal (ref: alchemosPositiveStyleContract.prompt.md §1)
   ═══════════════════════════════════════════════════════ */

/* ── Section header ─────────────────────────────────── */
.detail-section-header[b-s0oaw9zcb9] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

/* ── Section icons (colour-coded by role) ───────────── */
.detail-section-icon[b-s0oaw9zcb9] {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

    .detail-section-icon--teal[b-s0oaw9zcb9] {
        background-color: var(--teal-2);
        color: var(--teal-9);
    }

    .detail-section-icon--violet[b-s0oaw9zcb9] {
        background-color: var(--violet-2);
        color: var(--violet-9);
    }

    .detail-section-icon--amber[b-s0oaw9zcb9] {
        background-color: var(--warning-100);
        color: var(--warning-700);
    }

    .detail-section-icon--slate[b-s0oaw9zcb9] {
        background-color: var(--slate-3);
        color: var(--slate-11);
    }

/* ── Field list (What You'll Need) ──────────────────── */
.detail-fields-list[b-s0oaw9zcb9] {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

.detail-field-item[b-s0oaw9zcb9] {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
}

.detail-field-dot[b-s0oaw9zcb9] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-top: 5px;
    flex-shrink: 0;
}

    .detail-field-dot--required[b-s0oaw9zcb9] {
        background-color: var(--teal-9);
    }

    .detail-field-dot--optional[b-s0oaw9zcb9] {
        background-color: var(--slate-7);
    }

.detail-field-body[b-s0oaw9zcb9] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.375rem;
    font-size: var(--text-sm);
}

.detail-field-label[b-s0oaw9zcb9] {
    color: var(--color-text-primary);
    font-weight: 500;
}

.detail-field-unit[b-s0oaw9zcb9] {
    color: var(--color-text-secondary);
    font-size: var(--text-xs);
}

.detail-field-required-badge[b-s0oaw9zcb9] {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 1px 6px;
    border-radius: 4px;
    background-color: var(--teal-2);
    color: var(--teal-9);
}

.detail-field-help[b-s0oaw9zcb9] {
    width: 100%;
    margin: 2px 0 0;
    font-size: var(--text-xs);
    color: var(--color-text-secondary);
    line-height: var(--leading-relaxed);
}

/* ── Formula box ─────────────────────────────────────── */
.detail-formula-box[b-s0oaw9zcb9] {
    background-color: var(--slate-2);
    border: 1px solid var(--slate-6);
    border-radius: 8px;
    padding: 0.875rem 1rem;
}

/* ── Data sources ────────────────────────────────────── */
.detail-sources-list[b-s0oaw9zcb9] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.detail-source-item[b-s0oaw9zcb9] {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
}

/* ── Example calculation ─────────────────────────────── */
.detail-example-box[b-s0oaw9zcb9] {
    background-color: var(--slate-2);
    border: 1px solid var(--slate-6);
    border-radius: 8px;
    padding: 0.875rem 1rem;
}

.detail-example-step[b-s0oaw9zcb9] {
    display: flex;
    justify-content: space-between;
    padding: 0.25rem 0;
    font-size: var(--text-sm);
    border-bottom: 1px dashed var(--slate-5);
}

    .detail-example-step:last-of-type[b-s0oaw9zcb9] {
        border-bottom: none;
    }

.detail-example-step__label[b-s0oaw9zcb9] {
    color: var(--color-text-secondary);
}

.detail-example-step__value[b-s0oaw9zcb9] {
    color: var(--color-text-primary);
    font-weight: 500;
}

.detail-example-result[b-s0oaw9zcb9] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 2px solid var(--teal-6);
}

.detail-example-result__header[b-s0oaw9zcb9] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: var(--text-base);
    font-weight: 600;
}

.detail-example-result__label[b-s0oaw9zcb9] {
    color: var(--teal-11);
}

.detail-example-result__value[b-s0oaw9zcb9] {
    color: var(--teal-9);
    font-size: var(--text-lg);
    font-weight: 700;
    padding-left: calc(24px + 0.5rem);
}

/* ── Related calculator card ─────────────────────────── */
.related-calc-card[b-s0oaw9zcb9] {
    cursor: pointer;
    transition: background-color 120ms ease-out, border-color 120ms ease-out;
}

    .related-calc-card:hover[b-s0oaw9zcb9] {
        background-color: var(--slate-3) !important;
        border-color: var(--teal-6) !important;
    }

/* ── CTA bar ─────────────────────────────────────────── */
.detail-cta-bar[b-s0oaw9zcb9] {
    background: linear-gradient(135deg, var(--teal-1) 0%, var(--slate-2) 100%);
    border: 1px solid var(--teal-5);
}

/* ── Inline-style replacements (style contract §13) ─── */
.detail-desc-secondary[b-s0oaw9zcb9] {
    color: var(--color-text-secondary);
}

.detail-formula-caption[b-s0oaw9zcb9] {
    color: var(--color-text-secondary);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.detail-formula-text[b-s0oaw9zcb9] {
    font-family: monospace;
    color: var(--teal-9);
}

.detail-source-verify-icon[b-s0oaw9zcb9] {
    color: var(--success-600);
    font-size: 18px;
    flex-shrink: 0;
}

.detail-caption-secondary[b-s0oaw9zcb9] {
    color: var(--color-text-secondary);
}

.detail-example-arrow[b-s0oaw9zcb9] {
    font-size: 16px;
    color: var(--teal-9);
}

.detail-empty-icon[b-s0oaw9zcb9] {
    opacity: 0.3;
    color: var(--color-accent);
}

/* Hero breadcrumbs — subtle opacity */
[b-s0oaw9zcb9] .detail-hero-breadcrumbs {
    opacity: 0.75;
}
/* =============================================================================
   Archetype 5 — Entity-Detail Header & Layout
   Shared with CalculatorForm.razor styles for visual consistency across tabs.
   ============================================================================= */

/* ── Transparent-background propagation ──────────────────────────────────── */
[b-s0oaw9zcb9] .calc-detail-header .mud-typography,
[b-s0oaw9zcb9] .calc-supporting-pane .mud-typography {
    background-color: transparent !important;
}

/* ── Entity header shell ─────────────────────────────────────────────────── */
.calc-detail-header[b-s0oaw9zcb9] {
    padding-bottom: var(--space-4);
    border-bottom: 1px solid var(--color-border-subtle);
}

/* ── Breadcrumb ──────────────────────────────────────────────────────────── */
[b-s0oaw9zcb9] .calc-detail-breadcrumb .mud-breadcrumb-item,
[b-s0oaw9zcb9] .calc-detail-breadcrumb .mud-breadcrumb-separator {
    font-size: var(--text-sm) !important;
    color: var(--color-text-secondary) !important;
}

/* ── Entity title ────────────────────────────────────────────────────────── */
.calc-entity-title[b-s0oaw9zcb9] {
    font-size: var(--text-xl);
    font-weight: 700;
    letter-spacing: var(--tracking-tight);
    color: var(--color-text-primary);
    line-height: 1.2;
}

/* ── Category sub-label ──────────────────────────────────────────────────── */
.calc-entity-category[b-s0oaw9zcb9] {
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
}

/* ── Scope chip ──────────────────────────────────────────────────────────── */
[b-s0oaw9zcb9] .calc-entity-scope-chip.mud-chip {
    font-size: var(--text-xs) !important;
    font-weight: 600 !important;
    height: 22px !important;
    padding: 0 8px !important;
}

/* ── Tab navigation bar ──────────────────────────────────────────────────── */
.calc-detail-tabs[b-s0oaw9zcb9] {
    display: flex;
    gap: 0;
    border-bottom: 2px solid var(--color-border-subtle);
    margin-top: var(--space-4);
}

/* ── Tab item (inactive) ─────────────────────────────────────────────────── */
.calc-tab[b-s0oaw9zcb9] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 16px;
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--color-text-secondary);
    text-decoration: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: color 120ms ease-out, border-color 120ms ease-out;
    white-space: nowrap;
}

.calc-tab:hover[b-s0oaw9zcb9] {
    color: var(--color-text-primary);
    border-bottom-color: var(--color-border-strong);
}

/* ── Tab item (active) ───────────────────────────────────────────────────── */
.calc-tab--active[b-s0oaw9zcb9] {
    color: var(--color-accent-text);
    border-bottom-color: var(--color-accent);
    font-weight: 600;
}

.calc-tab--active:hover[b-s0oaw9zcb9] {
    color: var(--color-accent-text);
    border-bottom-color: var(--color-accent);
}

/* ── Tab icon ────────────────────────────────────────────────────────────── */
.calc-tab-icon[b-s0oaw9zcb9] {
    font-size: 16px !important;
    opacity: 0.8;
}

/* ── Supporting pane wrapper (sticky on lg+) ─────────────────────────────── */
.calc-supporting-pane[b-s0oaw9zcb9] {
    display: flex;
    flex-direction: column;
    gap: 0;
}

@media (min-width: 1280px) {
    .calc-supporting-pane[b-s0oaw9zcb9] {
        position: sticky;
        top: 80px;
        max-height: calc(100vh - 100px);
        overflow-y: auto;
    }
}

/* ── Calculator details summary card ─────────────────────────────────────── */
.calc-detail-summary[b-s0oaw9zcb9] {
    background: var(--color-surface-3);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-lg);
}

.calc-detail-summary__row[b-s0oaw9zcb9] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0;
    border-bottom: 1px solid var(--color-border-subtle);
    font-size: var(--text-sm);
}

.calc-detail-summary__row:last-child[b-s0oaw9zcb9] {
    border-bottom: none;
}

.calc-detail-summary__label[b-s0oaw9zcb9] {
    color: var(--color-text-secondary);
    font-weight: 500;
}

.calc-detail-summary__value[b-s0oaw9zcb9] {
    color: var(--color-text-primary);
    font-weight: 500;
    text-align: right;
}

/* ── Quick actions card ──────────────────────────────────────────────────── */
.calc-quick-actions[b-s0oaw9zcb9] {
    background: var(--color-surface-3);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-lg);
}

/* ── Related calculators card ────────────────────────────────────────────── */
.calc-related-panel[b-s0oaw9zcb9] {
    background: var(--color-surface-3);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-lg);
}
/* _content/AlchemosPositive.Portal/Features/CalculatorBuilder/CalculatorForm.razor.rz.scp.css */
/* =============================================================================
   CalculatorForm.razor.css
   Slot: Features/CalculatorBuilder
   Design system: Slate + Teal (ref: alchemosPositiveStyleContract.prompt.md §1)
   ============================================================================= */

/* ── Transparent-background fix (§7.3.2) ──────────────────────────────────── */
[b-1b89mryy8q] .mud-typography {
    background-color: transparent !important;
}

/* ── Form entry panel ──────────────────────────────────────────────────────── */
.form-entry-panel[b-1b89mryy8q] {
    background: var(--color-surface-1);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-lg);
}

/* ── Results panel — theme-aware accent card (light + dark) ──────────── */
.form-results-panel[b-1b89mryy8q] {
    background: var(--color-accent-subtle) !important;
    border: 1px solid var(--color-accent) !important;
    border-left: 4px solid var(--color-accent) !important;
    border-radius: var(--radius-lg);
}

/* ── Clear any forced-white text override; use semantic colors instead ── */
[b-1b89mryy8q] .form-results-panel .mud-typography {
    background-color: transparent !important;
}

/* Heading with icon */
.form-results-heading[b-1b89mryy8q] {
    color: var(--color-accent-text);
    font-weight: 600;
}

/* Large tCO₂e number */
.form-results-total[b-1b89mryy8q] {
    font-weight: 700;
    letter-spacing: var(--tracking-tight);
    color: var(--color-accent);
}

/* "tonnes CO₂e" sub-label */
.form-results-unit[b-1b89mryy8q] {
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
}

/* Breakdown gas labels + factor caption */
.form-results-label[b-1b89mryy8q] {
    color: var(--color-text-primary);
}

.form-results-factor[b-1b89mryy8q] {
    color: var(--color-text-secondary);
    font-size: var(--text-xs);
}

/* Divider */
[b-1b89mryy8q] .form-results-panel .mud-divider,
[b-1b89mryy8q] .form-results-divider {
    border-color: var(--color-border-subtle) !important;
}

/* ── Breakdown chips — accent-tinted on themed surface ───────────────── */
[b-1b89mryy8q] .form-results-chip.mud-chip {
    background-color: var(--color-surface-1) !important;
    color: var(--color-accent-text) !important;
    border: 1px solid var(--color-accent) !important;
    font-weight: 500;
}

[b-1b89mryy8q] .form-results-chip.mud-chip:hover {
    background-color: var(--color-surface-2) !important;
}

/* ── Save/Action buttons panel ─────────────────────────────────────────── */
[b-1b89mryy8q] .form-actions-panel .mud-button-filled-primary {
    background-color: var(--color-brand-solid) !important;
    color: #ffffff !important;
}

[b-1b89mryy8q] .form-actions-panel .mud-button-outlined-primary {
    border-color: var(--color-accent) !important;
    color: var(--color-accent-text) !important;
}

/* ── Primary form submit button (Calculate Emissions) ───────────────────────── */
[b-1b89mryy8q] .form-submit-row .form-btn-primary.mud-button-filled-primary {
    background-color: var(--color-brand-solid) !important;
    color: #ffffff !important;
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(0 0 0 / 0.18);
    min-width: 200px;
}

[b-1b89mryy8q] .form-submit-row .form-btn-primary.mud-button-filled-primary:hover {
    background-color: var(--color-brand-solid-hover) !important;
    box-shadow: 0 4px 12px rgba(0 0 0 / 0.22);
}

/* ── Secondary reset button ─────────────────────────────────────────────────── */
[b-1b89mryy8q] .form-submit-row .form-btn-secondary {
    border-color: var(--color-border-subtle) !important;
    color: var(--color-text-secondary) !important;
    font-weight: 500;
}

[b-1b89mryy8q] .form-submit-row .form-btn-secondary:hover {
    background-color: var(--color-surface-2) !important;
    border-color: var(--color-border) !important;
    color: var(--color-text-primary) !important;
}

/* ── Expansion panel (Help & Data Sources) ─────────────────────────────────── */
[b-1b89mryy8q] .form-help-panel .mud-expand-panel {
    border-radius: var(--radius-lg) !important;
    border: 1px solid var(--color-border-subtle) !important;
    box-shadow: none !important;
}

[b-1b89mryy8q] .form-help-panel .mud-expand-panel-header {
    background: var(--color-surface-2);
    border-radius: var(--radius-lg);
}

/* ── LiveCalculationPreview wrapper ────────────────────────────────────────── */
.form-preview-wrapper[b-1b89mryy8q] {
    border-top: 1px solid var(--color-border-subtle);
    padding-top: var(--space-4);
    margin-top: var(--space-2);
}

/* ── Offset callout chip ───────────────────────────────────────────────────── */
[b-1b89mryy8q] .offset-callout.mud-alert {
    background-color: var(--teal-1) !important;
    border: 1px solid var(--teal-4) !important;
    border-radius: var(--radius-md) !important;
}

/* ── Compound numeric + unit field pair ──────────────────────────────────────
   Renders as: [  Number Input  ] [Unit ▼]  (70% / 30% flex)
   The unit selector hugs the right edge of the numeric input.
   ──────────────────────────────────────────────────────────────────────────── */
.compound-numeric-unit[b-1b89mryy8q] {
    gap: 8px;
    align-items: flex-end;  /* baseline-align so labels on both inputs line up */
}

/* Keep the unit dropdown label from being clipped on narrow widths */
.compound-numeric-unit__unit[b-1b89mryy8q]  .mud-input-label {
    font-size: 0.78rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Ensure the unit select arrow and text don't wrap */
.compound-numeric-unit__unit[b-1b89mryy8q] {
    flex-shrink: 0;
    min-width: 110px;
}

/* ── Button text contrast fix:
   Explicitly force white on MudTypography inside submit buttons so MudBlazor's
   global typography color does not override the button's inherited white text. ─ */
[b-1b89mryy8q] .form-submit-row .form-btn-primary .mud-typography,
[b-1b89mryy8q] .form-actions-panel .mud-button-filled-primary .mud-typography {
    color: #ffffff !important;
}

/* ── Responsive ────────────────────────────────────────────────────────────── */
@media (max-width: 599px) {
    .form-entry-panel[b-1b89mryy8q],
    .form-results-panel[b-1b89mryy8q] {
        border-radius: var(--radius-md);
    }
}

/* ── Form section headers ───────────────────────────────────────────────────── */
.form-section-header[b-1b89mryy8q] {
    padding-bottom: 4px;
    border-bottom: 1px solid var(--color-border-subtle);
    margin-bottom: 4px;
    margin-top: 8px;
}

.form-section-label[b-1b89mryy8q] {
    color: var(--color-text-secondary);
    font-size: var(--text-xs) !important;
    font-weight: 600 !important;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

/* ── Date range group wrapper ───────────────────────────────────────────────── */
.field-date-range-group[b-1b89mryy8q] {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.field-date-range-label[b-1b89mryy8q] {
    color: var(--color-text-secondary);
    font-size: var(--text-sm) !important;
    font-weight: 500;
    margin-bottom: 2px;
}

/* ── Quick-action disabled state ────────────────────────────────────────────── */
[b-1b89mryy8q] .calc-quick-actions .mud-button-disabled {
    opacity: 0.5 !important;
}

/* ── Step indicator ─────────────────────────────────────────────────────────── */
.calc-step-indicator[b-1b89mryy8q] {
    display: flex;
    align-items: center;
    gap: 0;
    width: 100%;
    max-width: 220px;
}

.calc-step[b-1b89mryy8q] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    flex: 0 0 auto;
}

.calc-step-dot[b-1b89mryy8q] {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--color-surface-3);
    border: 2px solid var(--color-border-default);
    color: var(--color-text-secondary);
    font-size: 12px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.calc-step--active .calc-step-dot[b-1b89mryy8q] {
    background: var(--color-accent) !important;
    border-color: var(--color-accent) !important;
    color: #fff !important;
}

.calc-step-label[b-1b89mryy8q] {
    font-size: 10px !important;
    color: var(--color-text-secondary);
    white-space: nowrap;
}

.calc-step--active .calc-step-label[b-1b89mryy8q] {
    color: var(--color-accent-text) !important;
    font-weight: 600 !important;
}

.calc-step-connector[b-1b89mryy8q] {
    flex: 1 1 0%;
    height: 2px;
    background: var(--color-border-subtle);
    margin-bottom: 18px; /* align with dot center */
    min-width: 20px;
}

/* =============================================================================
   Archetype 5 — Entity-Detail Header & Layout
   Applies to both /calculators/{id} (Calculator tab active) and
   /calculators/{id}/about (About tab active) for visual consistency.
   ============================================================================= */

/* ── Transparent-background propagation for nested MudTypography ─────────── */
[b-1b89mryy8q] .calc-detail-header .mud-typography {
    background-color: transparent !important;
}

/* ── Entity header shell ─────────────────────────────────────────────────── */
.calc-detail-header[b-1b89mryy8q] {
    padding-bottom: var(--space-4);
    border-bottom: 1px solid var(--color-border-subtle);
}

/* ── Breadcrumb ──────────────────────────────────────────────────────────── */
[b-1b89mryy8q] .calc-detail-breadcrumb .mud-breadcrumb-item,
[b-1b89mryy8q] .calc-detail-breadcrumb .mud-breadcrumb-separator {
    font-size: var(--text-sm) !important;
    color: var(--color-text-secondary) !important;
}

/* ── Entity title ────────────────────────────────────────────────────────── */
.calc-entity-title[b-1b89mryy8q] {
    font-size: var(--text-xl);
    font-weight: 700;
    letter-spacing: var(--tracking-tight);
    color: var(--color-text-primary);
    line-height: 1.2;
}

/* ── Category sub-label ──────────────────────────────────────────────────── */
.calc-entity-category[b-1b89mryy8q] {
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
}

/* ── Scope chip ──────────────────────────────────────────────────────────── */
[b-1b89mryy8q] .calc-entity-scope-chip.mud-chip {
    font-size: var(--text-xs) !important;
    font-weight: 600 !important;
    height: 22px !important;
    padding: 0 8px !important;
}

/* ── Avatar ──────────────────────────────────────────────────────────────── */
.calc-entity-avatar[b-1b89mryy8q] {
    flex-shrink: 0;
}

/* ── Tab navigation bar ──────────────────────────────────────────────────── */
.calc-detail-tabs[b-1b89mryy8q] {
    display: flex;
    gap: 0;
    border-bottom: 2px solid var(--color-border-subtle);
    margin-top: var(--space-4);
}

/* ── Tab item (inactive) ─────────────────────────────────────────────────── */
.calc-tab[b-1b89mryy8q] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 16px;
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--color-text-secondary);
    text-decoration: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;  /* overlap the parent border-bottom */
    transition: color 120ms ease-out, border-color 120ms ease-out;
    white-space: nowrap;
}

.calc-tab:hover[b-1b89mryy8q] {
    color: var(--color-text-primary);
    border-bottom-color: var(--color-border-strong);
}

/* ── Tab item (active) ───────────────────────────────────────────────────── */
.calc-tab--active[b-1b89mryy8q] {
    color: var(--color-accent-text);
    border-bottom-color: var(--color-accent);
    font-weight: 600;
}

.calc-tab--active:hover[b-1b89mryy8q] {
    color: var(--color-accent-text);
    border-bottom-color: var(--color-accent);
}

/* ── Tab icon ────────────────────────────────────────────────────────────── */
.calc-tab-icon[b-1b89mryy8q] {
    font-size: 16px !important;
    opacity: 0.8;
}

/* ── Supporting pane wrapper (sticky on lg+) ─────────────────────────────── */
.calc-supporting-pane[b-1b89mryy8q] {
    display: flex;
    flex-direction: column;
    gap: 0;  /* gaps are per child via mb-4 */
}

@media (min-width: 1280px) {
    .calc-supporting-pane[b-1b89mryy8q] {
        position: sticky;
        top: 80px;
        max-height: calc(100vh - 100px);
        overflow-y: auto;
    }
}

/* ── Results placeholder card ────────────────────────────────────────────── */
.calc-results-placeholder[b-1b89mryy8q] {
    background: var(--color-surface-3);
    border: 1px dashed var(--color-border-default);
    border-radius: var(--radius-lg);
    min-height: 180px;
}

.calc-results-placeholder-icon[b-1b89mryy8q] {
    font-size: 40px !important;
    color: var(--color-border-default);
}

/* ── "About / Methodology" teaser card ───────────────────────────────────── */
.calc-about-teaser[b-1b89mryy8q] {
    background: var(--color-surface-3);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-lg);
}

.calc-about-teaser-icon[b-1b89mryy8q] {
    font-size: 18px !important;
    color: var(--color-accent-text);
    flex-shrink: 0;
}

/* ── Muted supporting pane text ──────────────────────────────────────────── */
.calc-supporting-muted[b-1b89mryy8q] {
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
}
/* _content/AlchemosPositive.Portal/Features/CalculatorBuilder/CalculatorFormPanel.razor.rz.scp.css */
.form-panel[b-c2koi651g5] {
    border-radius: var(--mud-default-borderradius);
    border: 1px solid var(--mud-palette-lines-default);
    background: var(--mud-palette-surface);
    margin-bottom: 16px;
    overflow: hidden;
    transition: box-shadow 200ms ease;
}

.form-panel--expanded[b-c2koi651g5] {
    box-shadow: var(--mud-elevation-2);
}

.form-panel__header[b-c2koi651g5] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    cursor: pointer;
    user-select: none;
    transition: background-color 150ms ease;
}

.form-panel__header:hover[b-c2koi651g5] {
    background-color: var(--mud-palette-background-hover);
}

.form-panel__header-left[b-c2koi651g5] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    min-width: 0;
}

.form-panel__avatar[b-c2koi651g5] {
    flex-shrink: 0;
}

.form-panel__name[b-c2koi651g5] {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.form-panel__category[b-c2koi651g5] {
    color: var(--mud-palette-text-secondary);
}

.form-panel__toggle[b-c2koi651g5] {
    flex-shrink: 0;
}

.form-panel__body[b-c2koi651g5] {
    padding: 16px 16px 24px;
    border-top: 1px solid var(--mud-palette-lines-default);
}

.compound-numeric-unit[b-c2koi651g5] {
    display: flex;
    gap: 8px;
    align-items: flex-end;
}
/* _content/AlchemosPositive.Portal/Features/CalculatorBuilder/CalculatorGroupSession.razor.rz.scp.css */
.session-cart-card[b-86cp7z5abj] {
    position: sticky;
    bottom: 24px;
    z-index: 100;
    margin-top: 24px;
    opacity: 0;
    transform: translateY(20px);
    pointer-events: none;
    transition: opacity 300ms ease, transform 300ms ease;
}

.session-cart-card--visible[b-86cp7z5abj] {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.session-cart-paper[b-86cp7z5abj] {
    border-left: 4px solid var(--mud-palette-primary);
}
/* _content/AlchemosPositive.Portal/Features/CalculatorBuilder/CalculatorList.razor.rz.scp.css */
/* =============================================================================
   CalculatorList — Scoped Component Styles
   Archetype: §10.3 List Page (card-grid variant)
   Aesthetic: Misty Spring — soft, naturish, morning-mist palette
   Spring tokens (--spring-*) are defined globally in Dashboard.razor.css :root.
   Typo prop drives font-shape; scoped CSS adds color + spacing only (§7.3.2).
   ============================================================================= */

/* ── Transparent-background fix (required per §7.3.2) ─────────────────────────
   Defeats global app.css background-color: var(--color-bg-app) on .mud-typography
   inside gradient hero and tinted surfaces — prevents opaque white rectangles.
   !important justified: equal specificity with global .mud-typography rule. */
[b-4jfdi2klel] .mud-typography {
  background-color: transparent !important;
}

/* ── Page root ─────────────────────────────────────────────────────────────── */
.calc-root[b-4jfdi2klel] {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  padding-bottom: var(--space-8);
  animation: calcFadeIn-b-4jfdi2klel var(--transition-reveal) ease-out both;
  /* Misty spring atmosphere — soft teal mist at top, lavender warmth at bottom */
  background:
    radial-gradient(ellipse 130% 55% at 60% 0%, rgba(204, 251, 241, 0.18) 0%, transparent 55%),
    radial-gradient(ellipse 90% 40% at 5% 80%, rgba(240, 244, 255, 0.12) 0%, transparent 55%);
}

@keyframes calcFadeIn-b-4jfdi2klel {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Hero Banner ───────────────────────────────────────────────────────────── */
.calc-hero[b-4jfdi2klel] {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-xl);
  padding: var(--space-8) var(--space-content);
  background: linear-gradient(
    130deg,
    #ddf3ee 0%,        /* deep teal mist — dew-covered leaves */
    #e8f5e9 22%,       /* pale moss — fresh morning grass */
    #eff6fb 48%,       /* sky wash — misty morning air */
    #f3eff9 72%,       /* soft lavender — blossom haze */
    #fdf5ee 100%       /* warm cream — sunrise warmth */
  );
  border: 1px solid rgba(180, 210, 200, 0.55);
  box-shadow: 0 2px 20px rgba(15, 118, 110, 0.06), 0 1px 4px rgba(15, 23, 42, 0.04);
  min-height: 120px;
  display: flex;
  align-items: center;
}

.calc-hero__body[b-4jfdi2klel] {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-1);
  flex: 1;
}

/* Typo.overline drives shape — color + spacing only */
.calc-hero__eyebrow[b-4jfdi2klel] {
  color: var(--color-accent-text);
  margin: 0 0 var(--space-1) 0;
}

/* Typo.h5 drives shape — color + spacing only */
.calc-hero__title[b-4jfdi2klel] {
  color: var(--color-text-primary);
  margin: 0 0 var(--space-1) 0;
}

/* Typo.subtitle1 drives shape — color + spacing only */
.calc-hero__sub[b-4jfdi2klel] {
  color: var(--color-text-secondary);
  margin: 0;
  max-width: 560px;
}

/* Breadcrumbs sit above the title stack */
[b-4jfdi2klel] .calc-hero .mud-breadcrumbs {
  padding: 0 !important;
  margin-bottom: var(--space-2);
  opacity: 0.75;
}

/* ── Filter Bar ────────────────────────────────────────────────────────────── */
.calc-filter-bar[b-4jfdi2klel] {
  background: var(--color-surface-2);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
}

/* ── Recent Calculations Panel ─────────────────────────────────────────────── */
.calc-recent-panel[b-4jfdi2klel] {
  background: var(--color-surface-2);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-4) var(--space-3);
}

.calc-recent-card[b-4jfdi2klel] {
  height: 100%;
  box-sizing: border-box;
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  background: var(--color-bg-subtle);
  padding: var(--space-3) var(--space-4);
  cursor: pointer;
  transition: transform var(--transition-interactive), background var(--transition-interactive);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.calc-recent-card:hover[b-4jfdi2klel] {
  transform: translateY(-1px);
  background: var(--color-bg-hover);
}

/* ── Calculator Cards CSS Grid (§7.3.1) ─────────────────────────────────── */
/* CSS Grid auto-equalizes row heights (align-items:stretch default).
   Direct grid children fill their grid area — no height:100% tricks needed.
   Breakpoints mirror the old MudItem xs=12 / md=6 / lg=4 column widths:    xs  (<600px)  : 1 col  (xs="12")
     sm  (600–959px): 2 col  (sm="6")
     lg (≥960px)    : 3 col  (lg="4") */
.calc-cards-grid[b-4jfdi2klel] {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}

@media (min-width: 600px) {
  .calc-cards-grid[b-4jfdi2klel] {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 960px) {
  .calc-cards-grid[b-4jfdi2klel] {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ── Calculator Cards ──────────────────────────────────────────────────────── */
[b-4jfdi2klel] .calc-card {
  height: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-lg) !important;
  /* Base border — scope variants override border-top-color + border-top-width */
  border: 1px solid var(--color-border-subtle) !important;
  border-top-width: 2px !important;
  background: var(--color-surface-2) !important;
  /* Soft floating depth */
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 8px rgba(15, 23, 42, 0.04) !important;
  overflow: hidden;
  transition: transform var(--transition-interactive), box-shadow var(--transition-interactive) !important;
  cursor: pointer;
}

[b-4jfdi2klel] .calc-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 28px rgba(15, 23, 42, 0.11), 0 3px 8px rgba(15, 23, 42, 0.07) !important;
}

/* Scope-coloured top border + airy gradient wash (fades to transparent quickly) */
[b-4jfdi2klel] .calc-card--scope1 {
  border-top-color: rgba(244, 114, 182, 0.55) !important;
  background: linear-gradient(180deg, rgba(253, 232, 240, 0.55) 0%, transparent 28%), var(--color-surface-2) !important;
}
[b-4jfdi2klel] .calc-card--scope2 {
  border-top-color: rgba(251, 191, 36, 0.55) !important;
  background: linear-gradient(180deg, rgba(254, 249, 229, 0.65) 0%, transparent 28%), var(--color-surface-2) !important;
}
[b-4jfdi2klel] .calc-card--scope3 {
  border-top-color: rgba(56, 189, 248, 0.55) !important;
  background: linear-gradient(180deg, rgba(224, 242, 254, 0.55) 0%, transparent 28%), var(--color-surface-2) !important;
}
[b-4jfdi2klel] .calc-card--crosscutting {
  border-top-color: rgba(16, 185, 129, 0.5) !important;
  background: linear-gradient(180deg, rgba(209, 250, 229, 0.5) 0%, transparent 28%), var(--color-surface-2) !important;
}
[b-4jfdi2klel] .calc-card--default {
  border-top-color: var(--color-border-default) !important;
}

/* Standard padding — no strip offset needed */
[b-4jfdi2klel] .calc-card .mud-card-header {
  padding-left: var(--space-4);
}

[b-4jfdi2klel] .calc-card .mud-card-content {
  padding-left: var(--space-4);
  flex: 1;
}

[b-4jfdi2klel] .calc-card .mud-card-actions {
  padding-left: var(--space-4);
  padding-bottom: var(--space-3);
}

/* Scope avatar (native div — not MudAvatar Color prop) */
.calc-scope-avatar[b-4jfdi2klel] {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-sm);
  font-weight: 700;
  flex-shrink: 0;
  line-height: 1;
}

.calc-scope-avatar--scope1[b-4jfdi2klel] { background: var(--spring-rose-bg); color: var(--spring-rose-solid); border: 1px solid var(--spring-rose-mid); }
.calc-scope-avatar--scope2[b-4jfdi2klel] { background: var(--spring-amber-bg); color: var(--spring-amber-solid); border: 1px solid var(--spring-amber-mid); }
.calc-scope-avatar--scope3[b-4jfdi2klel] { background: var(--spring-sky-bg); color: var(--spring-sky-solid); border: 1px solid var(--spring-sky-mid); }
.calc-scope-avatar--crosscutting[b-4jfdi2klel] { background: var(--color-accent-bg, #e6f4f0); color: var(--color-accent); border: 1px solid var(--color-accent); }
.calc-scope-avatar--default[b-4jfdi2klel] { background: var(--color-bg-component); color: var(--color-text-secondary); border: 1px solid var(--color-border-subtle); }

/* Scope inline chip badge */
.calc-scope-chip[b-4jfdi2klel] {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: var(--tracking-wide);
  margin-top: 4px;
}

.calc-scope-chip--scope1[b-4jfdi2klel] { background: var(--spring-rose-bg); color: var(--spring-rose-solid); border: 1px solid var(--spring-rose-mid); }
.calc-scope-chip--scope2[b-4jfdi2klel] { background: var(--spring-amber-bg); color: var(--spring-amber-solid); border: 1px solid var(--spring-amber-mid); }
.calc-scope-chip--scope3[b-4jfdi2klel] { background: var(--spring-sky-bg); color: var(--spring-sky-solid); border: 1px solid var(--spring-sky-mid); }
.calc-scope-chip--crosscutting[b-4jfdi2klel] { background: var(--color-accent-bg, #e6f4f0); color: var(--color-accent); border: 1px solid var(--color-accent); }
.calc-scope-chip--default[b-4jfdi2klel] { background: var(--color-bg-component); color: var(--color-text-secondary); border: 1px solid var(--color-border-subtle); }

/* Card description — typeset by Typo.body2; min-height for visual alignment */
.calc-card__desc[b-4jfdi2klel] {
  min-height: 44px;
  margin-bottom: var(--space-3);
}

/* "Add to Group" icon button in the tags row */
[b-4jfdi2klel] .calc-card__atg-btn {
  width: 28px;
  height: 28px;
  padding: 0;
  margin-left: auto;
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-sm);
  color: var(--color-text-secondary);
  background: transparent;
  transition: border-color 150ms ease, color 150ms ease, background 150ms ease;
}

[b-4jfdi2klel] .calc-card__atg-btn:hover {
  border-color: var(--mud-palette-secondary);
  color: var(--mud-palette-secondary);
  background: var(--mud-palette-secondary-hover, rgba(0,0,0,.04));
}

/* ── Empty State ───────────────────────────────────────────────────────────── */
.calc-empty-state[b-4jfdi2klel] {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-12) var(--space-8);
  background: var(--color-surface-2);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
  text-align: center;
}

.calc-empty-icon[b-4jfdi2klel] {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--spring-moss-bg);
  border: 1px solid var(--spring-moss-mid);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-4);
}

[b-4jfdi2klel] .calc-empty-icon .mud-icon-root {
  color: var(--spring-moss-solid) !important;
}

/* ── GHG Education Section ─────────────────────────────────────────────────── */
[b-4jfdi2klel] .ghg-section .mud-expand-panel {
  border-radius: var(--radius-lg) !important;
  border: 1px solid var(--color-border-subtle) !important;
  box-shadow: none !important;
  overflow: hidden;
}

[b-4jfdi2klel] .ghg-section .mud-expand-panel-header {
  background: var(--color-surface-2);
}

.ghg-scope-card[b-4jfdi2klel] {
  border-radius: var(--radius-md);
  padding: var(--space-4);
  height: 100%;
  box-sizing: border-box;
}

.ghg-scope-card--scope1[b-4jfdi2klel] { background: var(--spring-rose-bg); border: 1px solid var(--spring-rose-mid); }
.ghg-scope-card--scope2[b-4jfdi2klel] { background: var(--spring-amber-bg); border: 1px solid var(--spring-amber-mid); }
.ghg-scope-card--scope3[b-4jfdi2klel] { background: var(--spring-sky-bg); border: 1px solid var(--spring-sky-mid); }

/* Scope number circle inside GHG cards */
.ghg-scope-num[b-4jfdi2klel] {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-xs);
  font-weight: 700;
  flex-shrink: 0;
  line-height: 1;
  margin-right: var(--space-2);
}

.ghg-scope-num--scope1[b-4jfdi2klel] { background: var(--spring-rose-solid); color: #fff; }
.ghg-scope-num--scope2[b-4jfdi2klel] { background: var(--spring-amber-solid); color: #fff; }
.ghg-scope-num--scope3[b-4jfdi2klel] { background: var(--spring-sky-solid); color: #fff; }

/* ── Responsive ────────────────────────────────────────────────────────────── */
@media (max-width: 599px) {
  .calc-hero[b-4jfdi2klel] {
    padding: var(--space-6) var(--space-4);
    min-height: auto;
  }
  .calc-hero__sub[b-4jfdi2klel] { max-width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .calc-root[b-4jfdi2klel] { animation: none; }
  [b-4jfdi2klel] .calc-card,
  .calc-recent-card[b-4jfdi2klel] { transition: none; }
}

/* ── Selection Banner ──────────────────────────────────────────────────────── */
/* Floating sticky bar at the top of the viewport when calculators are selected.
   top: 48px — aligns to the bottom edge of MudAppBar Dense (48px fixed height).
   z-index: 1100 — below MudAppBar (~1300) but above all page content. */
.calc-selection-banner[b-4jfdi2klel] {
    position: sticky;
    top: 48px;
    z-index: 1100;
    background: var(--color-surface-1);
    border-bottom: 2px solid color-mix(in srgb, var(--color-accent) 40%, transparent);
    box-shadow: 0 2px 12px color-mix(in srgb, var(--color-accent) 15%, rgba(0,0,0,0.08));
    animation: calcBannerSlideIn-b-4jfdi2klel 200ms ease-out both;
}

.calc-selection-banner__inner[b-4jfdi2klel] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-4);
    max-width: 1280px;
    margin: 0 auto;
    flex-wrap: wrap;
}

@keyframes calcBannerSlideIn-b-4jfdi2klel {
    from { transform: translateY(-100%); opacity: 0; }
    to   { transform: translateY(0);     opacity: 1; }
}

/* ── Selected Card Highlight ───────────────────────────────────────────────── */
[b-4jfdi2klel] .calc-card--selected {
    outline: 2px solid var(--color-accent) !important;
    outline-offset: 0;
}
/* _content/AlchemosPositive.Portal/Features/CalculatorBuilder/ComparisonView.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════
   ComparisonView.razor.css
   Archetype : Comparison / Analytics Tool
   Design    : Slate + Teal — AlchemOS Positive Style Contract
   ═══════════════════════════════════════════════════════════ */

/* ── Prevent MudBlazor from injecting white background on text ── */
[b-ghkyxv17j6] .mud-typography {
    background-color: transparent !important;
}

/* ──────────────────────────────────────────────────────────
   HERO
   ────────────────────────────────────────────────────────── */
.cmp-hero-breadcrumbs[b-ghkyxv17j6] {
    opacity: 0.75;
}

.cmp-hero-actions[b-ghkyxv17j6] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

/* ──────────────────────────────────────────────────────────
   SHARED CARD SHELL
   ────────────────────────────────────────────────────────── */
[b-ghkyxv17j6] .cmp-card {
    background-color: var(--color-surface-1, #ffffff);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-lg, 12px);
    padding: 28px 32px;
    height: 100%;
    box-sizing: border-box;
}

/* ── Card header row (icon + title + optional badge/hint) ── */
.cmp-card-header[b-ghkyxv17j6] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--color-border-subtle);
    margin-bottom: 16px;
}

.cmp-card-header__icon[b-ghkyxv17j6] {
    color: var(--color-accent, #0F766E);
    font-size: 20px;
    flex-shrink: 0;
}

.cmp-card-header__title[b-ghkyxv17j6] {
    font-weight: 600 !important;
    color: var(--color-text-primary) !important;
    flex: 1;
}

.cmp-card-header__unit[b-ghkyxv17j6],
.cmp-card-header__hint[b-ghkyxv17j6] {
    font-size: var(--text-xs, 12px);
    color: var(--color-text-secondary);
    font-weight: 500;
    align-self: flex-end;
}

/* ──────────────────────────────────────────────────────────
   SAVE DIALOG PANEL
   ────────────────────────────────────────────────────────── */
[b-ghkyxv17j6] .cmp-save-dialog {
    background-color: var(--color-surface-1, #ffffff);
    border: 1px solid var(--teal-7, #0D9488) !important;
    border-radius: var(--radius-lg, 12px);
    padding: 28px 32px;
}

/* ──────────────────────────────────────────────────────────
   SAVED COMPARISONS PANEL
   ────────────────────────────────────────────────────────── */
[b-ghkyxv17j6] .cmp-saved-panel {
    background-color: var(--color-surface-1, #ffffff);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-lg, 12px);
    padding: 28px 32px;
}

/* ── Panel header shared by save-dialog + saved-panel ── */
.cmp-panel-header[b-ghkyxv17j6] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap;
}

.cmp-panel-header__icon[b-ghkyxv17j6] {
    color: var(--color-accent, #0F766E);
    font-size: 20px;
    flex-shrink: 0;
}

.cmp-panel-header__title[b-ghkyxv17j6] {
    font-weight: 600 !important;
    color: var(--color-text-primary) !important;
    flex: 1;
}

/* ──────────────────────────────────────────────────────────
   TYPOGRAPHY HELPERS
   ────────────────────────────────────────────────────────── */
.cmp-empty-text[b-ghkyxv17j6] {
    color: var(--color-text-secondary) !important;
}

.cmp-table-name[b-ghkyxv17j6] {
    font-weight: 500 !important;
}

/* ──────────────────────────────────────────────────────────
   RESPONSIVE TABLE WRAPPER
   ────────────────────────────────────────────────────────── */
.cmp-table-wrapper[b-ghkyxv17j6] {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* ──────────────────────────────────────────────────────────
   SELECTOR SLOTS
   ────────────────────────────────────────────────────────── */

/* MudGrid equal-height for all slot cards */
.cmp-slot-grid[b-ghkyxv17j6] {
    align-items: stretch;
    padding: 0 4px 4px;
}

.cmp-slot[b-ghkyxv17j6] {
    border: 1.5px dashed var(--color-border-default, #B3BEC9);
    border-radius: var(--radius-lg, 12px);
    padding: 1rem;
    min-height: 120px;
    height: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    background-color: var(--color-surface-2, #FAFBFC);
    transition: border-color var(--transition-interactive, 120ms ease-out),
                background-color var(--transition-interactive, 120ms ease-out);
}

.cmp-slot--filled[b-ghkyxv17j6] {
    border-style: solid;
    border-color: var(--teal-6, #14B8A6);
    background-color: var(--teal-1, #F0FDFA);
}

.cmp-slot-label[b-ghkyxv17j6] {
    display: block;
    font-size: var(--text-xs, 12px);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide, 0.04em);
    color: var(--color-text-secondary);
    margin-bottom: 4px;
}

.cmp-slot-selected[b-ghkyxv17j6] {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.cmp-slot-selected__header[b-ghkyxv17j6] {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.cmp-slot-calc-name[b-ghkyxv17j6] {
    color: var(--color-text-primary) !important;
}

.cmp-slot-calc-date[b-ghkyxv17j6] {
    color: var(--color-text-secondary) !important;
}

/* Total value pinned to bottom of the slot card */
.cmp-slot-total[b-ghkyxv17j6] {
    display: flex;
    align-items: baseline;
    gap: 4px;
    margin-top: auto;
    padding-top: 8px;
}

.cmp-slot-total__value[b-ghkyxv17j6] {
    font-size: var(--text-lg, 1.25rem);
    font-weight: 700;
    color: var(--color-accent, #0F766E);
    line-height: 1;
}

.cmp-slot-total__unit[b-ghkyxv17j6] {
    font-size: var(--text-xs, 12px);
    color: var(--color-text-secondary);
    font-weight: 500;
}

/* ──────────────────────────────────────────────────────────
   EMISSION CARDS  (equal height per row)
   ────────────────────────────────────────────────────────── */
.cmp-emission-row[b-ghkyxv17j6] {
    align-items: stretch;
}

.cmp-emission-card[b-ghkyxv17j6] {
    background-color: var(--color-surface-2, #FAFBFC);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-lg, 12px);
    padding: 1.25rem;
    position: relative;
    height: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}

.cmp-emission-card--1[b-ghkyxv17j6] { border-top: 3px solid var(--teal-7, #0D9488); }
.cmp-emission-card--2[b-ghkyxv17j6] { border-top: 3px solid var(--violet-7, #7C3AED); }
.cmp-emission-card--3[b-ghkyxv17j6] { border-top: 3px solid var(--warning-500, #F59E0B); }

.cmp-emission-label[b-ghkyxv17j6] {
    display: block;
    font-size: var(--text-xs, 12px);
    font-weight: 600;
    letter-spacing: var(--tracking-wide, 0.04em);
    text-transform: uppercase;
    color: var(--color-text-secondary);
}

.cmp-emission-total[b-ghkyxv17j6] {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--color-accent, #0F766E);
    margin: 4px 0;
}

.cmp-emission-name[b-ghkyxv17j6] {
    color: var(--color-text-primary) !important;
}

/* ──────────────────────────────────────────────────────────
   DIFF BADGE
   ────────────────────────────────────────────────────────── */
.cmp-diff-badge[b-ghkyxv17j6] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: var(--text-xs, 12px);
    font-weight: 600;
    padding: 2px 8px;
    border-radius: var(--radius-sm, 6px);
    margin-top: 8px;
    align-self: flex-start;
}

.cmp-diff-icon[b-ghkyxv17j6] {
    font-size: 14px !important;
}

.cmp-diff-badge--up[b-ghkyxv17j6] {
    background-color: var(--error-100, #FEE2E2);
    color: var(--error-700, #B91C1C);
}

.cmp-diff-badge--dn[b-ghkyxv17j6] {
    background-color: var(--success-100, #DCFCE7);
    color: var(--success-700, #15803D);
}

/* ──────────────────────────────────────────────────────────
   META LABEL (table row identifiers)
   ────────────────────────────────────────────────────────── */
.cmp-meta-label[b-ghkyxv17j6] {
    font-size: var(--text-xs, 12px);
    font-weight: 600;
    color: var(--color-text-secondary);
    letter-spacing: var(--tracking-wide, 0.04em);
    text-transform: uppercase;
}

/* ──────────────────────────────────────────────────────────
   BENCHMARK CARDS  (equal height per row)
   ────────────────────────────────────────────────────────── */
.cmp-benchmark-row[b-ghkyxv17j6] {
    align-items: stretch;
}

.cmp-benchmark-card[b-ghkyxv17j6] {
    background-color: var(--color-surface-2, #FAFBFC);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-lg, 12px);
    padding: 1rem 1.25rem;
    height: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}

.cmp-benchmark-stats[b-ghkyxv17j6] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 12px 24px;
}

.cmp-benchmark-stat[b-ghkyxv17j6] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 80px;
}

.cmp-benchmark-divider[b-ghkyxv17j6] {
    width: 1px;
    background-color: var(--color-border-subtle);
    align-self: stretch;
    flex-shrink: 0;
}

.cmp-bench-stat-label[b-ghkyxv17j6] {
    color: var(--color-text-secondary) !important;
}

.cmp-bench-stat-value[b-ghkyxv17j6] {
    font-size: var(--text-base, 1rem);
    font-weight: 600;
    line-height: 1.2;
}

.cmp-bench-stat-value--yours[b-ghkyxv17j6] {
    color: var(--color-accent, #0F766E);
}

.cmp-bench-stat-value--sector[b-ghkyxv17j6] {
    color: var(--color-text-secondary);
}

/* ──────────────────────────────────────────────────────────
   LOADING & EMPTY STATES
   ────────────────────────────────────────────────────────── */
.cmp-loading-state[b-ghkyxv17j6] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 64px 0;
}

.cmp-empty-icon[b-ghkyxv17j6] {
    font-size: 48px !important;
    opacity: 0.3;
    color: var(--color-accent, #0F766E) !important;
}

/* ──────────────────────────────────────────────────────────
   RESPONSIVE — MOBILE  (< 600 px)
   ────────────────────────────────────────────────────────── */
@media (max-width: 599px) {

    .table-col-hide-xs[b-ghkyxv17j6] {
        display: none !important;
    }

    /* Stack hero actions vertically; use ::deep to reach through MudTooltip wrappers */
    .cmp-hero-actions[b-ghkyxv17j6] {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        gap: 8px;
    }

    /* MudTooltip renders a wrapper div — force it to stretch full width */
    [b-ghkyxv17j6] .cmp-hero-actions .mud-tooltip-root {
        display: block;
        width: 100%;
    }

    [b-ghkyxv17j6] .cmp-hero-actions .mud-tooltip-activator {
        display: block;
        width: 100%;
    }

    /* Every button inside hero actions: full width, centred label */
    [b-ghkyxv17j6] .cmp-hero-actions .mud-button-root {
        width: 100% !important;
        justify-content: center !important;
    }

    .cmp-emission-total[b-ghkyxv17j6] {
        font-size: var(--text-xl, 1.563rem);
    }

    .cmp-benchmark-stats[b-ghkyxv17j6] {
        flex-direction: column;
        gap: 12px;
    }

    .cmp-benchmark-divider[b-ghkyxv17j6] {
        display: none;
    }
}

/* ──────────────────────────────────────────────────────────
   RESPONSIVE — TABLET  (< 960 px)
   Auto-height so stacked cards don't stretch awkwardly
   ────────────────────────────────────────────────────────── */
@media (max-width: 959px) {

    .cmp-emission-row[b-ghkyxv17j6]  { align-items: start; }
    .cmp-emission-card[b-ghkyxv17j6] { height: auto; }

    .cmp-benchmark-row[b-ghkyxv17j6]  { align-items: start; }
    .cmp-benchmark-card[b-ghkyxv17j6] { height: auto; }

    .cmp-slot-grid[b-ghkyxv17j6] { align-items: start; }
    .cmp-slot[b-ghkyxv17j6]      { height: auto; }
}

/* ──────────────────────────────────────────────────────────
   REDUCED MOTION
   ────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .cmp-slot[b-ghkyxv17j6] {
        transition: none;
    }
}
/* _content/AlchemosPositive.Portal/Features/CalculatorBuilder/Components/AddToGroupDialog.razor.rz.scp.css */
/* =============================================================================
   AddToGroupDialog — Scoped component styles
   Style Contract: semantic tokens only; no hardcoded hex.
============================================================================= */

/* Defeat global .mud-typography background on tinted dialog surfaces */
[b-9ixv66wv3u] .mud-typography {
    background-color: transparent !important;
}

/* Force MudRadioGroup to stack children vertically (MudBlazor renders it with flex-row by default) */
[b-9ixv66wv3u] .mud-radio-group {
    display: flex;
    flex-direction: column;
}

/* Dialog title icon square (teal accent) */
.atg-icon-sq[b-9ixv66wv3u] {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-md);
    background: var(--color-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* Subtitle: "Adding: <name>" */
.atg-subtitle[b-9ixv66wv3u] {
    color: var(--color-text-secondary);
    font-size: 0.8125rem;
    margin-top: 2px;
}

/* Group list scroll container */
.atg-group-list[b-9ixv66wv3u] {
    max-height: 280px;
    overflow-y: auto;
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-md);
}

/* Individual group row */
.atg-group-item[b-9ixv66wv3u] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    cursor: pointer;
    transition: background var(--transition-interactive);
    border-bottom: 1px solid var(--color-border-subtle);
}

.atg-group-item:last-child[b-9ixv66wv3u] {
    border-bottom: none;
}

.atg-group-item:hover[b-9ixv66wv3u] {
    background: var(--color-bg-hover);
}

.atg-group-item--selected[b-9ixv66wv3u] {
    background: var(--color-accent-subtle);
}

/* Group item text block */
.atg-group-text[b-9ixv66wv3u] {
    flex: 1;
    min-width: 0;
}

.atg-group-name[b-9ixv66wv3u] {
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--color-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.atg-group-count[b-9ixv66wv3u] {
    font-size: 0.75rem;
    color: var(--color-text-secondary);
}

/* Create-new divider row — full-width separator between existing groups and create-new option */
.atg-divider-row[b-9ixv66wv3u] {
    display: flex;
    align-items: center;
    padding: var(--space-1) var(--space-3);
    background: var(--color-bg-subtle);
    border-top: 1px solid var(--color-border-subtle);
    border-bottom: 1px solid var(--color-border-subtle);
    width: 100%;
    box-sizing: border-box;
}

/* Name field that appears when create-new is selected */
.atg-new-name-field[b-9ixv66wv3u] {
    padding: var(--space-2) 0 var(--space-2);
}
/* _content/AlchemosPositive.Portal/Features/CalculatorBuilder/Components/CreateGroupDialog.razor.rz.scp.css */
.create-group-calc-list[b-dme5yr7fde] {
    max-height: 320px;
    overflow-y: auto;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--mud-default-borderradius);
}

.create-group-calc-item[b-dme5yr7fde] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    cursor: pointer;
    transition: background-color 150ms ease;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.create-group-calc-item:last-child[b-dme5yr7fde] {
    border-bottom: none;
}

.create-group-calc-item:hover[b-dme5yr7fde] {
    background-color: var(--mud-palette-background-hover);
}

.create-group-calc-item--selected[b-dme5yr7fde] {
    background-color: rgba(var(--mud-palette-primary-rgb), 0.08);
}

.create-group-calc-info[b-dme5yr7fde] {
    flex: 1;
    min-width: 0;
}
/* _content/AlchemosPositive.Portal/Features/CalculatorBuilder/Components/EmissionCartDrawer.razor.rz.scp.css */
.emission-cart-drawer__header[b-xikr3emklh] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.emission-cart-drawer__empty[b-xikr3emklh] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 24px;
    text-align: center;
}

.emission-cart-drawer__items[b-xikr3emklh] {
    flex: 1;
    overflow-y: auto;
    padding: 8px 0;
}

.emission-cart-drawer__item[b-xikr3emklh] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.emission-cart-drawer__item:last-child[b-xikr3emklh] {
    border-bottom: none;
}

.emission-cart-drawer__item-info[b-xikr3emklh] {
    flex: 1;
    min-width: 0;
}

.emission-cart-drawer__total[b-xikr3emklh] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px;
    border-top: 2px solid var(--mud-palette-lines-default);
    background: var(--mud-palette-background);
}

.emission-cart-drawer__actions[b-xikr3emklh] {
    padding: 16px;
    border-top: 1px solid var(--mud-palette-lines-default);
}
/* _content/AlchemosPositive.Portal/Features/CalculatorBuilder/MyCalculations.razor.rz.scp.css */
/* =============================================================================
   MyCalculations — Scoped Component Styles
   Aesthetic: Misty Spring — soft, naturish, translucent, morning-mist palette
   Archetype 3: List Page — density + clarity for tabular browsing
   All colours consume semantic tokens and spring extensions from Dashboard.razor.css :root
   ============================================================================= */

/* §7.3.2 — Defeat global app.css background-color injection on MudText.
   Required on any component with non-page-background surfaces. */
[b-pu3lmmjohi] .mud-typography {
  background-color: transparent !important;
}

/* ── Root wrapper ──────────────────────────────────────────────────────────── */
.calcs-root[b-pu3lmmjohi] {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  padding-bottom: var(--space-8);
  animation: calcsFadeIn-b-pu3lmmjohi var(--transition-reveal) ease-out both;
}

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

/* ── Hero Banner (matches Dashboard / CalculatorList spring aesthetic) ─────── */
.calcs-hero[b-pu3lmmjohi] {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-xl);
  padding: var(--space-8) var(--space-content);
  background: linear-gradient(
    130deg,
    #ddf3ee 0%,
    #e8f5e9 22%,
    #eff6fb 48%,
    #f3eff9 72%,
    #fdf5ee 100%
  );
  border: 1px solid rgba(180, 210, 200, 0.55);
  box-shadow: 0 2px 20px rgba(15, 118, 110, 0.06), 0 1px 4px rgba(15, 23, 42, 0.04);
  min-height: 130px;
  display: flex;
  align-items: center;
}

.calcs-hero[b-pu3lmmjohi]::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 55% 70% at 85% 30%, rgba(204, 251, 241, 0.30) 0%, transparent 60%),
    radial-gradient(ellipse 40% 50% at 10% 80%, rgba(243, 239, 249, 0.25) 0%, transparent 55%);
  pointer-events: none;
}

.calcs-hero__body[b-pu3lmmjohi] {
  position: relative;
  z-index: 1;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.calcs-hero__left[b-pu3lmmjohi] {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.calcs-hero__eyebrow[b-pu3lmmjohi] {
  color: var(--spring-moss-solid);
  margin: 0 0 var(--space-1) 0;
  letter-spacing: 0.08em;
}

.calcs-hero__title[b-pu3lmmjohi] {
  color: var(--color-text-primary);
  margin: 0 0 var(--space-2) 0;
  letter-spacing: var(--tracking-tight);
}

.calcs-hero__sub[b-pu3lmmjohi] {
  color: var(--color-text-secondary);
  margin: 0;
  max-width: 520px;
}

.calcs-hero__actions[b-pu3lmmjohi] {
  display: flex;
  gap: var(--space-2);
  flex-shrink: 0;
}

/* ── KPI Summary Cards ─────────────────────────────────────────────────────── */
.calcs-kpi-row[b-pu3lmmjohi] {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
  align-items: stretch;
}

.calcs-kpi-card[b-pu3lmmjohi] {
  background: var(--color-surface-1);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-content);
  display: flex;
  align-items: center;
  gap: var(--space-4);
  height: 100%;
  box-sizing: border-box;
  transition: transform var(--transition-interactive), border-color var(--transition-interactive);
}

.calcs-kpi-card:hover[b-pu3lmmjohi] {
  transform: translateY(-1px);
  border-color: var(--color-border-default);
}

/* Scope color KPI icons */
.calcs-kpi-icon[b-pu3lmmjohi] {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 1.4rem;
}

.calcs-kpi-icon--teal[b-pu3lmmjohi]  { background: var(--color-accent-subtle); color: var(--color-accent); }
.calcs-kpi-icon--moss[b-pu3lmmjohi]  { background: var(--spring-moss-bg);      color: var(--spring-moss-solid); }
.calcs-kpi-icon--sky[b-pu3lmmjohi]   { background: var(--spring-sky-bg);       color: var(--spring-sky-solid); }
.calcs-kpi-icon--amber[b-pu3lmmjohi] { background: var(--spring-amber-bg);     color: var(--spring-amber-solid); }

.calcs-kpi-content[b-pu3lmmjohi] {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.calcs-kpi-value[b-pu3lmmjohi] {
  color: var(--color-text-primary);
  font-feature-settings: 'tnum';
  letter-spacing: var(--tracking-tight);
}

.calcs-kpi-label[b-pu3lmmjohi] {
  color: var(--color-text-secondary);
}

/* ── Filter Bar ────────────────────────────────────────────────────────────── */
.calcs-filter-bar[b-pu3lmmjohi] {
  background: var(--color-surface-1);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-content);
}

.calcs-filter-bar__grid[b-pu3lmmjohi] {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr auto;
  gap: var(--space-4);
  align-items: end;
}

/* ── Table Section ─────────────────────────────────────────────────────────── */
.calcs-table-panel[b-pu3lmmjohi] {
  background: var(--color-surface-1);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

/* Override MudTable to match spring aesthetic */
[b-pu3lmmjohi] .calcs-table-panel .mud-table {
  border: none;
  border-radius: 0;
}

[b-pu3lmmjohi] .calcs-table-panel .mud-table-head .mud-table-cell {
  background: var(--color-bg-subtle);
  color: var(--color-text-secondary);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--color-border-subtle);
  padding: 10px 16px;
}

[b-pu3lmmjohi] .calcs-table-panel .mud-table-row .mud-table-cell {
  border-bottom: 1px solid var(--color-border-subtle);
  color: var(--color-text-primary);
  padding: 12px 16px;
  font-size: var(--text-sm);
}

[b-pu3lmmjohi] .calcs-table-panel .mud-table-row:last-child .mud-table-cell {
  border-bottom: none;
}

[b-pu3lmmjohi] .calcs-table-panel .mud-table-row:hover .mud-table-cell {
  background: var(--color-bg-hover);
  cursor: pointer;
}

/* Pager */
[b-pu3lmmjohi] .calcs-table-panel .mud-table-pagination {
  border-top: 1px solid var(--color-border-subtle);
  background: var(--color-bg-subtle);
}

/* ── Scope Avatars ─────────────────────────────────────────────────────────── */
.calcs-scope-avatar[b-pu3lmmjohi] {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-xs);
  font-weight: 700;
  flex-shrink: 0;
}

.calcs-scope-avatar--scope1[b-pu3lmmjohi] { background: var(--spring-rose-bg);  color: var(--spring-rose-solid); }
.calcs-scope-avatar--scope2[b-pu3lmmjohi] { background: var(--spring-amber-bg); color: var(--spring-amber-solid); }
.calcs-scope-avatar--scope3[b-pu3lmmjohi] { background: var(--spring-sky-bg);   color: var(--spring-sky-solid); }
.calcs-scope-avatar--default[b-pu3lmmjohi] { background: var(--color-bg-component); color: var(--color-text-secondary); }

/* ── Scope Chips ───────────────────────────────────────────────────────────── */
.calcs-scope-chip[b-pu3lmmjohi] {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.03em;
  border: 1px solid transparent;
  white-space: nowrap;
}

.calcs-scope-chip--scope1[b-pu3lmmjohi] {
  background: var(--spring-rose-bg);
  color: var(--spring-rose-solid);
  border-color: var(--spring-rose-mid);
}
.calcs-scope-chip--scope2[b-pu3lmmjohi] {
  background: var(--spring-amber-bg);
  color: var(--spring-amber-solid);
  border-color: var(--spring-amber-mid);
}
.calcs-scope-chip--scope3[b-pu3lmmjohi] {
  background: var(--spring-sky-bg);
  color: var(--spring-sky-solid);
  border-color: var(--spring-sky-mid);
}
.calcs-scope-chip--default[b-pu3lmmjohi] {
  background: var(--color-bg-component);
  color: var(--color-text-secondary);
  border-color: var(--color-border-subtle);
}

/* ── Status Chips ──────────────────────────────────────────────────────────── */
.calcs-status-chip[b-pu3lmmjohi] {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: var(--text-xs);
  font-weight: 500;
  border: 1px solid transparent;
  white-space: nowrap;
}

.calcs-status-chip--draft[b-pu3lmmjohi] {
  background: var(--color-bg-component);
  color: var(--color-text-secondary);
  border-color: var(--color-border-subtle);
}
.calcs-status-chip--saved[b-pu3lmmjohi] {
  background: var(--spring-sky-bg);
  color: var(--spring-sky-solid);
  border-color: var(--spring-sky-mid);
}
.calcs-status-chip--submitted[b-pu3lmmjohi] {
  background: var(--spring-amber-bg);
  color: var(--spring-amber-solid);
  border-color: var(--spring-amber-mid);
}
.calcs-status-chip--approved[b-pu3lmmjohi] {
  background: var(--spring-moss-bg);
  color: var(--spring-moss-solid);
  border-color: var(--spring-moss-mid);
}
.calcs-status-chip--rejected[b-pu3lmmjohi] {
  background: var(--spring-rose-bg);
  color: var(--spring-rose-solid);
  border-color: var(--spring-rose-mid);
}

/* ── Emissions Value ───────────────────────────────────────────────────────── */
.calcs-emission-value[b-pu3lmmjohi] {
  font-weight: 600;
  font-feature-settings: 'tnum';
  color: var(--color-text-primary);
  letter-spacing: var(--tracking-tight);
}

.calcs-emission-unit[b-pu3lmmjohi] {
  color: var(--color-text-secondary);
  font-size: var(--text-xs);
}

/* ── Date Cell ─────────────────────────────────────────────────────────────── */
.calcs-date-primary[b-pu3lmmjohi] { color: var(--color-text-primary); }
.calcs-date-time[b-pu3lmmjohi]    { color: var(--color-text-secondary); font-size: var(--text-xs); margin-top: 2px; }

/* ── Row Actions ───────────────────────────────────────────────────────────── */
.calcs-row-actions[b-pu3lmmjohi] {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  opacity: 0.4;
  transition: opacity var(--transition-interactive);
}

[b-pu3lmmjohi] .calcs-table-panel .mud-table-row:hover .calcs-row-actions {
  opacity: 1;
}

/* ── Empty State ───────────────────────────────────────────────────────────── */
.calcs-empty-state[b-pu3lmmjohi] {
  padding: var(--space-12) var(--space-content);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-4);
}

.calcs-empty-icon[b-pu3lmmjohi] {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--spring-moss-bg);
  border: 1px solid var(--spring-moss-mid);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  color: var(--spring-moss-solid);
}

.calcs-empty-title[b-pu3lmmjohi]  { color: var(--color-text-primary); margin: 0; }
.calcs-empty-body[b-pu3lmmjohi]   { color: var(--color-text-secondary); margin: 0; max-width: 380px; }

/* ── Loading placeholder ───────────────────────────────────────────────────── */
.calcs-loading[b-pu3lmmjohi] {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: var(--space-12);
}

/* ── Export Panel ──────────────────────────────────────────────────────────── */
.calcs-export-panel[b-pu3lmmjohi] {
  background: var(--color-surface-1);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-content);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.calcs-export-panel__info[b-pu3lmmjohi] {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.calcs-export-panel__title[b-pu3lmmjohi]  { color: var(--color-text-primary); }
.calcs-export-panel__subtitle[b-pu3lmmjohi] { color: var(--color-text-secondary); }

.calcs-export-panel__actions[b-pu3lmmjohi] {
  display: flex;
  gap: var(--space-2);
  flex-shrink: 0;
  flex-wrap: wrap;
}

/* ── Calculation Details Dialog ─────────────────────────────────────────── */

/* Calculator name title */
.cd-calc-title[b-pu3lmmjohi] {
  font-weight: 600;
  font-variation-settings: "wght" 580;
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1, "ss01" 1;
  letter-spacing: -0.01em;
  line-height: 1.25;
  color: var(--color-text-primary);
}

/* Section heading above breakdown table */
.cd-section-title[b-pu3lmmjohi] {
  font-weight: 500;
  font-variation-settings: "wght" 510;
  color: var(--color-text-primary);
}

/* ── Total emissions hero card ── */
/* Clean left-stripe accent only — no all-sides box border */
.calc-detail-total-card[b-pu3lmmjohi] {
  background: var(--teal-1) !important;    /* #F0FDFA — barely-there teal wash */
  border: none !important;
  border-left: 4px solid var(--color-accent) !important;
  border-radius: var(--radius-lg);
}

/* The "0.152" hero number */
.calc-detail-total-number[b-pu3lmmjohi] {
  color: var(--color-accent);
  font-weight: 700;
  font-variation-settings: "wght" 640;     /* Inter variable — firm but not harsh */
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1, "ss01" 1, "tnum" 1; /* tnum = tabular numerals */
  font-variant-numeric: tabular-nums;
}

/* Verified shield avatar — soften to primary teal, reduce visual noise */
.cd-verified-badge[b-pu3lmmjohi] {
  opacity: 0.75;
  flex-shrink: 0;
}

/* ── Gas breakdown table: row-separator style (no column grid lines) ── */

/* Remove outer box shadow/border that MudSimpleTable adds */
[b-pu3lmmjohi] .calc-detail-breakdown-table.mud-simple-table {
  box-shadow: none !important;
  border: none !important;
  background: transparent !important;
}

[b-pu3lmmjohi] .calc-detail-breakdown-table thead th {
  background: transparent;
  color: var(--color-text-secondary);
  font-size: var(--text-xs);
  font-weight: 600;
  font-variation-settings: "wght" 580;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-top: none !important;
  border-left: none !important;
  border-right: none !important;
  border-bottom: 2px solid var(--color-border-subtle) !important;
  padding: 6px 12px;
}

/* Numeric columns right-aligned via CSS (no inline styles) */
[b-pu3lmmjohi] .calc-detail-breakdown-table thead th:nth-child(2),
[b-pu3lmmjohi] .calc-detail-breakdown-table thead th:nth-child(3) {
  text-align: right;
}

[b-pu3lmmjohi] .calc-detail-breakdown-table tbody td {
  border-top: none !important;
  border-left: none !important;
  border-right: none !important;
  border-bottom: 1px solid var(--color-border-subtle) !important;
  padding: 8px 12px;
  color: var(--color-text-primary);
  font-size: var(--text-sm);
}

/* numeric cells (class from Razor) */
[b-pu3lmmjohi] .calc-detail-breakdown-table .cd-num-cell {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  letter-spacing: 0;
}

/* Total summary row */
[b-pu3lmmjohi] .calc-detail-breakdown-table tr.calc-detail-total-row td {
  background: var(--teal-1);
  font-weight: 600;
  font-variation-settings: "wght" 580;
  color: var(--color-accent);
  border-top: 2px solid var(--teal-4) !important;
  border-bottom: none !important;
}

/* ── Emission factor card — left accent line for anchoring ── */
.calc-detail-factor-card[b-pu3lmmjohi] {
  background: var(--color-surface-2) !important;
  border: 1px solid var(--color-border-subtle) !important;
  border-left: 3px solid var(--teal-5) !important;   /* subtle teal left accent */
  border-radius: var(--radius-md);
}

/* "Emission Factor" overline label inside the card */
.cd-factor-label[b-pu3lmmjohi] {
  font-size: var(--text-xs) !important;
  font-weight: 600;
  font-variation-settings: "wght" 580;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--color-accent) !important;
}

.calc-detail-factor-value[b-pu3lmmjohi] {
  color: var(--color-text-secondary);
  font-variant-numeric: tabular-nums;
}

/* Notes card */
.calc-detail-notes-card[b-pu3lmmjohi] {
  background: var(--color-surface-2) !important;
  border: 1px solid var(--color-border-subtle) !important;
  border-left: 3px solid var(--color-info-text) !important;
  border-radius: var(--radius-md);
}

}

/* ── Calculator name + avatar row ─────────────────────────────────────────── */
.calcs-calc-name-row[b-pu3lmmjohi] {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.calcs-calc-name[b-pu3lmmjohi] { color: var(--color-text-primary); }

/* ── Responsive breakpoints ─────────────────────────────────────────────────── */
@media (max-width: 959px) {
  .calcs-kpi-row[b-pu3lmmjohi] {
    grid-template-columns: repeat(2, 1fr);
  }

  .calcs-filter-bar__grid[b-pu3lmmjohi] {
    grid-template-columns: 1fr 1fr;
  }

  .calcs-hero__body[b-pu3lmmjohi] {
    flex-direction: column;
    align-items: flex-start;
  }

  .calcs-hero__actions[b-pu3lmmjohi] {
    width: 100%;
    justify-content: flex-start;
  }
}

@media (max-width: 599px) {
  .calcs-kpi-row[b-pu3lmmjohi] {
    grid-template-columns: 1fr 1fr;
  }

  .calcs-filter-bar__grid[b-pu3lmmjohi] {
    grid-template-columns: 1fr;
  }

  .calcs-export-panel[b-pu3lmmjohi] {
    flex-direction: column;
    align-items: flex-start;
  }

  .calcs-export-panel__actions[b-pu3lmmjohi] {
    width: 100%;
  }
}

/* ── Bulk Selection Toolbar ─────────────────────────────────────────────────
   Inverted palette (§1.5 tooltip pattern):
   - bg  = --slate-12 (#0F1A25) — 18:1 contrast ratio with --slate-1 text ✓ WCAG AAA
   - text = --slate-1  (#FAFBFC)
   Connects flush to the table top (border-radius 0 on bottom corners).
   All colour applied via scoped CSS — never via inline Style= (§7 cascade rule).
   ─────────────────────────────────────────────────────────────────────────── */
.bulk-action-bar[b-pu3lmmjohi] {
  background-color: var(--slate-12);
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  color: var(--slate-1);
  min-height: 44px;
}

/* MudText inside the toolbar inherits the inverted surface — §7.3.2 override */
.bulk-action-bar[b-pu3lmmjohi]  .mud-typography {
  color: var(--slate-1) !important;
  background-color: transparent !important;
}

.bulk-action-bar__icon[b-pu3lmmjohi] {
  color: var(--slate-1);
  opacity: 0.75;
}

.bulk-action-bar__label[b-pu3lmmjohi] {
  font-weight: 500;
  letter-spacing: var(--tracking-wide);
}

/* Text button inside the toolbar — override MudBlazor's Color.Inherit injection */
.bulk-action-bar[b-pu3lmmjohi]  .bulk-action-bar__btn {
  color: var(--slate-1) !important;
  font-weight: 500;
  letter-spacing: var(--tracking-wide);
  text-transform: none;
}

.bulk-action-bar[b-pu3lmmjohi]  .bulk-action-bar__btn:hover {
  background-color: rgba(250, 251, 252, 0.10) !important; /* --slate-1 at 10% */
}

.bulk-action-bar[b-pu3lmmjohi]  .bulk-action-bar__btn:disabled {
  color: rgba(250, 251, 252, 0.40) !important;
}

/* Icon button (×) */
.bulk-action-bar[b-pu3lmmjohi]  .bulk-action-bar__close {
  color: var(--slate-1) !important;
  opacity: 0.75;
  transition: opacity var(--transition-interactive);
}

.bulk-action-bar[b-pu3lmmjohi]  .bulk-action-bar__close:hover {
  opacity: 1;
  background-color: rgba(250, 251, 252, 0.10) !important;
}

/* Vertical divider between action button and close icon */
.bulk-action-bar[b-pu3lmmjohi]  .bulk-action-bar__divider {
  border-color: rgba(250, 251, 252, 0.25) !important;
  margin-top: 8px;
  margin-bottom: 8px;
}

/* Dark mode: --slate-12 is already very dark, lighten slightly to stay distinct from page bg */
[data-theme="dark"] .bulk-action-bar[b-pu3lmmjohi] {
  background-color: var(--slate-11);
}

/* ── Reduced motion ─────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .calcs-root[b-pu3lmmjohi], .calcs-kpi-card[b-pu3lmmjohi] {
    animation: none !important;
    transition: none !important;
  }
}
/* _content/AlchemosPositive.Portal/Features/CalculatorBuilder/MyCalculators.razor.rz.scp.css */
.group-card[b-wxgxurba45] {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.group-card .mud-card-content[b-wxgxurba45] {
    flex: 1;
}
/* _content/AlchemosPositive.Portal/Features/CalculatorBuilder/ResultsDashboard.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════════
   ResultsDashboard.razor.css
   Emissions Dashboard — Spring Aesthetics · Style Contract §7.3, §10.2
   ═══════════════════════════════════════════════════════════════════ */

/* §7.3.2 — Defeat global app.css background-color on MudText inside
   spring gradient / non-page-background surfaces (required override) */
[b-67uau694n6] .mud-typography {
    background-color: transparent !important;
}

/* ── KPI unit inline helper (inside Typo.h6 span) ─────────────────── */
.rdash-kpi-unit[b-67uau694n6] {
    font-size: var(--text-xs);
    font-weight: 400;
    color: var(--color-text-secondary);
}

/* Emissions change badges */
.rdash-badge--up[b-67uau694n6] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: var(--text-xs);
    font-weight: 600;
    padding: 2px 10px;
    border-radius: 999px;
    background: var(--color-error-bg);
    color: var(--color-error-text);
    border: 1px solid var(--color-error-border);
    width: fit-content;
    margin-top: var(--space-2);
}

.rdash-badge--down[b-67uau694n6] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: var(--text-xs);
    font-weight: 600;
    padding: 2px 10px;
    border-radius: 999px;
    background: var(--color-success-bg);
    color: var(--color-success-text);
    border: 1px solid var(--color-success-border);
    width: fit-content;
    margin-top: var(--space-2);
}

/* ── Chart panel rows ─────────────────────────────────────────────── */
.rdash-charts-row[b-67uau694n6] {
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: var(--space-4);
    align-items: stretch;
}

.rdash-charts-row-2[b-67uau694n6] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-4);
    align-items: stretch;
}

/* Generic chart panel card */
.rdash-panel[b-67uau694n6] {
    background: var(--color-surface-1);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-lg);
    padding: var(--space-content);
    height: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.rdash-panel__header[b-67uau694n6] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    flex-wrap: wrap;
}

.rdash-panel__title[b-67uau694n6] {
    color: var(--color-text-primary);
    margin: 0;
}

.rdash-panel__chart[b-67uau694n6] {
    flex: 1;
}

/* ── Granularity toggle (Daily / Monthly / Yearly) ────────────────── */
.rdash-granularity-bar[b-67uau694n6] {
    display: flex;
    gap: 2px;
    background: var(--color-bg-component);
    border-radius: var(--radius-md);
    padding: 2px;
    border: 1px solid var(--color-border-subtle);
    flex-shrink: 0;
}

.rdash-granularity-btn[b-67uau694n6] {
    padding: 4px 12px;
    border-radius: calc(var(--radius-md) - 2px);
    font-size: var(--text-xs);
    font-weight: 500;
    color: var(--color-text-secondary);
    background: transparent;
    border: none;
    cursor: pointer;
    letter-spacing: var(--tracking-wide);
    transition: background var(--transition-interactive), color var(--transition-interactive);
    line-height: 1.4;
}

.rdash-granularity-btn:hover[b-67uau694n6] {
    background: var(--color-bg-hover);
    color: var(--color-text-primary);
}

.rdash-granularity-btn--active[b-67uau694n6] {
    background: var(--color-surface-1);
    color: var(--color-accent-text);
    font-weight: 600;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
}

/* ── Emission value in table ─────────────────────────────────────── */
.rdash-emission-value[b-67uau694n6] {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-text-primary);
}

.rdash-emission-unit[b-67uau694n6] {
    font-size: var(--text-xs);
    font-weight: 400;
    color: var(--color-text-secondary);
}

/* Loading state */
.rdash-loading[b-67uau694n6] {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: var(--space-12) 0;
}

/* ── Keyframes ────────────────────────────────────────────────────── */
@keyframes rdashFadeIn-b-67uau694n6 {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

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

/* md: stacked charts */
@media (max-width: 1279px) {
    .rdash-charts-row[b-67uau694n6] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 959px) {
    .rdash-charts-row-2[b-67uau694n6] {
        grid-template-columns: 1fr;
    }
}

/* ── Calculation Details Dialog ───────────────────────────────────── */

.cd-calc-title[b-67uau694n6] {
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1.25;
    color: var(--color-text-primary);
}

.cd-section-title[b-67uau694n6] {
    font-weight: 500;
    color: var(--color-text-primary);
}

.calc-detail-total-card[b-67uau694n6] {
    background: var(--teal-1) !important;
    border: none !important;
    border-left: 4px solid var(--color-accent) !important;
    border-radius: var(--radius-lg);
}

.calc-detail-total-number[b-67uau694n6] {
    color: var(--color-accent);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.cd-verified-badge[b-67uau694n6] {
    opacity: 0.75;
    flex-shrink: 0;
}

[b-67uau694n6] .calc-detail-breakdown-table.mud-simple-table {
    box-shadow: none !important;
    border: none !important;
    background: transparent !important;
}

[b-67uau694n6] .calc-detail-breakdown-table thead th {
    background: transparent;
    color: var(--color-text-secondary);
    font-size: var(--text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    border-bottom: 2px solid var(--color-border-subtle) !important;
    padding: 6px 12px;
}

[b-67uau694n6] .calc-detail-breakdown-table thead th:nth-child(2),
[b-67uau694n6] .calc-detail-breakdown-table thead th:nth-child(3) {
    text-align: right;
}

[b-67uau694n6] .calc-detail-breakdown-table tbody td {
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    border-bottom: 1px solid var(--color-border-subtle) !important;
    padding: 8px 12px;
    color: var(--color-text-primary);
    font-size: var(--text-sm);
}

[b-67uau694n6] .calc-detail-breakdown-table .cd-num-cell {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

[b-67uau694n6] .calc-detail-breakdown-table tr.calc-detail-total-row td {
    background: var(--teal-1);
    font-weight: 600;
    color: var(--color-accent);
    border-top: 2px solid var(--teal-4) !important;
    border-bottom: none !important;
}

.calc-detail-factor-card[b-67uau694n6] {
    background: var(--color-surface-2) !important;
    border: 1px solid var(--color-border-subtle) !important;
    border-left: 3px solid var(--teal-5) !important;
    border-radius: var(--radius-md);
}

.cd-factor-label[b-67uau694n6] {
    font-size: var(--text-xs) !important;
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--color-accent) !important;
}

.calc-detail-factor-value[b-67uau694n6] {
    color: var(--color-text-secondary);
    font-variant-numeric: tabular-nums;
}

.calc-detail-notes-card[b-67uau694n6] {
    background: var(--color-surface-2) !important;
    border: 1px solid var(--color-border-subtle) !important;
    border-left: 3px solid var(--color-info-text) !important;
    border-radius: var(--radius-md);
}
/* _content/AlchemosPositive.Portal/Features/CarbonCalculation/Emissions.razor.rz.scp.css */
/* ══════════════════════════════════════════════════════════════
   Emissions.razor.css — Archetype 3 (List Page)
   Style Contract §10.3 | Spring Aesthetics | WCAG AA
   ══════════════════════════════════════════════════════════════ */

/* §7.3.2 — Defeat global app.css bg tint on MudText inside gradient surfaces */
[b-il1j54ojfk] .mud-typography {
    background-color: transparent !important;
}

/* ── Page Root ──────────────────────────────────────────────── */
.emissions-root[b-il1j54ojfk] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    padding-bottom: var(--space-8);
    animation: emitFadeIn-b-il1j54ojfk var(--transition-reveal) ease-out both;
}

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

/* ── Hero Banner ─────────────────────────────────────────────── */
.emissions-hero[b-il1j54ojfk] {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-xl);
    padding: var(--space-8) var(--space-content);
    background: linear-gradient(
        130deg,
        #ddf3ee 0%,
        #e8f5e9 22%,
        #eff6fb 48%,
        #f3eff9 72%,
        #fdf5ee 100%
    );
    border: 1px solid rgba(180, 210, 200, 0.55);
    box-shadow: 0 2px 20px rgba(15, 118, 110, 0.06), 0 1px 4px rgba(15, 23, 42, 0.04);
    min-height: 110px;
    display: flex;
    align-items: center;
}

.emissions-hero[b-il1j54ojfk]::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 5% 50%, rgba(45, 212, 191, 0.10) 0%, transparent 55%),
        radial-gradient(ellipse at 90% 30%, rgba(167, 139, 250, 0.07) 0%, transparent 50%);
    pointer-events: none;
}

/* Hero body: text left, buttons right — Archetype 3 §10.3 */
.emissions-hero__body[b-il1j54ojfk] {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-6);
    flex: 1;
    /* Reserve space for the absolutely-positioned decorative icon */
    padding-right: calc(72px + var(--space-8));
}

.emissions-hero__left[b-il1j54ojfk] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.emissions-hero__actions[b-il1j54ojfk] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-shrink: 0;
    flex-wrap: wrap;
}

/* Typo.overline drives font-shape — color + spacing only */
.emissions-hero__eyebrow[b-il1j54ojfk] {
    color: var(--color-accent-text);
    margin: 0 0 var(--space-1) 0;
}

/* Typo.h5 drives font-shape — weight + color only */
.emissions-hero__title[b-il1j54ojfk] {
    color: var(--color-text-primary);
    margin: 0 0 var(--space-1) 0;
    font-weight: 700;
}

/* Typo.subtitle1 drives font-shape — color + max-width only */
.emissions-hero__sub[b-il1j54ojfk] {
    color: var(--color-text-secondary);
    margin: 0;
    max-width: 520px;
}

/* Decorative icon bubble — absolute, never interferes with layout */
.emissions-hero__icon-wrap[b-il1j54ojfk] {
    position: absolute;
    right: var(--space-8);
    top: 50%;
    transform: translateY(-50%);
    width: 72px;
    height: 72px;
    background: rgba(255, 255, 255, 0.55);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(196, 205, 214, 0.35);
    opacity: 0.45;
    pointer-events: none;
}

/* Mobile: stack title/buttons, hide icon */
@media (max-width: 599px) {
    .emissions-hero[b-il1j54ojfk] {
        padding: var(--space-6) var(--space-4);
    }
    .emissions-hero__body[b-il1j54ojfk] {
        flex-direction: column;
        align-items: flex-start;
        padding-right: 0;
        gap: var(--space-4);
    }
    .emissions-hero__actions[b-il1j54ojfk] {
        width: 100%;
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }
    [b-il1j54ojfk] .emissions-hero__actions .mud-button-root {
        width: 100% !important;
        justify-content: center !important;
    }
    .emissions-hero__icon-wrap[b-il1j54ojfk] {
        display: none;
    }
}

/* ── KPI Stat Cards — row layout: ring left, numbers right ───── */
.emissions-kpi-card[b-il1j54ojfk] {
    background: var(--color-surface-2);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--space-3);
    height: 100%;
    box-sizing: border-box;
    transition: transform var(--transition-interactive), box-shadow var(--transition-interactive);
}

.emissions-kpi-card:hover[b-il1j54ojfk] {
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.08) !important;
}

.emissions-kpi-card__ring[b-il1j54ojfk] {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.kpi-ring--teal[b-il1j54ojfk]   { background: rgba(45, 212, 191, 0.12); border: 2px solid rgba(45, 212, 191, 0.35); }
.kpi-ring--green[b-il1j54ojfk]  { background: rgba(34, 197, 94, 0.12);  border: 2px solid rgba(34, 197, 94, 0.35);  }
.kpi-ring--blue[b-il1j54ojfk]   { background: rgba(59, 130, 246, 0.12); border: 2px solid rgba(59, 130, 246, 0.35); }
.kpi-ring--violet[b-il1j54ojfk] { background: rgba(139, 92, 246, 0.12); border: 2px solid rgba(139, 92, 246, 0.35); }

.emissions-kpi-card__info[b-il1j54ojfk] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.emissions-kpi-card__value[b-il1j54ojfk] {
    color: var(--color-text-primary);
    font-weight: 700;
    line-height: 1.2;
}

.emissions-kpi-card__label[b-il1j54ojfk] {
    color: var(--color-text-secondary);
    font-size: var(--text-xs);
    line-height: var(--leading-body);
}

/* ── Filter Bar ──────────────────────────────────────────────── */
.emissions-filter-bar[b-il1j54ojfk] {
    background: var(--color-surface-2);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
}

/* ── Data Table ──────────────────────────────────────────────── */
[b-il1j54ojfk] .mud-table-head .mud-table-cell {
    background-color: var(--teal-1) !important;
    color: var(--color-text-secondary);
    font-weight: 600;
    font-size: var(--text-xs);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    white-space: nowrap;
}

[b-il1j54ojfk] .mud-table-body .mud-table-row:hover .mud-table-cell {
    background-color: rgba(204, 251, 241, 0.18) !important;
}

/* Category + subcategory cell */
.emit-category-name[b-il1j54ojfk] {
    color: var(--color-text-primary);
    font-weight: 500;
}

.emit-category-sub[b-il1j54ojfk] {
    color: var(--color-text-secondary);
    font-size: var(--text-xs);
    margin-top: 1px;
}

/* Emissions value — accent teal, bold */
.emit-value[b-il1j54ojfk] {
    color: var(--color-accent-text);
    font-weight: 700;
    font-size: var(--text-sm);
    font-variant-numeric: tabular-nums;
}

/* ── Scope chip overrides — ensure accessible contrast ──────── */
/* Scope 3 uses Color.Secondary → mud-chip-color-secondary */
[b-il1j54ojfk] .mud-chip.mud-chip-color-secondary {
    background-color: var(--violet-2) !important;
    color: var(--violet-9) !important;
}

/* ── Action Buttons ─────────────────────────────────────────── */
.emit-actions[b-il1j54ojfk] {
    display: flex;
    align-items: center;
    gap: 2px;
    /* Always visible — not hover-only */
}

/* Fixed-width action column */
[b-il1j54ojfk] .emit-actions-col {
    width: 110px;
    min-width: 100px;
}

/* ── Loading & Empty States ─────────────────────────────────── */
.emit-loading-state[b-il1j54ojfk] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    padding: var(--space-12);
}

.emit-loading-text[b-il1j54ojfk] {
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
}

.emit-empty-state[b-il1j54ojfk] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: var(--space-12) var(--space-content);
    gap: var(--space-2);
}

.emit-empty-title[b-il1j54ojfk] {
    color: var(--color-text-primary);
}

.emit-empty-sub[b-il1j54ojfk] {
    color: var(--color-text-secondary);
    max-width: 360px;
}

/* ── Responsive Column Hiding — §10.10 Table column visibility ─ */
/* sm breakpoint: 600–959px — hide Activity column */
@media (min-width: 600px) and (max-width: 959px) {
    [b-il1j54ojfk] .em-col-hide-sm {
        display: none !important;
    }
}

/* ── Breadcrumbs inside hero ─────────────────────────────────── */
[b-il1j54ojfk] .emissions-hero .mud-breadcrumbs {
    padding: 0 !important;
    margin-bottom: 4px;
    opacity: 0.75;
}

/* ── Reduced motion ─────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .emissions-root[b-il1j54ojfk], .emissions-kpi-card[b-il1j54ojfk] {
        animation: none;
        transition: none;
    }
}
/* _content/AlchemosPositive.Portal/Features/Certificates/CertificateRequests.razor.rz.scp.css */
/* ══════════════════════════════════════════════════════════════
   CertificateRequests.razor.css — Spring Aesthetics
   §7.3.2 transparency fix | §0.2 Typo-first | Misty Spring palette
   ══════════════════════════════════════════════════════════════ */

[b-5hherlg6op] .mud-typography {
    background-color: transparent !important;
}

/* ── Page root ───────────────────────────────────────────────── */
.cert-requests-root[b-5hherlg6op] {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
    padding-bottom: var(--space-8);
    animation: certReqFadeIn-b-5hherlg6op var(--transition-reveal) ease-out both;
    background:
        radial-gradient(ellipse 130% 55% at 60% 0%, rgba(204, 251, 241, 0.18) 0%, transparent 55%),
        radial-gradient(ellipse 90% 40% at 5% 80%, rgba(240, 244, 255, 0.12) 0%, transparent 55%);
}

@keyframes certReqFadeIn-b-5hherlg6op {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Hero Banner ─────────────────────────────────────────────── */
.cert-requests-hero[b-5hherlg6op] {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-xl);
    padding: var(--space-8) var(--space-content);
    background: linear-gradient(
        130deg,
        #ddf3ee 0%,
        #e8f5e9 22%,
        #eff6fb 48%,
        #f3eff9 72%,
        #fdf5ee 100%
    );
    border: 1px solid rgba(180, 210, 200, 0.55);
    box-shadow: 0 2px 20px rgba(15, 118, 110, 0.06), 0 1px 4px rgba(15, 23, 42, 0.04);
    min-height: 110px;
    display: flex;
    align-items: center;
}

.cert-requests-hero[b-5hherlg6op]::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 5% 50%, rgba(45, 212, 191, 0.10) 0%, transparent 55%),
        radial-gradient(ellipse at 90% 30%, rgba(167, 139, 250, 0.07) 0%, transparent 50%);
    pointer-events: none;
}

.cert-requests-hero__body[b-5hherlg6op] {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    flex: 1;
}

.cert-requests-hero__eyebrow[b-5hherlg6op] {
    color: var(--color-accent-text, #0C5E58);
    margin: 0 0 var(--space-1) 0;
}

.cert-requests-hero__title[b-5hherlg6op] {
    color: var(--color-text-primary, #0F1A25);
    margin: 0 0 var(--space-1) 0;
    font-weight: 700;
}

.cert-requests-hero__sub[b-5hherlg6op] {
    color: var(--color-text-secondary, #3D4E5C);
    margin: 0;
    max-width: 560px;
}

.cert-requests-hero__icon-wrap[b-5hherlg6op] {
    position: absolute;
    right: var(--space-8);
    top: 50%;
    transform: translateY(-50%);
    width: 72px;
    height: 72px;
    background: rgba(255, 255, 255, 0.55);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(196, 205, 214, 0.35);
    opacity: 0.6;
    pointer-events: none;
}

@media (max-width: 599px) {
    .cert-requests-hero[b-5hherlg6op] { padding: var(--space-6) var(--space-4); }
    .cert-requests-hero__icon-wrap[b-5hherlg6op] { display: none; }
}

/* ── KPI Stat Cards ──────────────────────────────────────────── */
.cert-requests-kpi-card[b-5hherlg6op] {
    background: var(--color-surface-2);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    transition: transform var(--transition-interactive);
}

.cert-requests-kpi-card:hover[b-5hherlg6op] { transform: translateY(-1px); }

/* ── Filter Bar ──────────────────────────────────────────────── */
.cert-requests-filter-bar[b-5hherlg6op] {
    background: var(--color-surface-2);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
}

/* ── Requests Table ──────────────────────────────────────────── */
[b-5hherlg6op] .mud-table-head .mud-table-cell {
    background-color: var(--teal-1, #f0faf9) !important;
    color: var(--color-text-secondary, #3D4E5C);
    font-weight: 600;
    font-size: var(--text-xs, 0.75rem);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

[b-5hherlg6op] .mud-table-cell {
    background-color: transparent !important;
}

[b-5hherlg6op] .mud-table-body .mud-table-row:hover {
    background-color: rgba(204, 251, 241, 0.15) !important;
}

/* ── Info Banner ─────────────────────────────────────────────── */
.cert-requests-info-banner[b-5hherlg6op] {
    background: var(--color-info-bg, #EFF6FF);
    border: 1px solid var(--color-info-mid, #BFDBFE);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
}

/* ── Breadcrumbs inside hero ─────────────────────────────────── */
[b-5hherlg6op] .cert-requests-hero .mud-breadcrumbs {
    padding: 0 !important;
    margin-bottom: var(--space-2);
    opacity: 0.75;
}
/* _content/AlchemosPositive.Portal/Features/Certificates/Certificates.razor.rz.scp.css */
/* ══════════════════════════════════════════════════════════════
   Certificates.razor.css — Spring Aesthetics
   §7.3.2 transparency fix | §0.2 Typo-first | Misty Spring palette
   ══════════════════════════════════════════════════════════════ */

[b-l077jmcr2k] .mud-typography {
    background-color: transparent !important;
}

/* ── Page root ───────────────────────────────────────────────── */
.certs-root[b-l077jmcr2k] {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
    padding-bottom: var(--space-8);
    animation: certsFadeIn-b-l077jmcr2k var(--transition-reveal) ease-out both;
    background:
        radial-gradient(ellipse 130% 55% at 60% 0%, rgba(204, 251, 241, 0.18) 0%, transparent 55%),
        radial-gradient(ellipse 90% 40% at 5% 80%, rgba(240, 244, 255, 0.12) 0%, transparent 55%);
}

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

/* ── Hero Banner ─────────────────────────────────────────────── */
.certs-hero[b-l077jmcr2k] {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-xl);
    padding: var(--space-8) var(--space-content);
    background: linear-gradient(
        130deg,
        #ddf3ee 0%,
        #e8f5e9 22%,
        #eff6fb 48%,
        #f3eff9 72%,
        #fdf5ee 100%
    );
    border: 1px solid rgba(180, 210, 200, 0.55);
    box-shadow: 0 2px 20px rgba(15, 118, 110, 0.06), 0 1px 4px rgba(15, 23, 42, 0.04);
    min-height: 110px;
    display: flex;
    align-items: center;
}

.certs-hero[b-l077jmcr2k]::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 5% 50%, rgba(45, 212, 191, 0.10) 0%, transparent 55%),
        radial-gradient(ellipse at 90% 30%, rgba(167, 139, 250, 0.07) 0%, transparent 50%);
    pointer-events: none;
}

.certs-hero__body[b-l077jmcr2k] {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    flex: 1;
}

.certs-hero__eyebrow[b-l077jmcr2k] {
    color: var(--color-accent-text, #0C5E58);
    margin: 0 0 var(--space-1) 0;
}

.certs-hero__title[b-l077jmcr2k] {
    color: var(--color-text-primary, #0F1A25);
    margin: 0 0 var(--space-1) 0;
    font-weight: 700;
}

.certs-hero__sub[b-l077jmcr2k] {
    color: var(--color-text-secondary, #3D4E5C);
    margin: 0;
    max-width: 560px;
}

.certs-hero__icon-wrap[b-l077jmcr2k] {
    position: absolute;
    right: var(--space-8);
    top: 50%;
    transform: translateY(-50%);
    width: 72px;
    height: 72px;
    background: rgba(255, 255, 255, 0.55);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(196, 205, 214, 0.35);
    opacity: 0.6;
    pointer-events: none;
}

@media (max-width: 599px) {
    .certs-hero[b-l077jmcr2k] { padding: var(--space-6) var(--space-4); }
    .certs-hero__icon-wrap[b-l077jmcr2k] { display: none; }
}

/* ── KPI Summary Cards ───────────────────────────────────────── */
.certs-kpi-card[b-l077jmcr2k] {
    background: var(--color-surface-2);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    transition: transform var(--transition-interactive);
}

.certs-kpi-card:hover[b-l077jmcr2k] { transform: translateY(-1px); }

/* ── Filter Bar ──────────────────────────────────────────────── */
.certs-filter-bar[b-l077jmcr2k] {
    background: var(--color-surface-2);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
}

/* ── Certificate Cards (grid) ────────────────────────────────── */
[b-l077jmcr2k] .cert-card {
    height: 100%;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    border-radius: var(--radius-lg) !important;
    border: 1px solid var(--color-border-subtle) !important;
    background: var(--color-surface-2) !important;
    box-shadow: none !important;
    transition: transform var(--transition-interactive);
    overflow: hidden;
}

[b-l077jmcr2k] .cert-card:hover {
    transform: translateY(-2px);
    background: var(--color-bg-subtle) !important;
}

/* Certificate card detail row */
.cert-detail-row[b-l077jmcr2k] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-1) 0;
    border-bottom: 1px solid var(--color-border-subtle);
}

.cert-detail-row:last-child[b-l077jmcr2k] {
    border-bottom: none;
}

/* ── Breadcrumbs inside hero ─────────────────────────────────── */
[b-l077jmcr2k] .certs-hero .mud-breadcrumbs {
    padding: 0 !important;
    margin-bottom: var(--space-2);
    opacity: 0.75;
}
/* _content/AlchemosPositive.Portal/Features/Dashboard/Dashboard.razor.rz.scp.css */
/* =============================================================================
   Dashboard — Scoped Component Styles
   Aesthetic: Misty Spring — soft, naturish, translucent, morning-mist palette
   All colours consume semantic tokens from joy-tokens.css.
   Spring tones extend the teal/slate system with moss, sage & blossom tints.
   ============================================================================= */

/* ── Root wrapper ─────────────────────────────────────────────────────────────── */
.dashboard-root[b-lmwp0lubfe] {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  padding-bottom: var(--space-8);
  animation: fadeIn var(--transition-reveal) ease-out both;
  /* Misty spring atmosphere: very soft teal mist at top, lavender warmth at bottom */
  background:
    radial-gradient(ellipse 130% 55% at 60% 0%, rgba(204, 251, 241, 0.22) 0%, transparent 55%),
    radial-gradient(ellipse 90% 40% at 5% 80%, rgba(240, 244, 255, 0.15) 0%, transparent 55%);
}

/* Home shortcut — pinned to hero bottom-right corner */
.dash-hero__home-btn[b-lmwp0lubfe] {
  position: absolute;
  bottom: var(--space-3);
  right: var(--space-4);
  z-index: 3;
  background: rgba(255, 255, 255, 0.70);
  backdrop-filter: blur(8px);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
  color: var(--color-text-secondary);
  transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.dash-hero__home-btn:hover[b-lmwp0lubfe] {
  background: rgba(255, 255, 255, 0.95);
  color: var(--color-accent);
  box-shadow: 0 2px 8px rgba(15, 118, 110, 0.12);
}

/* Dark-mode override */
[data-theme="dark"] .dash-hero__home-btn[b-lmwp0lubfe] {
  background: rgba(30, 41, 59, 0.70);
  border-color: rgba(255, 255, 255, 0.10);
  color: var(--color-text-secondary);
}

[data-theme="dark"] .dash-hero__home-btn:hover[b-lmwp0lubfe] {
  background: rgba(30, 41, 59, 0.95);
  color: var(--color-accent);
}

/* ── Hero Banner ──────────────────────────────────────────────────────────────── */
.dash-hero[b-lmwp0lubfe] {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-xl);
  padding: var(--space-8) var(--space-content);
  background: linear-gradient(
    130deg,
    #ddf3ee 0%,        /* deep teal mist — dew-covered leaves */
    #e8f5e9 22%,       /* pale moss — fresh morning grass */
    #eff6fb 48%,       /* sky wash — misty morning air */
    #f3eff9 72%,       /* soft lavender — blossom haze */
    #fdf5ee 100%       /* warm cream — sunrise warmth */
  );
  border: 1px solid rgba(180, 210, 200, 0.55);
  box-shadow: 0 2px 20px rgba(15, 118, 110, 0.06), 0 1px 4px rgba(15, 23, 42, 0.04);
  min-height: 130px;
  display: flex;
  align-items: center;
}

.dash-hero__body[b-lmwp0lubfe] {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* Typo.overline provides: font-size, font-weight, letter-spacing, text-transform, line-height */
.dash-hero__eyebrow[b-lmwp0lubfe] {
  color: var(--color-accent-text);
  margin: 0 0 var(--space-2) 0;   /* breathing room before title */
}

/* Typo.h5 provides: font-size, font-weight, letter-spacing, line-height */
.dash-hero__title[b-lmwp0lubfe] {
  color: var(--color-text-primary);
  margin: 0 0 var(--space-2) 0;  /* gap before description */
}

/* Typo.subtitle1 provides: font-size, font-weight, line-height (relaxed) */
.dash-hero__sub[b-lmwp0lubfe] {
  color: var(--color-text-secondary);
  margin: 0;
  max-width: 560px;   /* prevent line-length overrun on wide screens */
}

.dash-hero__pill-row[b-lmwp0lubfe] {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin-top: var(--space-1);
}

.dash-hero__status-pill[b-lmwp0lubfe] {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,0.70);
  backdrop-filter: blur(8px);
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--color-accent);
  border: 1px solid var(--color-border-default);
}

.dash-hero__dot[b-lmwp0lubfe] {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-accent);
  box-shadow: 0 0 0 2px var(--color-accent-subtle);
  animation: pulse-dot-b-lmwp0lubfe 2s ease-in-out infinite;
}

@keyframes pulse-dot-b-lmwp0lubfe {
  0%, 100% { box-shadow: 0 0 0 2px var(--color-accent-subtle); opacity: 1; }
  50%       { box-shadow: 0 0 0 5px rgba(20, 184, 166, 0.15); opacity: 0.8; }
}

/* Decorative blobs — blurred organic shapes */
.dash-hero__blob[b-lmwp0lubfe] {
  position: absolute;
  border-radius: 50%;
  filter: blur(40px);
  pointer-events: none;
  z-index: 1;
}
.dash-hero__blob--1[b-lmwp0lubfe] {
  width: 340px;
  height: 260px;
  background: radial-gradient(ellipse, rgba(110,231,183,0.40) 0%, rgba(153,246,228,0.20) 40%, transparent 70%);
  top: -60px;
  right: 8%;
  animation: drift-1-b-lmwp0lubfe 8s ease-in-out infinite alternate;
}
.dash-hero__blob--2[b-lmwp0lubfe] {
  width: 260px;
  height: 200px;
  background: radial-gradient(ellipse, rgba(196,181,253,0.30) 0%, rgba(221,214,254,0.15) 40%, transparent 70%);
  bottom: -50px;
  right: 28%;
  animation: drift-2-b-lmwp0lubfe 10s ease-in-out infinite alternate;
}
/* 3rd organic blob — cherry blossom warmth */
.dash-hero[b-lmwp0lubfe]::after {
  content: '';
  position: absolute;
  width: 220px;
  height: 180px;
  border-radius: 50%;
  filter: blur(50px);
  pointer-events: none;
  background: radial-gradient(ellipse, rgba(249,168,212,0.18) 0%, transparent 70%);
  top: -20px;
  right: 40%;
  z-index: 1;
}
@keyframes drift-1-b-lmwp0lubfe {
  from { transform: translate(0, 0) scale(1); }
  to   { transform: translate(-12px, 8px) scale(1.04); }
}
@keyframes drift-2-b-lmwp0lubfe {
  from { transform: translate(0, 0) scale(1); }
  to   { transform: translate(10px, -6px) scale(1.06); }
}

/* ── Defeat app.css mud-typography background injection ─────────────────────── */
/* app.css sets background-color: var(--color-bg-app) on .mud-typography globally.
   Inside gradient cards and hero banners this creates opaque white/gray rectangles
   behind each <MudText>. Transparent inherits the parent surface — works identically
   in dark mode without any separate override. !important is justified: global rule
   and this scoped rule have equal specificity; !important ensures reliable override. */
[b-lmwp0lubfe] .mud-typography {
  background-color: transparent !important;
}

/* ── KPI Row ───────────────────────────────────────────────────────────────────── */
.kpi-row[b-lmwp0lubfe] {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
}

@media (max-width: 1279px) { .kpi-row[b-lmwp0lubfe] { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 599px)  { .kpi-row[b-lmwp0lubfe] { grid-template-columns: 1fr; } }

.kpi-card[b-lmwp0lubfe] {
  background: var(--color-surface-1);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-xl);
  padding: var(--space-content);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  position: relative;
  overflow: hidden;
  transition: transform var(--transition-interactive),
              box-shadow var(--transition-interactive);
  /* Equal-height enforcement: grid sets cell height; card must fill it */
  height: 100%;
  box-sizing: border-box;
}

.kpi-card[b-lmwp0lubfe]::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
}

.kpi-card--emissions[b-lmwp0lubfe]::before { background: linear-gradient(90deg, var(--spring-rose-solid), var(--spring-rose-mid)); }
.kpi-card--net[b-lmwp0lubfe]::before        { background: linear-gradient(90deg, var(--color-accent), var(--teal-4)); }
.kpi-card--offsets[b-lmwp0lubfe]::before    { background: linear-gradient(90deg, var(--spring-moss-solid), var(--spring-moss-mid)); }
.kpi-card--certs[b-lmwp0lubfe]::before      { background: linear-gradient(90deg, var(--violet-9), var(--violet-5)); }

/* Per-card spring-tinted backgrounds */
.kpi-card--emissions[b-lmwp0lubfe] { background: linear-gradient(160deg, #fff5f7 0%, var(--color-surface-1) 55%); }
.kpi-card--net[b-lmwp0lubfe]       { background: linear-gradient(160deg, #f0fdfa 0%, var(--color-surface-1) 55%); }
.kpi-card--offsets[b-lmwp0lubfe]   { background: linear-gradient(160deg, #f0fdf4 0%, var(--color-surface-1) 55%); }
.kpi-card--certs[b-lmwp0lubfe]     { background: linear-gradient(160deg, #faf5ff 0%, var(--color-surface-1) 55%); }

.kpi-card:hover[b-lmwp0lubfe] {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.10), 0 2px 8px rgba(15, 118, 110, 0.06);
  border-color: var(--color-border-default);
}

.kpi-card__icon-badge[b-lmwp0lubfe] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-lg);
  flex-shrink: 0;
}

.kpi-card__icon-badge--error[b-lmwp0lubfe]   { background: var(--color-error-bg);   color: var(--color-error-solid); }
.kpi-card__icon-badge--teal[b-lmwp0lubfe]    { background: var(--teal-1);           color: var(--teal-9); }
.kpi-card__icon-badge--success[b-lmwp0lubfe] { background: var(--color-accent-subtle);   color: var(--color-accent); }
.kpi-card__icon-badge--violet[b-lmwp0lubfe]  { background: var(--violet-3); color: var(--violet-9); }

.kpi-card__body[b-lmwp0lubfe] {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
}

.kpi-card__label[b-lmwp0lubfe] {
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-secondary);
}

.kpi-card__value[b-lmwp0lubfe] {
  font-size: var(--text-xl);
  font-weight: 700;
  letter-spacing: var(--tracking-tight);
  color: var(--color-text-primary);
  line-height: 1.15;
}

.kpi-card__unit[b-lmwp0lubfe] {
  font-size: var(--text-xs);
  color: var(--color-text-secondary);
  margin-top: 1px;
}

.kpi-card__chip[b-lmwp0lubfe] {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: var(--text-xs);
  font-weight: 500;
  align-self: flex-start;
}

.kpi-card__chip--bad[b-lmwp0lubfe]     { background: var(--color-error-bg);  color: var(--color-error-solid); }
.kpi-card__chip--good[b-lmwp0lubfe]    { background: var(--color-accent-subtle);  color: var(--color-accent); }
.kpi-card__chip--neutral[b-lmwp0lubfe] { background: var(--color-bg-subtle); color: var(--color-text-secondary); }

.kpi-card__sub[b-lmwp0lubfe] {
  font-size: var(--text-xs);
  color: var(--color-text-secondary);
  align-self: flex-start;
}
.kpi-card__sub--warning[b-lmwp0lubfe] { color: var(--color-warning-solid); }

.kpi-card__link[b-lmwp0lubfe] {
  padding: 0 !important;
  min-width: 0 !important;
  font-size: var(--text-xs) !important;
  color: var(--color-accent-text) !important;
  align-self: flex-start;
  height: auto !important;
}

/* ── Shared card base ─────────────────────────────────────────────────────────── */
.dash-card[b-lmwp0lubfe] {
  background: var(--color-surface-1);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-xl);
  padding: var(--space-content);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  /* EQUAL HEIGHT: must fill CSS grid cell; grid default align-items:stretch handles row equalization */
  height: 100%;
  box-sizing: border-box;
  box-shadow: 0 2px 12px rgba(15, 23, 42, 0.05), 0 1px 3px rgba(15, 23, 42, 0.04);
  transition: box-shadow var(--transition-interactive);
}
.dash-card:hover[b-lmwp0lubfe] {
  box-shadow: 0 6px 24px rgba(15, 23, 42, 0.09), 0 2px 6px rgba(15, 118, 110, 0.05);
}

.dash-card__header[b-lmwp0lubfe] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.dash-card__title[b-lmwp0lubfe] {
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--color-text-primary);
  letter-spacing: var(--tracking-tight);
}

.dash-card__period[b-lmwp0lubfe] {
  /* Badge-style period label: visually separates subtitle from title */
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--color-text-secondary);
  display: inline-block;
  background: var(--color-bg-component);
  border-radius: 999px;
  padding: 2px 10px;
  border: 1px solid var(--color-border-subtle);
  margin-top: 3px;
  letter-spacing: var(--tracking-wide);
}

.dash-card__view-all[b-lmwp0lubfe] {
  font-size: var(--text-xs) !important;
  color: var(--color-accent-text) !important;
  padding: 0 !important;
  height: auto !important;
  min-width: 0 !important;
}

/* ── Charts Row ───────────────────────────────────────────────────────────────── */
/* EQUAL HEIGHT: align-items defaults to stretch — both cards fill the same row height */
.charts-row[b-lmwp0lubfe] {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: var(--space-4);
  align-items: stretch;
}

@media (max-width: 1279px) { .charts-row[b-lmwp0lubfe] { grid-template-columns: 1fr 300px; } }
@media (max-width: 959px)  { .charts-row[b-lmwp0lubfe] { grid-template-columns: 1fr; } }

/* Force equal-height at md breakpoint too */
@media (max-width: 959px) {
  .charts-row[b-lmwp0lubfe] { align-items: start; }  /* stacked: no need for equal height */
  .dash-card[b-lmwp0lubfe] { height: auto; }         /* stacked: content-driven height is fine */
}

/* Period tabs */
.period-tabs[b-lmwp0lubfe] {
  display: flex;
  gap: 2px;
  background: var(--color-bg-subtle);
  border-radius: var(--radius-md);
  padding: 3px;
}

.period-tab[b-lmwp0lubfe] {
  padding: 5px 14px;
  font-size: var(--text-xs);
  font-weight: 500;
  border: none;
  background: transparent;
  border-radius: calc(var(--radius-md) - 2px);
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: background var(--transition-interactive),
              color var(--transition-interactive);
}

.period-tab:hover[b-lmwp0lubfe] { color: var(--color-text-primary); background: rgba(255,255,255,0.6); }

.period-tab--active[b-lmwp0lubfe] {
  background: var(--color-surface-1);
  color: var(--color-text-primary);
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.08);
}

/* Trend chart area — flex:1 ensures it fills remaining card height for equal-height rows */
.chart-placeholder[b-lmwp0lubfe] {
  min-height: 220px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  flex: 1;
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(240, 253, 250, 0.40) 0%, transparent 100%);
  padding: var(--space-3);
  margin: 0 calc(-1 * var(--space-2));
}

.chart-sparkline-area[b-lmwp0lubfe] {
  width: 100%;
  height: 240px;
  display: flex;
  align-items: flex-end;
  gap: 6px;
  padding-bottom: var(--space-2);
}

.sparkline-bar-wrap[b-lmwp0lubfe] {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  height: 100%;
  justify-content: flex-end;
}

.sparkline-bar[b-lmwp0lubfe] {
  width: 100%;
  min-height: 4px;
  background: linear-gradient(to top, var(--spring-moss-solid), var(--teal-4));
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  opacity: 0.70;
  transition: opacity var(--transition-interactive), height var(--transition-reveal);
  box-shadow: 0 2px 6px rgba(90, 138, 96, 0.30);
}

.sparkline-bar-wrap:hover .sparkline-bar[b-lmwp0lubfe] {
  opacity: 1;
  background: linear-gradient(to top, var(--color-accent), var(--teal-3));
}

.sparkline-label[b-lmwp0lubfe] {
  font-size: 10px;
  color: var(--color-text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* Empty state */
.chart-empty[b-lmwp0lubfe] {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  min-height: 220px;
  width: 100%;
  color: var(--color-text-secondary);
}
.chart-empty--sm[b-lmwp0lubfe] { min-height: 100px; }

.chart-empty__icon[b-lmwp0lubfe] {
  font-size: 48px !important;
  color: var(--color-border-default);
  opacity: 0.6;
}

.chart-empty__text[b-lmwp0lubfe] {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
}

/* ── Scope Breakdown ring ─────────────────────────────────────────────────────── */
.scope-ring-wrap[b-lmwp0lubfe] {
  display: flex;
  justify-content: center;
  padding: var(--space-3) 0;
}

.scope-ring[b-lmwp0lubfe] {
  width: 168px;
  height: 168px;
  border-radius: 50%;
  position: relative;
  background: conic-gradient(
    var(--color-accent)  0%  var(--s1),
    var(--color-info-solid)   var(--s1) calc(var(--s1) + var(--s2)),
    var(--color-warning-solid) calc(var(--s1) + var(--s2)) 100%
  );
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 20px rgba(15, 23, 42, 0.10);
}

.scope-ring[b-lmwp0lubfe]::before {
  content: '';
  position: absolute;
  width: 110px;
  height: 110px;
  border-radius: 50%;
  background: var(--color-surface-1);
}

.scope-ring__hole[b-lmwp0lubfe] {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}

.scope-ring__total[b-lmwp0lubfe] {
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--color-text-primary);
  line-height: 1.1;
}

.scope-ring__unit[b-lmwp0lubfe] {
  font-size: 10px;
  color: var(--color-text-secondary);
  font-weight: 400;
}

/* Scope legend */
.scope-legend[b-lmwp0lubfe] {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.scope-legend-item[b-lmwp0lubfe] {
  display: grid;
  grid-template-columns: 10px 68px 1fr 36px;
  align-items: center;
  gap: var(--space-2);
}

.scope-legend-dot[b-lmwp0lubfe] {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.scope-legend-dot--1[b-lmwp0lubfe] { background: var(--color-accent); }
.scope-legend-dot--2[b-lmwp0lubfe] { background: var(--color-info-solid); }
.scope-legend-dot--3[b-lmwp0lubfe] { background: var(--color-warning-solid); }

.scope-legend-name[b-lmwp0lubfe] {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  white-space: nowrap;
}

.scope-legend-bar-wrap[b-lmwp0lubfe] {
  height: 6px;
  background: var(--color-bg-component);
  border-radius: 999px;
  overflow: hidden;
}

.scope-legend-bar[b-lmwp0lubfe] {
  height: 100%;
  border-radius: 999px;
  transition: width var(--transition-elaborate);
}
.scope-legend-bar--1[b-lmwp0lubfe] { background: var(--color-accent); }
.scope-legend-bar--2[b-lmwp0lubfe] { background: var(--color-info-solid); }
.scope-legend-bar--3[b-lmwp0lubfe] { background: var(--color-warning-solid); }

.scope-legend-pct[b-lmwp0lubfe] {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-text-primary);
  text-align: right;
}

/* ── Bottom Row ────────────────────────────────────────────────────────────────── */
/* EQUAL HEIGHT: align-items:stretch makes Recent Activity and Quick Actions the same height */
.bottom-row[b-lmwp0lubfe] {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: var(--space-4);
  align-items: stretch;
}

@media (max-width: 1279px) { .bottom-row[b-lmwp0lubfe] { grid-template-columns: 1fr 300px; } }
@media (max-width: 959px)  {
  .bottom-row[b-lmwp0lubfe] {
    grid-template-columns: 1fr;
    align-items: start;  /* stacked: content-driven */
  }
}

/* ── Activity Timeline ─────────────────────────────────────────────────────────── */
.activity-header-left[b-lmwp0lubfe] {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.activity-count-chip[b-lmwp0lubfe] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 7px;
  border-radius: 999px;
  background: var(--color-accent-subtle);
  color: var(--color-accent-text);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0;
}

.activity-timeline[b-lmwp0lubfe] {
  display: flex;
  flex-direction: column;
  gap: 0;
  flex: 1;
}

.activity-entry[b-lmwp0lubfe] {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: var(--space-3);
  align-items: start;
  padding: var(--space-2);
  border-radius: var(--radius-lg);
  transition: background var(--transition-interactive);
  animation: entrySlideIn-b-lmwp0lubfe 0.35s ease-out both;
  animation-delay: calc(var(--entry-i) * 60ms);
}

.activity-entry:hover[b-lmwp0lubfe] {
  background: var(--color-bg-subtle);
}

@keyframes entrySlideIn-b-lmwp0lubfe {
  from { opacity: 0; transform: translateX(-6px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* Left column: icon badge + connecting thread */
.activity-entry__track[b-lmwp0lubfe] {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}

.activity-entry__icon-wrap[b-lmwp0lubfe] {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
  transition: transform var(--transition-interactive), box-shadow var(--transition-interactive);
  background: var(--color-bg-subtle);
  color: var(--color-text-secondary);
}

.activity-entry:hover .activity-entry__icon-wrap[b-lmwp0lubfe] {
  transform: scale(1.08);
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.12);
}

.activity-entry__icon[b-lmwp0lubfe] { font-size: 15px !important; }

/* Per-type icon badge colours */
.activity-entry__icon-wrap--calculationcompleted[b-lmwp0lubfe] { background: var(--color-accent-subtle); color: var(--color-accent); }
.activity-entry__icon-wrap--approvalrequired[b-lmwp0lubfe]      { background: var(--color-warning-bg);    color: var(--color-warning-solid); }
.activity-entry__icon-wrap--certificateissued[b-lmwp0lubfe]     { background: var(--violet-3);            color: var(--violet-9); }
.activity-entry__icon-wrap--deadlineapproaching[b-lmwp0lubfe]   { background: var(--color-error-bg);      color: var(--color-error-solid); }
.activity-entry__icon-wrap--offsetretired[b-lmwp0lubfe]         { background: #e8f5e9;                    color: var(--spring-moss-solid); }
.activity-entry__icon-wrap--dataimported[b-lmwp0lubfe]          { background: var(--spring-sky-bg);       color: var(--spring-sky-solid); }
.activity-entry__icon-wrap--reportgenerated[b-lmwp0lubfe]       { background: var(--color-info-bg);       color: var(--color-info-solid); }
.activity-entry__icon-wrap--useraction[b-lmwp0lubfe]            { background: var(--color-bg-component);  color: var(--color-text-secondary); }

/* Vertical connector thread */
.activity-entry__thread[b-lmwp0lubfe] {
  width: 2px;
  flex: 1;
  min-height: 14px;
  background: linear-gradient(to bottom, var(--color-border-subtle), transparent);
  margin-top: 4px;
  border-radius: 1px;
}

/* Right column */
.activity-entry__content[b-lmwp0lubfe] {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding-top: 5px;
  padding-bottom: var(--space-3);
}

.activity-entry__headline[b-lmwp0lubfe] {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.activity-entry__desc[b-lmwp0lubfe] {
  font-size: var(--text-sm);
  color: var(--color-text-primary);
  line-height: var(--leading-body);
  flex: 1;
  min-width: 0;
}

.activity-entry__tag[b-lmwp0lubfe] {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: var(--radius-md);
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
  flex-shrink: 0;
  border: 1px solid transparent;
  background: var(--color-bg-subtle);
  color: var(--color-text-secondary);
  border-color: var(--color-border-subtle);
}

/* Per-type tag colours */
.activity-entry__tag--calculationcompleted[b-lmwp0lubfe] { background: var(--color-accent-subtle); color: var(--color-accent-text); border-color: rgba(20,184,166,0.25); }
.activity-entry__tag--approvalrequired[b-lmwp0lubfe]     { background: var(--color-warning-bg);    color: var(--color-warning-solid); border-color: rgba(245,158,11,0.25); }
.activity-entry__tag--certificateissued[b-lmwp0lubfe]    { background: var(--violet-3);            color: var(--violet-9);            border-color: rgba(124,58,237,0.20); }
.activity-entry__tag--deadlineapproaching[b-lmwp0lubfe]  { background: var(--color-error-bg);      color: var(--color-error-solid);   border-color: rgba(220,38,38,0.20); }
.activity-entry__tag--offsetretired[b-lmwp0lubfe]        { background: #e8f5e9;                    color: var(--spring-moss-solid);   border-color: rgba(90,138,96,0.25); }
.activity-entry__tag--dataimported[b-lmwp0lubfe]         { background: var(--spring-sky-bg);       color: var(--spring-sky-solid);    border-color: rgba(43,127,188,0.22); }
.activity-entry__tag--reportgenerated[b-lmwp0lubfe]      { background: var(--color-info-bg);       color: var(--color-info-solid);    border-color: rgba(59,130,246,0.20); }

.activity-entry__time[b-lmwp0lubfe] {
  font-size: 11px;
  color: var(--color-text-secondary);
  font-variant-numeric: tabular-nums;
}

/* ── Action Cards ───────────────────────────────────────────────────────────────── */
.action-grid[b-lmwp0lubfe] {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  flex: 1;
}

.action-card[b-lmwp0lubfe] {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-xl);
  border: 1px solid transparent;
  cursor: pointer;
  background: none;
  font-family: var(--font-sans);
  text-align: left;
  overflow: hidden;
  transition: transform var(--transition-interactive),
              box-shadow var(--transition-interactive),
              border-color var(--transition-interactive),
              background var(--transition-interactive);
}

.action-card:hover[b-lmwp0lubfe] {
  transform: translateY(-2px) translateX(2px);
  box-shadow: 0 8px 28px rgba(15, 23, 42, 0.11), 0 2px 8px rgba(15, 23, 42, 0.06);
}

.action-card:active[b-lmwp0lubfe] {
  transform: translateY(0) translateX(0);
  transition-duration: 80ms;
}

/* Ambient glow behind icon */
.action-card__glow[b-lmwp0lubfe] {
  position: absolute;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  left: -8px;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0;
  transition: opacity var(--transition-interactive);
  pointer-events: none;
  filter: blur(20px);
}
.action-card:hover .action-card__glow[b-lmwp0lubfe] { opacity: 0.55; }

/* Icon ring */
.action-card__icon-ring[b-lmwp0lubfe] {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
  transition: transform var(--transition-interactive);
}
.action-card:hover .action-card__icon-ring[b-lmwp0lubfe] { transform: scale(1.10); }

.action-card__icon[b-lmwp0lubfe] { font-size: 20px !important; }

/* Text */
.action-card__text[b-lmwp0lubfe] {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}

.action-card__label[b-lmwp0lubfe] {
  font-size: var(--text-sm);
  font-weight: 600;
  color: inherit;
  letter-spacing: var(--tracking-tight);
  line-height: 1.2;
}

.action-card__sub[b-lmwp0lubfe] {
  font-size: var(--text-xs);
  opacity: 0.68;
  color: inherit;
  line-height: 1.3;
}

/* Chevron */
.action-card__arrow[b-lmwp0lubfe] {
  font-size: 18px !important;
  opacity: 0.38;
  flex-shrink: 0;
  transition: transform var(--transition-interactive), opacity var(--transition-interactive);
}
.action-card:hover .action-card__arrow[b-lmwp0lubfe] { transform: translateX(4px); opacity: 0.78; }

/* Per-variant colours */
.action-card--emission[b-lmwp0lubfe] {
  background: linear-gradient(135deg, var(--spring-rose-bg) 0%, #fff8fa 100%);
  border-color: rgba(232, 160, 180, 0.48);
  color: var(--spring-rose-solid);
}
.action-card--emission .action-card__icon-ring[b-lmwp0lubfe] { background: rgba(160, 51, 88, 0.10); }
.action-card--emission .action-card__glow[b-lmwp0lubfe]      { background: var(--spring-rose-mid); }
.action-card--emission:hover[b-lmwp0lubfe] { border-color: var(--spring-rose-mid); background: linear-gradient(135deg, #fde8ef 0%, var(--spring-rose-bg) 100%); }

.action-card--import[b-lmwp0lubfe] {
  background: linear-gradient(135deg, #f0fdf4 0%, var(--spring-moss-bg) 100%);
  border-color: rgba(193, 217, 195, 0.52);
  color: var(--spring-moss-solid);
}
.action-card--import .action-card__icon-ring[b-lmwp0lubfe] { background: rgba(90, 138, 96, 0.12); }
.action-card--import .action-card__glow[b-lmwp0lubfe]      { background: var(--spring-moss-mid); }
.action-card--import:hover[b-lmwp0lubfe] { border-color: var(--spring-moss-mid); background: linear-gradient(135deg, var(--spring-moss-bg) 0%, #d8eddb 100%); }

.action-card--offset[b-lmwp0lubfe] {
  background: linear-gradient(135deg, var(--teal-1) 0%, #edfaf8 100%);
  border-color: rgba(153, 246, 228, 0.52);
  color: var(--teal-9);
}
.action-card--offset .action-card__icon-ring[b-lmwp0lubfe] { background: rgba(13, 148, 136, 0.12); }
.action-card--offset .action-card__glow[b-lmwp0lubfe]      { background: var(--teal-5); }
.action-card--offset:hover[b-lmwp0lubfe] { border-color: var(--teal-5); background: linear-gradient(135deg, #d0f7f2 0%, var(--teal-1) 100%); }

.action-card--report[b-lmwp0lubfe] {
  background: linear-gradient(135deg, var(--spring-violet-bg) 0%, #f5f0ff 100%);
  border-color: rgba(196, 181, 245, 0.48);
  color: var(--spring-violet-solid);
}
.action-card--report .action-card__icon-ring[b-lmwp0lubfe] { background: rgba(91, 33, 182, 0.10); }
.action-card--report .action-card__glow[b-lmwp0lubfe]      { background: var(--spring-violet-mid); }
.action-card--report:hover[b-lmwp0lubfe] { border-color: var(--spring-violet-mid); background: linear-gradient(135deg, #ede8ff 0%, var(--spring-violet-bg) 100%); }

/* ── Footer ────────────────────────────────────────────────────────────────────── */
.dash-footer[b-lmwp0lubfe] {
  font-size: var(--text-xs);
  color: var(--color-text-secondary);
  text-align: center;
  margin: 0;
  padding-top: var(--space-2);
}

/* ── Dark mode ─────────────────────────────────────────────────────────────────── */
[data-theme="dark"] .dash-hero[b-lmwp0lubfe] {
  background: linear-gradient(
    130deg,
    rgba(10, 45, 40, 0.75)  0%,
    rgba(15, 38, 28, 0.65) 30%,
    rgba(14, 20, 40, 0.55) 65%,
    rgba(25, 18, 38, 0.50) 100%
  );
  border-color: rgba(45, 212, 191, 0.12);
}

[data-theme="dark"] .dash-hero__status-pill[b-lmwp0lubfe] {
  background: rgba(255,255,255,0.08);
  color: var(--teal-4);
  border-color: rgba(255,255,255,0.12);
}

[data-theme="dark"] .period-tab--active[b-lmwp0lubfe] {
  background: var(--color-surface-3);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .scope-ring[b-lmwp0lubfe] {
  background: conic-gradient(
    #5A8A60  0%  var(--s1),
    #2B7FBC  var(--s1) calc(var(--s1) + var(--s2)),
    #A05C0A  calc(var(--s1) + var(--s2)) 100%
  );
}

[data-theme="dark"] .scope-ring[b-lmwp0lubfe]::before { background: var(--color-surface-2); }

[data-theme="dark"] .dashboard-root[b-lmwp0lubfe] {
  background:
    radial-gradient(ellipse 130% 55% at 60% 0%, rgba(13, 80, 72, 0.18) 0%, transparent 55%),
    radial-gradient(ellipse 90% 40% at 5% 80%, rgba(30, 20, 60, 0.12) 0%, transparent 55%);
}

[data-theme="dark"] .kpi-card--emissions[b-lmwp0lubfe] { background: linear-gradient(160deg, rgba(160, 51, 88, 0.08) 0%, var(--color-surface-2) 55%); }
[data-theme="dark"] .kpi-card--net[b-lmwp0lubfe]       { background: linear-gradient(160deg, rgba(13, 148, 136, 0.10) 0%, var(--color-surface-2) 55%); }
[data-theme="dark"] .kpi-card--offsets[b-lmwp0lubfe]   { background: linear-gradient(160deg, rgba(90, 138, 96, 0.10) 0%, var(--color-surface-2) 55%); }
[data-theme="dark"] .kpi-card--certs[b-lmwp0lubfe]     { background: linear-gradient(160deg, rgba(91, 33, 182, 0.10) 0%, var(--color-surface-2) 55%); }

[data-theme="dark"] .chart-placeholder[b-lmwp0lubfe] { background: linear-gradient(180deg, rgba(13, 80, 72, 0.15) 0%, transparent 100%); }

/* Dark mode: Activity timeline */
[data-theme="dark"] .activity-count-chip[b-lmwp0lubfe] { background: rgba(20,184,166,0.15); color: var(--teal-4); }
[data-theme="dark"] .activity-entry:hover[b-lmwp0lubfe] { background: rgba(255,255,255,0.04); }
[data-theme="dark"] .activity-entry__icon-wrap--calculationcompleted[b-lmwp0lubfe] { background: rgba(20,184,166,0.15);  color: var(--teal-4); }
[data-theme="dark"] .activity-entry__icon-wrap--approvalrequired[b-lmwp0lubfe]     { background: rgba(245,158,11,0.12);  color: #FCD34D; }
[data-theme="dark"] .activity-entry__icon-wrap--certificateissued[b-lmwp0lubfe]    { background: rgba(124,58,237,0.15); color: #C4B5FD; }
[data-theme="dark"] .activity-entry__icon-wrap--deadlineapproaching[b-lmwp0lubfe]  { background: rgba(220,38,38,0.12);  color: #FCA5A5; }
[data-theme="dark"] .activity-entry__icon-wrap--offsetretired[b-lmwp0lubfe]        { background: rgba(90,138,96,0.15);  color: #88C98E; }
[data-theme="dark"] .activity-entry__icon-wrap--dataimported[b-lmwp0lubfe]         { background: rgba(43,127,188,0.15); color: #93C5FD; }
[data-theme="dark"] .activity-entry__icon-wrap--reportgenerated[b-lmwp0lubfe]      { background: rgba(59,130,246,0.15); color: #93C5FD; }
[data-theme="dark"] .activity-entry__tag--calculationcompleted[b-lmwp0lubfe] { background: rgba(20,184,166,0.12);  color: var(--teal-4); border-color: rgba(20,184,166,0.22); }
[data-theme="dark"] .activity-entry__tag--approvalrequired[b-lmwp0lubfe]     { background: rgba(245,158,11,0.10);  color: #FCD34D;       border-color: rgba(245,158,11,0.22); }
[data-theme="dark"] .activity-entry__tag--certificateissued[b-lmwp0lubfe]    { background: rgba(124,58,237,0.12); color: #C4B5FD;        border-color: rgba(124,58,237,0.22); }
[data-theme="dark"] .activity-entry__tag--deadlineapproaching[b-lmwp0lubfe]  { background: rgba(220,38,38,0.10);  color: #FCA5A5;        border-color: rgba(220,38,38,0.20); }
[data-theme="dark"] .activity-entry__tag--offsetretired[b-lmwp0lubfe]        { background: rgba(90,138,96,0.12);  color: #88C98E;        border-color: rgba(90,138,96,0.22); }
[data-theme="dark"] .activity-entry__tag--dataimported[b-lmwp0lubfe]         { background: rgba(43,127,188,0.12); color: #93C5FD;        border-color: rgba(43,127,188,0.22); }
[data-theme="dark"] .activity-entry__tag--reportgenerated[b-lmwp0lubfe]      { background: rgba(59,130,246,0.12); color: #93C5FD;        border-color: rgba(59,130,246,0.22); }

/* Dark mode: Action Cards */
[data-theme="dark"] .action-card--emission[b-lmwp0lubfe] { background: rgba(160,51,88,0.12);  border-color: rgba(160,51,88,0.28);  color: #F5A0BB; }
[data-theme="dark"] .action-card--emission:hover[b-lmwp0lubfe] { background: rgba(160,51,88,0.18); border-color: rgba(160,51,88,0.44); }
[data-theme="dark"] .action-card--emission .action-card__icon-ring[b-lmwp0lubfe] { background: rgba(160,51,88,0.20); }
[data-theme="dark"] .action-card--import[b-lmwp0lubfe]   { background: rgba(90,138,96,0.12);  border-color: rgba(90,138,96,0.28);  color: #88C98E; }
[data-theme="dark"] .action-card--import:hover[b-lmwp0lubfe]   { background: rgba(90,138,96,0.18); border-color: rgba(90,138,96,0.44); }
[data-theme="dark"] .action-card--import   .action-card__icon-ring[b-lmwp0lubfe] { background: rgba(90,138,96,0.20); }
[data-theme="dark"] .action-card--offset[b-lmwp0lubfe]   { background: rgba(13,148,136,0.12); border-color: rgba(13,148,136,0.28); color: var(--teal-4); }
[data-theme="dark"] .action-card--offset:hover[b-lmwp0lubfe]   { background: rgba(13,148,136,0.18); border-color: rgba(13,148,136,0.44); }
[data-theme="dark"] .action-card--offset   .action-card__icon-ring[b-lmwp0lubfe] { background: rgba(13,148,136,0.20); }
[data-theme="dark"] .action-card--report[b-lmwp0lubfe]   { background: rgba(91,33,182,0.12);  border-color: rgba(91,33,182,0.28);  color: #C4B5FD; }
[data-theme="dark"] .action-card--report:hover[b-lmwp0lubfe]   { background: rgba(91,33,182,0.18); border-color: rgba(91,33,182,0.44); }
[data-theme="dark"] .action-card--report   .action-card__icon-ring[b-lmwp0lubfe] { background: rgba(91,33,182,0.20); }

[data-theme="dark"] .kpi-card__icon-badge--error[b-lmwp0lubfe]   { background: rgba(160,51,88,0.18); }
[data-theme="dark"] .kpi-card__icon-badge--teal[b-lmwp0lubfe]    { background: rgba(45,212,191,0.12); }
[data-theme="dark"] .kpi-card__icon-badge--success[b-lmwp0lubfe] { background: rgba(90,138,96,0.18); }
[data-theme="dark"] .kpi-card__icon-badge--violet[b-lmwp0lubfe]  { background: rgba(91,33,182,0.20); }

/* Period badge in dark mode: use dark component bg + dark border */
[data-theme="dark"] .dash-card__period[b-lmwp0lubfe] {
  background: var(--color-bg-hover);
  border-color: var(--color-border-default);
  color: var(--color-text-secondary);
}
/* _content/AlchemosPositive.Portal/Features/DataIntegrations/DatabaseConnections.razor.rz.scp.css */
/* ══════════════════════════════════════════════════════════════
   DatabaseConnections.razor.css — AlchemOS Positive Style Contract v1.0
   ══════════════════════════════════════════════════════════════ */

[b-hn2ktbvrd6] .mud-typography {
    background-color: transparent !important;
}

.dbc-root[b-hn2ktbvrd6] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    padding-bottom: var(--space-8);
}

/* ── Empty State ──────────────────────────────────────────────── */
.dbc-empty-state[b-hn2ktbvrd6] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-12);
    border: 1px dashed var(--color-border-default) !important;
    border-radius: var(--radius-lg) !important;
    background-color: var(--color-bg-subtle) !important;
    text-align: center;
}

.dbc-empty-icon[b-hn2ktbvrd6] {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--color-accent-subtle);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--space-3);
}

.dbc-empty-icon .mud-icon-root[b-hn2ktbvrd6] {
    font-size: 2rem !important;
    color: var(--color-accent) !important;
}

/* ── Connection Card ─────────────────────────────────────────── */
[b-hn2ktbvrd6] .dbc-card {
    background-color: var(--color-surface-2) !important;
    border: 1px solid var(--color-border-subtle) !important;
    border-radius: var(--radius-lg) !important;
    padding: var(--space-4) !important;
    height: 100%;
    display: flex !important;
    flex-direction: column !important;
    gap: var(--space-3);
    transition: border-color var(--transition-interactive), box-shadow var(--transition-interactive);
}

[b-hn2ktbvrd6] .dbc-card:hover {
    border-color: var(--teal-6) !important;
    box-shadow: 0 4px 16px rgba(15, 118, 110, 0.08) !important;
}

.dbc-card-header[b-hn2ktbvrd6] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.dbc-card-icon[b-hn2ktbvrd6] {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-md);
    background: var(--color-accent-subtle);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.dbc-card-icon .mud-icon-root[b-hn2ktbvrd6] {
    font-size: 1.25rem !important;
    color: var(--color-accent) !important;
}

.dbc-card-icon--sqlserver[b-hn2ktbvrd6] {
    background: rgba(0, 120, 215, 0.1);
}

.dbc-card-icon--sqlserver .mud-icon-root[b-hn2ktbvrd6] {
    color: #0078D7 !important;
}

.dbc-card-icon--mysql[b-hn2ktbvrd6] {
    background: rgba(0, 114, 177, 0.1);
}

.dbc-card-title-group[b-hn2ktbvrd6] {
    flex: 1;
    min-width: 0;
}

.dbc-card-title[b-hn2ktbvrd6] {
    font-size: var(--text-base) !important;
    font-weight: 600 !important;
    color: var(--color-text-primary) !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dbc-provider-badge[b-hn2ktbvrd6] {
    display: inline-block;
    font-size: var(--text-xs);
    font-weight: 500;
    color: var(--color-accent-text);
    background: var(--color-accent-subtle);
    padding: 2px 8px;
    border-radius: var(--radius-sm);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
}

/* ── Card Body ─────────────────────────────────────────────────── */
.dbc-card-body[b-hn2ktbvrd6] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    flex: 1;
}

.dbc-info-row[b-hn2ktbvrd6] {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
}

.dbc-info-label[b-hn2ktbvrd6] {
    font-size: var(--text-xs);
    font-weight: 500;
    color: var(--color-text-secondary);
    min-width: 70px;
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
}

.dbc-info-value[b-hn2ktbvrd6] {
    font-size: var(--text-sm);
    color: var(--color-text-primary);
    font-family: ui-monospace, 'Cascadia Code', 'Fira Code', monospace;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── Card Footer ───────────────────────────────────────────────── */
.dbc-card-footer[b-hn2ktbvrd6] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: var(--space-2);
    border-top: 1px solid var(--color-border-subtle);
}

.dbc-test-status[b-hn2ktbvrd6] {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    font-size: var(--text-xs);
}

.dbc-test-status--ok[b-hn2ktbvrd6] {
    color: var(--color-success-text);
}

.dbc-test-status--fail[b-hn2ktbvrd6] {
    color: var(--color-error-text);
}

.dbc-test-status--unknown[b-hn2ktbvrd6] {
    color: var(--color-text-secondary);
}

.dbc-menu-danger[b-hn2ktbvrd6] {
    color: var(--color-error-text) !important;
}
/* _content/AlchemosPositive.Portal/Features/DataIntegrations/DataImport.razor.rz.scp.css */
/* ══════════════════════════════════════════════════════════════
   DataImport.razor.css — AlchemOS Positive Style Contract v1.0
   Archetype 3 (hybrid List + Upload methods)
   §7.3.2 transparency fix | §0.2 Typo-first | §7.3.1 equal-height cards
   ══════════════════════════════════════════════════════════════ */

/* §7.3.2 — Defeat global background-color injection on MudText */
[b-jje5niulqd] .mud-typography {
    background-color: transparent !important;
}

/* ══ §1 — Page Root ══════════════════════════════════════════════ */
.di-root[b-jje5niulqd] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    padding-bottom: var(--space-8);
    animation: diFadeIn-b-jje5niulqd var(--transition-reveal) ease-out both;
}

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

/* ══ §2 — Hero Icon Wrap ════════════════════════════════════════ */
.di-hero-icon-wrap[b-jje5niulqd] {
    width: 72px;
    height: 72px;
    background: rgba(255, 255, 255, 0.55);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(196, 205, 214, 0.35);
    opacity: 0.6;
    flex-shrink: 0;
    pointer-events: none;
}

.di-hero-icon[b-jje5niulqd] {
    font-size: 2rem !important;
    color: var(--color-accent) !important;
}

@media (max-width: 599px) {
    .di-hero-icon-wrap[b-jje5niulqd] { display: none; }
}

/* ══ §3 — Import Method Cards Grid (§7.3.1 equal-height) ═══════ */
.di-methods-grid[b-jje5niulqd] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-4);
    align-items: stretch;
}

@media (max-width: 959px) {
    .di-methods-grid[b-jje5niulqd] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 599px) {
    .di-methods-grid[b-jje5niulqd] {
        grid-template-columns: 1fr;
    }
}

/* ══ §4 — Method Card ════════════════════════════════════════════ */
/* MudPaper spreads @attributes so b-xxxx reaches the div */
[b-jje5niulqd] .di-method-card {
    background-color: var(--color-surface-2) !important;
    border: 1px solid var(--color-border-subtle) !important;
    border-radius: var(--radius-lg) !important;
    padding: var(--space-6) !important;
    /* equal-height enforcement */
    height: 100%;
    min-height: 0;
    box-sizing: border-box;
    /* flex column so button stays at bottom */
    display: flex !important;
    flex-direction: column !important;
    align-items: center;
    text-align: center;
    gap: var(--space-3);
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05) !important;
    transition:
        border-color var(--transition-interactive),
        transform var(--transition-interactive),
        box-shadow var(--transition-interactive);
}

[b-jje5niulqd] .di-method-card:hover {
    border-color: var(--teal-6) !important;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(15, 118, 110, 0.10) !important;
}

/* ── Card: typography §0.2 Typo-first — color + spacing only ─── */
[b-jje5niulqd] .di-method-card .mud-typography-h6 {
    color: var(--color-text-primary);
    font-weight: 600;
    letter-spacing: var(--tracking-tight);
    margin: 0;
}

[b-jje5niulqd] .di-method-card .mud-typography-body2 {
    color: var(--color-text-secondary);
    line-height: var(--leading-body);
    margin: 0;
    flex: 1;                /* push button to bottom */
}

/* ── Card: button always full-width at bottom ──────────────────── */
[b-jje5niulqd] .di-method-card .mud-button-root {
    width: 100% !important;
    margin-top: auto;
}

/* ══ §5 — Method Card Icon Circles ══════════════════════════════ */
.di-method-icon[b-jje5niulqd] {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: transform var(--transition-interactive);
}

.di-method-icon .mud-icon-root[b-jje5niulqd] {
    font-size: 1.75rem !important;
}

[b-jje5niulqd] .di-method-card:hover .di-method-icon {
    transform: scale(1.08);
}

/* CSV — teal accent palette */
.di-method-icon--csv[b-jje5niulqd] {
    background-color: var(--color-accent-subtle);
}
.di-method-icon--csv .mud-icon-root[b-jje5niulqd] {
    color: var(--color-accent-text) !important;
}

/* API — info (sky) palette */
.di-method-icon--api[b-jje5niulqd] {
    background-color: var(--color-info-bg);
}
.di-method-icon--api .mud-icon-root[b-jje5niulqd] {
    color: var(--color-info-text) !important;
}

/* DB — success (jade) palette */
.di-method-icon--db[b-jje5niulqd] {
    background-color: var(--color-success-bg);
}
.di-method-icon--db .mud-icon-root[b-jje5niulqd] {
    color: var(--color-success-text) !important;
}

/* ══ §6 — Recent Imports Panel ══════════════════════════════════ */
[b-jje5niulqd] .di-table-panel {
    background-color: var(--color-surface-2) !important;
    border: 1px solid var(--color-border-subtle) !important;
    border-radius: var(--radius-lg) !important;
    overflow: hidden;
    box-shadow: none !important;
    padding: 0 !important;
}

/* ── Panel Header ────────────────────────────────────────────── */
.di-panel-header[b-jje5niulqd] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-3);
    padding: var(--space-4);
    border-bottom: 1px solid var(--color-border-subtle);
}

.di-panel-title[b-jje5niulqd] {
    color: var(--color-text-primary);
    font-weight: 600 !important;
    letter-spacing: var(--tracking-tight);
    margin: 0 !important;
    white-space: nowrap;
}

/* MudText on di-panel-title */
[b-jje5niulqd] .di-panel-title {
    color: var(--color-text-primary) !important;
    font-weight: 600 !important;
    letter-spacing: var(--tracking-tight) !important;
    margin: 0 !important;
}

/* ══ §7 — Filter Bar ════════════════════════════════════════════ */
.di-filter-bar[b-jje5niulqd] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    align-items: center;
    flex: 1;
    justify-content: flex-end;
    min-width: 0;
}

.di-filter-search[b-jje5niulqd] {
    flex: 1 1 180px;
    min-width: 160px;
    max-width: 260px;
}

.di-filter-select[b-jje5niulqd] {
    flex: 0 0 140px;
    min-width: 120px;
}

.di-filter-clear[b-jje5niulqd] {
    flex-shrink: 0;
}

@media (max-width: 599px) {
    .di-panel-header[b-jje5niulqd] {
        flex-direction: column;
        align-items: stretch;
    }
    .di-filter-bar[b-jje5niulqd] {
        justify-content: flex-start;
    }
    .di-filter-search[b-jje5niulqd] {
        max-width: 100%;
        flex: 1 1 100%;
    }
    .di-filter-select[b-jje5niulqd] {
        flex: 1 1 calc(50% - 4px);
        min-width: 0;
    }
}

/* ══ §8 — Table (Data Grid) ══════════════════════════════════════ */
[b-jje5niulqd] .di-data-grid .mud-table-root {
    border: none;
}

[b-jje5niulqd] .di-data-grid .mud-table-cell {
    border-bottom: 1px solid var(--color-border-subtle);
    vertical-align: middle;
    padding: 10px 16px;
}

/* ── Column header ──────────────────────────────────────────── */
[b-jje5niulqd] .di-col-header {
    background-color: var(--color-bg-subtle) !important;
    color: var(--color-text-secondary) !important;
    font-size: var(--text-xs) !important;
    font-weight: 600 !important;
    letter-spacing: var(--tracking-wide) !important;
    text-transform: uppercase !important;
    padding: 10px 16px !important;
    border-bottom: 1px solid var(--color-border-subtle) !important;
}

[b-jje5niulqd] .di-col-actions-header {
    text-align: right !important;
}

[b-jje5niulqd] .di-col-actions-cell {
    text-align: right !important;
}

/* ── Row hover ──────────────────────────────────────────────── */
[b-jje5niulqd] .di-data-grid .mud-table-row:hover .mud-table-cell {
    background-color: var(--color-bg-hover) !important;
    cursor: pointer;
}

/* ══ §9 — File Cell ══════════════════════════════════════════════ */
.di-file-cell[b-jje5niulqd] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.di-file-name[b-jje5niulqd] {
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--color-text-primary);
    line-height: var(--leading-tight);
    word-break: break-word;
}

.di-file-badges[b-jje5niulqd] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
}

/* ══ §10 — Type Chip (WCAG AA contrast verified) ════════════════ */
.di-type-chip[b-jje5niulqd] {
    display: inline-flex;
    align-items: center;
    height: 18px;
    padding: 0 6px;
    border-radius: var(--radius-sm);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    line-height: 1;
    white-space: nowrap;
    flex-shrink: 0;
}

/* CSV: teal-2 bg, teal-11 text — 7.2:1 ✓ WCAG AAA */
.di-type-chip--csv[b-jje5niulqd] {
    background-color: var(--color-accent-subtle);
    color: var(--teal-11);
    border: 1px solid rgba(15, 118, 110, 0.18);
}

/* Excel: success-50 bg, success-700 text — 5.1:1 ✓ WCAG AA */
.di-type-chip--excel[b-jje5niulqd] {
    background-color: var(--color-success-bg);
    color: var(--color-success-text);
    border: 1px solid var(--color-success-border);
}

/* ══ §11 — Status Chip (pill style, WCAG AA contrast) ══════════ */
.di-status-chip[b-jje5niulqd] {
    display: inline-flex;
    align-items: center;
    height: 20px;
    padding: 0 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: var(--tracking-wide);
    white-space: nowrap;
    flex-shrink: 0;
}

/* Completed: success-50 bg, success-700 text — 5.1:1 ✓ WCAG AA */
.di-status-chip--completed[b-jje5niulqd] {
    background-color: var(--color-success-bg);
    color: var(--color-success-text);
    border: 1px solid var(--color-success-border);
}

/* Processing: info-50 bg, info-700 text — 5.0:1 ✓ WCAG AA */
.di-status-chip--processing[b-jje5niulqd] {
    background-color: var(--color-info-bg);
    color: var(--color-info-text);
    border: 1px solid var(--color-info-border);
}

/* Failed: error-50 bg, error-700 text — 5.8:1 ✓ WCAG AA */
.di-status-chip--failed[b-jje5niulqd] {
    background-color: var(--color-error-bg);
    color: var(--color-error-text);
    border: 1px solid var(--color-error-border);
}

/* Partial: warning-50 bg, warning-700 text — 4.9:1 ✓ WCAG AA */
.di-status-chip--partial[b-jje5niulqd] {
    background-color: var(--color-warning-bg);
    color: var(--color-warning-text);
    border: 1px solid var(--color-warning-border);
}

/* Default: slate component bg, secondary text */
.di-status-chip--default[b-jje5niulqd] {
    background-color: var(--color-bg-component);
    color: var(--color-text-secondary);
    border: 1px solid var(--color-border-subtle);
}

/* ══ §12 — Records Cell ══════════════════════════════════════════ */
.di-records-cell[b-jje5niulqd] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.di-records-value[b-jje5niulqd] {
    font-size: var(--text-sm);
    color: var(--color-text-primary);
    font-weight: 400;
    font-variant-numeric: tabular-nums;
}

.di-records-failed[b-jje5niulqd] {
    font-size: var(--text-xs);
    color: var(--color-error-text);
    font-weight: 500;
}

/* ══ §13 — Date Cell ════════════════════════════════════════════ */
.di-date-cell-wrap[b-jje5niulqd] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.di-date-text[b-jje5niulqd] {
    font-size: var(--text-sm);
    color: var(--color-text-primary);
    font-weight: 400;
    line-height: var(--leading-tight);
}

.di-time-text[b-jje5niulqd] {
    font-size: var(--text-xs);
    color: var(--color-text-secondary);
    font-weight: 400;
}

/* ══ §14 — Empty State ══════════════════════════════════════════ */
.di-empty-state[b-jje5niulqd] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-12) var(--space-content);
    text-align: center;
}

.di-empty-icon-wrap[b-jje5niulqd] {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background-color: var(--color-bg-component);
    border: 1px solid var(--color-border-subtle);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--space-2);
}

.di-empty-icon-wrap .mud-icon-root[b-jje5niulqd] {
    font-size: 1.5rem !important;
    color: var(--color-text-secondary) !important;
}

.di-empty-title[b-jje5niulqd] {
    color: var(--color-text-primary) !important;
    font-weight: 600 !important;
    margin: 0 !important;
}

.di-empty-sub[b-jje5niulqd] {
    color: var(--color-text-secondary) !important;
    max-width: 360px;
    line-height: var(--leading-relaxed) !important;
    margin: 0 !important;
}

/* ══ §15 — Pagination (bullet-dot fix, §7.12) ═══════════════════ */
[b-jje5niulqd] .di-data-grid .mud-pagination {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    gap: 2px;
    align-items: center;
}

[b-jje5niulqd] .di-data-grid .mud-pagination-item {
    list-style: none !important;
    display: flex !important;
    align-items: center;
}

/* ══ §16 — Templates Banner ═════════════════════════════════════ */
.di-templates-banner[b-jje5niulqd] {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    background-color: var(--color-info-bg);
    border: 1px solid var(--color-info-border);
    border-radius: var(--radius-lg);
    padding: var(--space-4) var(--space-6);
}

.di-templates-icon[b-jje5niulqd] {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-md);
    background-color: rgba(2, 132, 199, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.di-templates-icon .mud-icon-root[b-jje5niulqd] {
    color: var(--color-info-text) !important;
    font-size: 1.25rem !important;
}

.di-templates-body[b-jje5niulqd] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.di-templates-title[b-jje5niulqd] {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-text-primary);
    line-height: var(--leading-tight);
}

.di-templates-sub[b-jje5niulqd] {
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    line-height: var(--leading-body);
}

@media (max-width: 599px) {
    .di-templates-banner[b-jje5niulqd] {
        flex-direction: column;
        align-items: flex-start;
        padding: var(--space-4);
    }
    .di-templates-banner > .mud-button-root[b-jje5niulqd],
    .di-templates-banner[b-jje5niulqd]  .mud-button-root {
        width: 100% !important;
    }
}

/* ══ §17 — Responsive Column Visibility ════════════════════════ */
/* table-col-hide-xs and table-col-hide-sm are defined in app.css
   §10.12, overriding them here scoped to di-data-grid for safety */
@media (max-width: 599px) {
    [b-jje5niulqd] .di-data-grid .table-col-hide-xs {
        display: none !important;
    }
    /* Also hide the column header for xs-hidden columns */
    [b-jje5niulqd] .di-data-grid th.table-col-hide-xs {
        display: none !important;
    }
}

/* ══ §18 — Reduced Motion (§6 motion rules) ═════════════════════ */
@media (prefers-reduced-motion: reduce) {
    .di-root[b-jje5niulqd] {
        animation: none;
    }
    [b-jje5niulqd] .di-method-card,
    [b-jje5niulqd] .di-method-card:hover {
        transform: none;
        transition: none;
    }
    .di-method-icon[b-jje5niulqd] {
        transition: none;
    }
}

/* ══ §19 — Dark Mode Adjustments ════════════════════════════════ */
[data-theme="dark"] .di-hero-icon-wrap[b-jje5niulqd] {
    background: rgba(28, 37, 51, 0.6);
    border-color: rgba(57, 77, 98, 0.4);
}

[data-theme="dark"] .di-templates-banner[b-jje5niulqd] {
    background-color: rgba(7, 89, 133, 0.12);
    border-color: rgba(7, 89, 133, 0.3);
}

[data-theme="dark"] .di-templates-icon[b-jje5niulqd] {
    background-color: rgba(2, 132, 199, 0.18);
}

/* ══ §12 — Upload Panel ═══════════════════════════════════════════ */
[b-jje5niulqd] .di-upload-panel {
    border: 1px solid var(--color-border-default) !important;
    border-radius: var(--radius-lg) !important;
    padding: var(--space-6) !important;
    background-color: var(--color-surface-2) !important;
    animation: diFadeIn-b-jje5niulqd var(--transition-reveal) ease-out both;
}

.di-upload-panel-header[b-jje5niulqd] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-3);
}

.di-drop-zone[b-jje5niulqd] {
    border: 2px dashed var(--color-border-default);
    border-radius: var(--radius-md);
    padding: var(--space-8) var(--space-6);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    cursor: pointer;
    transition:
        border-color var(--transition-interactive),
        background-color var(--transition-interactive);
    text-align: center;
    min-height: 140px;
}

.di-drop-zone:hover[b-jje5niulqd] {
    border-color: var(--color-accent);
    background-color: var(--teal-1);
}

.di-drop-zone--selected[b-jje5niulqd] {
    border-color: var(--color-accent);
    background-color: var(--teal-1);
}

.di-drop-icon[b-jje5niulqd] {
    font-size: 2.5rem !important;
    color: var(--color-accent) !important;
    opacity: 0.8;
}

.di-drop-hint[b-jje5niulqd] {
    font-size: var(--text-base);
    color: var(--color-text-primary);
    font-weight: 500;
}

.di-drop-hint-sub[b-jje5niulqd],
.di-drop-size[b-jje5niulqd] {
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
}

.di-drop-filename[b-jje5niulqd] {
    font-size: var(--text-base);
    color: var(--color-accent-text);
    font-weight: 600;
    word-break: break-all;
}

.di-upload-panel-actions[b-jje5niulqd] {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-2);
}

.di-upload-result[b-jje5niulqd] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
}

.di-upload-result--ok[b-jje5niulqd] {
    background-color: var(--color-success-bg);
    color: var(--color-success-text);
    border: 1px solid var(--color-success-border);
}

.di-upload-result--partial[b-jje5niulqd] {
    background-color: var(--color-warning-bg);
    color: var(--color-warning-text);
    border: 1px solid var(--color-warning-border);
}

.di-upload-result--fail[b-jje5niulqd] {
    background-color: var(--color-error-bg);
    color: var(--color-error-text);
    border: 1px solid var(--color-error-border);
}

/* _content/AlchemosPositive.Portal/Features/DataIntegrations/IntegrationsList.razor.rz.scp.css */
/* ══════════════════════════════════════════════════════════════
   IntegrationsList.razor.css — Spring Aesthetics
   §7.3.2 transparency fix | §0.2 Typo-first | Misty Spring palette
   ══════════════════════════════════════════════════════════════ */

[b-sab4dz2b1q] .mud-typography {
    background-color: transparent !important;
}

/* ── Page root ───────────────────────────────────────────────── */
.integrations-root[b-sab4dz2b1q] {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
    padding-bottom: var(--space-8);
    animation: integrFadeIn-b-sab4dz2b1q var(--transition-reveal) ease-out both;
    background:
        radial-gradient(ellipse 130% 55% at 60% 0%, rgba(204, 251, 241, 0.18) 0%, transparent 55%),
        radial-gradient(ellipse 90% 40% at 5% 80%, rgba(240, 244, 255, 0.12) 0%, transparent 55%);
}

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

/* ── Hero Banner ─────────────────────────────────────────────── */
.integrations-hero[b-sab4dz2b1q] {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-xl);
    padding: var(--space-8) var(--space-content);
    background: linear-gradient(
        130deg,
        #ddf3ee 0%,
        #e8f5e9 22%,
        #eff6fb 48%,
        #f3eff9 72%,
        #fdf5ee 100%
    );
    border: 1px solid rgba(180, 210, 200, 0.55);
    box-shadow: 0 2px 20px rgba(15, 118, 110, 0.06), 0 1px 4px rgba(15, 23, 42, 0.04);
    min-height: 110px;
    display: flex;
    align-items: center;
}

.integrations-hero[b-sab4dz2b1q]::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 5% 50%, rgba(45, 212, 191, 0.10) 0%, transparent 55%),
        radial-gradient(ellipse at 90% 30%, rgba(167, 139, 250, 0.07) 0%, transparent 50%);
    pointer-events: none;
}

.integrations-hero__body[b-sab4dz2b1q] {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    flex: 1;
}

.integrations-hero__eyebrow[b-sab4dz2b1q] {
    color: var(--color-accent-text, #0C5E58);
    margin: 0 0 var(--space-1) 0;
}

.integrations-hero__title[b-sab4dz2b1q] {
    color: var(--color-text-primary, #0F1A25);
    margin: 0 0 var(--space-1) 0;
    font-weight: 700;
}

.integrations-hero__sub[b-sab4dz2b1q] {
    color: var(--color-text-secondary, #3D4E5C);
    margin: 0;
    max-width: 560px;
}

.integrations-hero__icon-wrap[b-sab4dz2b1q] {
    position: absolute;
    right: var(--space-8);
    top: 50%;
    transform: translateY(-50%);
    width: 72px;
    height: 72px;
    background: rgba(255, 255, 255, 0.55);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(196, 205, 214, 0.35);
    opacity: 0.6;
    pointer-events: none;
}

@media (max-width: 599px) {
    .integrations-hero[b-sab4dz2b1q] { padding: var(--space-6) var(--space-4); }
    .integrations-hero__icon-wrap[b-sab4dz2b1q] { display: none; }
}

/* ── Integration Cards ───────────────────────────────────────── */
[b-sab4dz2b1q] .integration-card {
    height: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    border-radius: var(--radius-lg) !important;
    border: 1px solid var(--color-border-subtle) !important;
    background: var(--color-surface-2) !important;
    box-shadow: none !important;
    transition: transform var(--transition-interactive);
}

[b-sab4dz2b1q] .integration-card:hover {
    transform: translateY(-2px);
    background: var(--color-bg-subtle) !important;
}

/* Empty state card */
.integrations-empty[b-sab4dz2b1q] {
    background: var(--color-surface-2);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-lg);
    padding: var(--space-12) var(--space-8);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
}

/* ── Sync status labels ──────────────────────────────────────── */
.integrations-meta-label[b-sab4dz2b1q] {
    color: var(--color-text-secondary);
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 600;
    margin-bottom: 2px;
}
/* _content/AlchemosPositive.Portal/Features/Help/UserGuide.razor.rz.scp.css */
/* ── Two-column guide layout ─────────────────────────────────────────────── */

.guide-layout[b-n9jqc0i1kx] {
    display: grid;
    grid-template-columns: 210px 1fr;
    gap: 2.5rem;
    align-items: start;
}

@media (max-width: 960px) {
    .guide-layout[b-n9jqc0i1kx] { grid-template-columns: 1fr; }
    .guide-sidebar[b-n9jqc0i1kx] { display: none; }
}

/* ── Sticky sidebar ──────────────────────────────────────────────────────── */

.guide-toc[b-n9jqc0i1kx] {
    position: sticky;
    top: 80px;
    max-height: calc(100vh - 110px);
    overflow-y: auto;
    padding-bottom: 1rem;
    scrollbar-width: thin;
    scrollbar-color: var(--mud-palette-divider) transparent;
}

.guide-toc-heading[b-n9jqc0i1kx] {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
    margin: 0 0 0.625rem 0.875rem;
}

.guide-toc-nav[b-n9jqc0i1kx] {
    display: flex;
    flex-direction: column;
}

.guide-toc-link[b-n9jqc0i1kx] {
    display: block;
    padding: 0.3rem 0.875rem;
    font-size: 0.8125rem;
    line-height: 1.45;
    color: var(--mud-palette-text-secondary);
    text-decoration: none;
    border-left: 2px solid transparent;
    border-radius: 0 6px 6px 0;
    transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}

.guide-toc-link:hover[b-n9jqc0i1kx] {
    color: var(--mud-palette-primary);
    border-left-color: var(--mud-palette-primary);
    background: var(--mud-palette-primary-lighten);
    text-decoration: none;
}

/* ── Markdown content container ──────────────────────────────────────────── */
/* ::deep is required on all child selectors below because the markdown HTML  */
/* is injected via MarkupString and those elements don't receive Blazor's CSS  */
/* isolation scope attribute — without ::deep they'd be invisible in prod.    */

.user-guide-content[b-n9jqc0i1kx] {
    line-height: 1.85;
    font-size: 0.9375rem;
    color: var(--mud-palette-text-primary);
}

/* ── Headings ── */

.user-guide-content[b-n9jqc0i1kx]  h1 {
    font-size: 1.875rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    margin: 0.5rem 0 1.25rem;
    color: var(--mud-palette-text-primary);
}

.user-guide-content[b-n9jqc0i1kx]  h2 {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 1.375rem;
    font-weight: 700;
    margin: 3rem 0 1rem;
    padding-bottom: 0.625rem;
    border-bottom: 1.5px solid var(--mud-palette-divider);
    scroll-margin-top: 80px;
}

.user-guide-content[b-n9jqc0i1kx]  h2::before {
    content: '';
    flex-shrink: 0;
    width: 4px;
    height: 1.1em;
    background: var(--mud-palette-primary);
    border-radius: 2px;
}

.user-guide-content[b-n9jqc0i1kx]  h3 {
    font-size: 1.0625rem;
    font-weight: 600;
    margin: 2rem 0 0.625rem;
    color: var(--mud-palette-text-primary);
    scroll-margin-top: 80px;
}

.user-guide-content[b-n9jqc0i1kx]  h4 {
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
    margin: 1.5rem 0 0.5rem;
    scroll-margin-top: 80px;
}

/* ── Body text ── */

.user-guide-content[b-n9jqc0i1kx]  p {
    margin: 0 0 1.25rem;
}

.user-guide-content[b-n9jqc0i1kx]  strong {
    font-weight: 600;
}

.user-guide-content[b-n9jqc0i1kx]  em {
    font-style: italic;
}

/* ── Lists ── */

.user-guide-content[b-n9jqc0i1kx]  ul,
.user-guide-content[b-n9jqc0i1kx]  ol {
    margin: 0.25rem 0 1.25rem 0;
    padding-left: 1.5rem;
}

.user-guide-content[b-n9jqc0i1kx]  li {
    margin-bottom: 0.4rem;
    padding-left: 0.2rem;
}

.user-guide-content[b-n9jqc0i1kx]  ul li::marker {
    color: var(--mud-palette-primary);
    font-size: 1.1em;
}

.user-guide-content[b-n9jqc0i1kx]  ol li::marker {
    color: var(--mud-palette-primary);
    font-weight: 600;
}

.user-guide-content[b-n9jqc0i1kx]  li > ul,
.user-guide-content[b-n9jqc0i1kx]  li > ol {
    margin-top: 0.3rem;
    margin-bottom: 0.3rem;
}

/* ── Tables ── */

.user-guide-content[b-n9jqc0i1kx]  .table-wrapper {
    overflow-x: auto;
    margin: 1.5rem 0 2rem;
    border-radius: 10px;
    box-shadow: 0 0 0 1px var(--mud-palette-divider);
}

.user-guide-content[b-n9jqc0i1kx]  table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.5rem 0 2rem;
    font-size: 0.875rem;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 0 0 1px var(--mud-palette-divider);
}

.user-guide-content[b-n9jqc0i1kx]  thead tr {
    background: var(--mud-palette-primary);
}

.user-guide-content[b-n9jqc0i1kx]  th {
    padding: 0.65rem 1rem;
    text-align: left;
    font-weight: 600;
    font-size: 0.8rem;
    letter-spacing: 0.04em;
    color: #fff;
    border: none;
    white-space: nowrap;
}

.user-guide-content[b-n9jqc0i1kx]  td {
    padding: 0.6rem 1rem;
    border: none;
    border-top: 1px solid var(--mud-palette-divider);
    vertical-align: top;
    line-height: 1.6;
}

.user-guide-content[b-n9jqc0i1kx]  tbody tr:nth-child(even) td {
    background: var(--mud-palette-background-grey);
}

.user-guide-content[b-n9jqc0i1kx]  tbody tr:hover td {
    background: var(--mud-palette-primary-lighten);
}

/* ── Inline code ── */

.user-guide-content[b-n9jqc0i1kx]  :not(pre) > code {
    background: var(--mud-palette-background-grey);
    border: 1px solid var(--mud-palette-divider);
    border-radius: 5px;
    padding: 0.1em 0.42em;
    font-size: 0.84em;
    font-family: "JetBrains Mono", "Consolas", "Monaco", monospace;
    color: var(--mud-palette-primary-darken);
    white-space: nowrap;
}

/* ── Code blocks ── */

.user-guide-content[b-n9jqc0i1kx]  pre {
    background: #0f1117;
    border-radius: 10px;
    padding: 1.25rem 1.5rem;
    overflow-x: auto;
    margin: 1.25rem 0 2rem;
    border: 1px solid rgba(255,255,255,0.07);
    font-size: 0;  /* kill whitespace between pre and code */
}

.user-guide-content[b-n9jqc0i1kx]  pre code {
    background: transparent;
    border: none;
    padding: 0;
    font-size: 0.84rem;
    color: #cdd6f4;
    font-family: "JetBrains Mono", "Consolas", "Monaco", monospace;
    white-space: pre;
    line-height: 1.65;
    letter-spacing: 0.01em;
}

/* ── Blockquotes / tips ── */

.user-guide-content[b-n9jqc0i1kx]  blockquote {
    position: relative;
    border-left: 4px solid var(--mud-palette-primary);
    background: var(--mud-palette-primary-lighten);
    padding: 1rem 1.25rem 1rem 3.25rem;
    margin: 1.5rem 0;
    border-radius: 0 10px 10px 0;
}

.user-guide-content[b-n9jqc0i1kx]  blockquote::before {
    content: '💡';
    position: absolute;
    left: 0.75rem;
    top: 1rem;
    font-size: 1rem;
    line-height: 1;
}

.user-guide-content[b-n9jqc0i1kx]  blockquote p {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.7;
}

.user-guide-content[b-n9jqc0i1kx]  blockquote strong {
    color: var(--mud-palette-primary-darken);
}

/* ── Horizontal rules ── */

.user-guide-content[b-n9jqc0i1kx]  hr {
    border: none;
    border-top: 1px solid var(--mud-palette-divider);
    margin: 2.5rem 0;
}

/* ── Links ── */

.user-guide-content[b-n9jqc0i1kx]  a {
    color: var(--mud-palette-primary);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    transition: color 0.15s ease, text-decoration-color 0.15s ease;
}

.user-guide-content[b-n9jqc0i1kx]  a:hover {
    color: var(--mud-palette-primary-darken);
    text-decoration-thickness: 2px;
}
/* _content/AlchemosPositive.Portal/Features/OffsetMarketplace/Browse.razor.rz.scp.css */
/* ══════════════════════════════════════════════════════════════
   Browse.razor.css — Offset Marketplace Catalog
   Archetype 3: List/Catalog — §7.3 cards · §7.6 chips · §7.13 filters
   ══════════════════════════════════════════════════════════════ */

/* §7.3.2 — prevent MudBlazor injecting background on typography */
[b-tyc755inoq] .mud-typography {
    background-color: transparent !important;
}

/* ── Page root ───────────────────────────────────────────────── */
.browse-root[b-tyc755inoq] {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
    padding-bottom: var(--space-8);
    animation: browseFadeIn-b-tyc755inoq var(--transition-reveal) ease-out both;
    background:
        radial-gradient(ellipse 130% 55% at 60% 0%, rgba(204, 251, 241, 0.18) 0%, transparent 55%),
        radial-gradient(ellipse 90% 40% at 5% 80%, rgba(240, 244, 255, 0.12) 0%, transparent 55%);
}

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

.browse-loading-bar[b-tyc755inoq] {
    margin-bottom: var(--space-2);
    border-radius: var(--radius-sm);
}

.browse-cache-bar[b-tyc755inoq] {
    border-radius: var(--radius-lg) !important;
    border: 1px solid rgba(15, 118, 110, 0.18);
    background: linear-gradient(120deg, rgba(240, 253, 250, 0.82) 0%, rgba(248, 250, 252, 0.94) 100%);
    padding: var(--space-3) var(--space-4);
}

.browse-cache-stack[b-tyc755inoq] {
    width: 100%;
    gap: var(--space-2);
}

.browse-cache-meta[b-tyc755inoq] {
    min-width: 0;
    flex-wrap: wrap;
}

.browse-cache-text[b-tyc755inoq] {
    color: var(--color-text-secondary, #334155);
}

.browse-cache-subtext[b-tyc755inoq] {
    color: var(--color-text-tertiary, #64748B);
}

/* ── Hero Banner ─────────────────────────────────────────────── */
.browse-hero[b-tyc755inoq] {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-xl);
    padding: var(--space-8) var(--space-content);
    background: linear-gradient(
        130deg,
        #ddf3ee 0%,
        #e8f5e9 22%,
        #eff6fb 48%,
        #f3eff9 72%,
        #fdf5ee 100%
    );
    border: 1px solid rgba(180, 210, 200, 0.55);
    box-shadow: 0 2px 20px rgba(15, 118, 110, 0.06), 0 1px 4px rgba(15, 23, 42, 0.04);
    min-height: 110px;
    display: flex;
    align-items: center;
}

.browse-hero[b-tyc755inoq]::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 5% 50%, rgba(45, 212, 191, 0.10) 0%, transparent 55%),
        radial-gradient(ellipse at 90% 30%, rgba(167, 139, 250, 0.07) 0%, transparent 50%);
    pointer-events: none;
}

.browse-hero__body[b-tyc755inoq] {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-6);
    width: 100%;
}

.browse-hero__left[b-tyc755inoq] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.browse-hero__right[b-tyc755inoq] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-shrink: 0;
}

.browse-hero__eyebrow[b-tyc755inoq] {
    color: var(--color-accent-text, #0C5E58);
    margin: 0 0 var(--space-1) 0;
}

.browse-hero__title[b-tyc755inoq] {
    color: var(--color-text-primary, #0F1A25);
    margin: 0 0 var(--space-1) 0;
    font-weight: 700;
}

.browse-hero__sub[b-tyc755inoq] {
    color: var(--color-text-secondary, #3D4E5C);
    margin: 0;
    max-width: 560px;
}

@media (max-width: 599px) {
    .browse-hero[b-tyc755inoq]              { padding: var(--space-6) var(--space-4); }
    .browse-hero__body[b-tyc755inoq]        { flex-direction: column; align-items: flex-start; }
    .browse-hero__right[b-tyc755inoq]       { width: 100%; }
}

/* ══════════════════════════════════════════════════════════════
   Filter Card — Premium 3-section design (search / filters / SDGs)
   Inspired by international ESG data platforms.
   ══════════════════════════════════════════════════════════════ */

.browse-filter-card[b-tyc755inoq] {
    background: #ffffff;
    border-radius: 16px;
    border: 1px solid rgba(15, 118, 110, 0.14);
    box-shadow:
        0 1px 3px rgba(15, 23, 42, 0.06),
        0 6px 20px rgba(15, 118, 110, 0.06);
    overflow: hidden;
    position: relative;
}

/* Teal gradient top accent bar — brand signal */
.browse-filter-card[b-tyc755inoq]::before {
    content: '';
    display: block;
    height: 3px;
    flex-shrink: 0;
    background: linear-gradient(
        90deg,
        #0F766E 0%,
        #2DD4BF 50%,
        rgba(45, 212, 191, 0.1) 100%
    );
}

/* ── Section 1 — Search ─────────────────────────────────────── */
.browse-search-section[b-tyc755inoq] {
    padding: 20px 24px 18px;
    background: rgba(240, 253, 250, 0.5);
    border-bottom: 1px solid rgba(15, 118, 110, 0.08);
}

.browse-search-field[b-tyc755inoq] {
    width: 100%;
}

/* Slightly larger search input text */
[b-tyc755inoq] .browse-search-field input {
    font-size: 15px;
    letter-spacing: 0.01em;
}

/* Muted border at rest, accent on focus */
[b-tyc755inoq] .browse-search-field .mud-input-outlined fieldset {
    border-color: rgba(15, 118, 110, 0.22) !important;
}
[b-tyc755inoq] .browse-search-field .mud-input-outlined:hover fieldset,
[b-tyc755inoq] .browse-search-field .mud-input-outlined.mud-focused fieldset {
    border-color: #0F766E !important;
    border-width: 1.5px;
}

/* ── Section 2 — Filter fields ──────────────────────────────── */
.browse-filter-body[b-tyc755inoq] {
    padding: 16px 24px 20px;
    border-bottom: 1px solid rgba(15, 118, 110, 0.08);
}

/* Action button stack \u2014 right-aligned in its grid cell */
.browse-action-stack[b-tyc755inoq] {
    justify-content: flex-end;
}

/* Apply button: prominent, min-width so it doesn't collapse */
.browse-apply-btn[b-tyc755inoq] {
    height: 56px !important;
    min-width: 140px;
    font-weight: 600;
    letter-spacing: 0.03em;
}

/* Clear button: same height, outlined, slightly narrower */
.browse-reset-btn[b-tyc755inoq] {
    height: 56px !important;
    min-width: 90px;
    white-space: nowrap;
}

/* ── Section 3 — SDG chips ──────────────────────────────────── */
.browse-sdg-section[b-tyc755inoq] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 14px 24px 16px;
    background: rgba(248, 250, 252, 0.7);
}

.browse-filter-section-label[b-tyc755inoq] {
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.10em;
    color: rgba(15, 118, 110, 0.7);
    flex-shrink: 0;
    margin-right: 4px;
    white-space: nowrap;
}

/* SDG chips — outlined by default, filled teal when selected */
[b-tyc755inoq] .browse-sdg-section .mud-chip {
    background-color: transparent !important;
    border: 1.5px solid rgba(15, 118, 110, 0.30) !important;
    color: #0F766E !important;
    font-weight: 500;
    font-size: 12px;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

[b-tyc755inoq] .browse-sdg-section .mud-chip:hover {
    background-color: rgba(15, 118, 110, 0.07) !important;
    border-color: rgba(15, 118, 110, 0.5) !important;
}

[b-tyc755inoq] .browse-sdg-section .mud-chip.mud-chip-selected {
    background-color: #0F766E !important;
    border-color: #0F766E !important;
    color: #ffffff !important;
}

/* ── Results / Sort Bar ──────────────────────────────────────── */
.browse-results-bar[b-tyc755inoq] {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    flex-wrap: wrap;
    padding: var(--space-1) 0;
}

.browse-results-count[b-tyc755inoq] {
    color: var(--color-text-secondary);
    white-space: nowrap;
    font-size: 13px;
}

.browse-sort-select[b-tyc755inoq] {
    min-width: 190px;
}

@media (max-width: 599px) {
    .browse-results-bar[b-tyc755inoq]  { flex-direction: column; align-items: flex-start; gap: var(--space-2); }
    .browse-sort-select[b-tyc755inoq]  { min-width: 100%; }
    .browse-search-section[b-tyc755inoq] { padding: 14px 16px 14px; }
    .browse-filter-body[b-tyc755inoq]    { padding: 14px 16px 16px; }
    .browse-sdg-section[b-tyc755inoq]    { padding: 10px 16px 14px; }
    .browse-cache-stack[b-tyc755inoq]    { flex-direction: column; align-items: flex-start; }
}

/* ── Pagination bar ──────────────────────────────────────────── */
.browse-pagination-bar[b-tyc755inoq] {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: var(--space-4);
    flex-wrap: wrap;
    margin-top: var(--space-2);
    padding: var(--space-2) 0;
}

.browse-pagination-label[b-tyc755inoq] {
    color: var(--color-text-secondary);
    font-size: 13px;
    white-space: nowrap;
}

/* Fix: suppress browser default list bullets on pagination <li> elements */
[b-tyc755inoq] .mud-pagination li,
[b-tyc755inoq] ul.mud-pagination-root li {
    list-style: none !important;
    list-style-type: none !important;
}

/* ── Project Cards — equal-height rows via flexbox ───────────── */
[b-tyc755inoq] .browse-project-card {
    height: 100%;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    border-radius: var(--radius-lg) !important;
    border: 1px solid var(--color-border-subtle) !important;
    background: var(--color-surface-2) !important;
    box-shadow: none !important;
    transition: transform var(--transition-interactive),
                box-shadow var(--transition-interactive);
    overflow: hidden;
}

[b-tyc755inoq] .browse-project-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(15, 118, 110, 0.10) !important;
}

/* Card content area grows to push actions flush to bottom */
.browse-card-content[b-tyc755inoq] {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
}

/* Card media: consistent height, object-fit */
[b-tyc755inoq] .browse-card-media .mud-card-media {
    object-fit: cover;
}

/* Type + registry chip row */
.browse-card-chips[b-tyc755inoq] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
    align-items: center;
}

/* Type chip — filled primary (white text on teal, 4.84:1 WCAG AA) */
[b-tyc755inoq] .browse-type-chip {
    font-size: var(--text-xs);
    font-weight: 600;
}

/* Registry chip — outlined default (dark text, readable) */
[b-tyc755inoq] .browse-registry-chip {
    font-size: var(--text-xs);
}

/* Project name — 2-line clamp, consistent card height */
[b-tyc755inoq] .browse-project-name {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.4;
    min-height: calc(1.4em * 2);
    font-weight: 600;
}

.browse-location-icon[b-tyc755inoq] {
    color: var(--color-text-tertiary, #64748B);
    flex-shrink: 0;
}

.browse-location-text[b-tyc755inoq] {
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
}

/* Description — 3-line clamp, ensures cards align at SDG row */
[b-tyc755inoq] .browse-project-desc {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.55;
    min-height: calc(1.55em * 3);
    color: var(--color-text-secondary);
    flex: 1;
}

/* ── SDG Badges — custom div for contrast control ────────────── */
.browse-sdg-row[b-tyc755inoq] {
    min-height: 32px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: auto;
}

/* SDG number badge: teal subtle bg, teal-dark text — 4.5:1+ WCAG AA */
.browse-sdg-badge[b-tyc755inoq] {
    background-color: var(--color-accent-subtle, #CCFBF1);
    color: var(--color-accent-text, #0C5E58);
    border-radius: var(--radius-sm, 4px);
    font-size: 10px;
    font-weight: 700;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    cursor: default;
    border: 1px solid rgba(15, 118, 110, 0.15);
    line-height: 1;
}

/* "+N more" overflow badge: neutral bg */
.browse-sdg-extra[b-tyc755inoq] {
    background-color: var(--color-bg-component, #F1F5F9);
    color: var(--color-text-secondary, #475569);
    border-color: var(--color-border-subtle, #CBD5E1);
    font-size: 9px;
    font-weight: 600;
}

/* ── Card Actions Footer ─────────────────────────────────────── */
.browse-card-actions[b-tyc755inoq] {
    padding: var(--space-3) var(--space-4) var(--space-4) !important;
    margin-top: auto;
    flex-shrink: 0;
    border-top: 1px solid var(--color-border-subtle);
}

.browse-price-label[b-tyc755inoq] {
    color: var(--color-text-secondary);
    font-size: var(--text-xs);
    font-weight: 500;
    line-height: 1.2;
}

.browse-price-value[b-tyc755inoq] {
    color: var(--color-accent, #0F766E);
    font-weight: 700;
    line-height: 1.2;
}

.browse-detail-btn[b-tyc755inoq] {
    color: var(--color-text-secondary) !important;
}

.browse-detail-btn:hover[b-tyc755inoq] {
    color: var(--color-accent) !important;
}

/* ── Per-card quantity selector ──────────────────────────────── */
.browse-qty-row[b-tyc755inoq] {
    background: var(--color-surface-subtle, rgba(0,0,0,0.03));
    border-radius: var(--radius-md);
    padding: var(--space-1) var(--space-2);
}

.browse-qty-label[b-tyc755inoq] {
    color: var(--color-text-secondary);
    font-size: var(--text-xs);
    font-weight: 500;
}

.browse-qty-value[b-tyc755inoq] {
    min-width: 28px;
    text-align: center;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--color-accent);
}

.browse-qty-btn[b-tyc755inoq] {
    color: var(--color-text-secondary) !important;
}

/* ── Breadcrumbs inside hero ─────────────────────────────────── */
[b-tyc755inoq] .browse-hero__left .mud-breadcrumbs {
    padding: 0 !important;
    margin-bottom: var(--space-2);
    opacity: 0.75;
}

/* ── List mode override — horizontal card layout ─────────────── */

/* Tighten grid spacing in list mode */
[b-tyc755inoq] .browse-list-grid {
    row-gap: var(--space-2) !important;
}

/* Card becomes horizontal: media left | content | actions right */
[b-tyc755inoq] .browse-project-card--list {
    flex-direction: row !important;
    min-height: 120px;
    height: auto !important;
    align-items: stretch;
}

/* Media: fixed 200px left column */
[b-tyc755inoq] .browse-project-card--list > .mud-card-media {
    min-width: 180px;
    max-width: 180px;
    height: auto !important;     /* override inline Height=160 */
    background-size: cover;
    background-position: center;
    flex-shrink: 0;
    border-radius: var(--radius-lg) 0 0 var(--radius-lg);
}

/* Content: grows to fill middle */
[b-tyc755inoq] .browse-project-card--list .browse-card-content {
    flex-direction: row !important;
    align-items: center;
    gap: var(--space-5);
    flex-wrap: nowrap;
    padding: var(--space-3) var(--space-4) !important;
    overflow: hidden;
}

/* Left part of content: chips + name + location */
[b-tyc755inoq] .browse-project-card--list .browse-card-content > * {
    flex-shrink: 1;
    min-width: 0;
}

/* Description + SDG row hidden in list mode to save space */
[b-tyc755inoq] .browse-project-card--list .browse-project-desc,
[b-tyc755inoq] .browse-project-card--list .browse-sdg-row {
    display: none;
}

/* Reduce name to 1-line clamp in list mode */
[b-tyc755inoq] .browse-project-card--list .browse-project-name {
    -webkit-line-clamp: 1 !important;
    min-height: unset !important;
}

/* Actions: fixed right column, no top border, left separator */
[b-tyc755inoq] .browse-project-card--list .browse-card-actions {
    width: 200px;
    min-width: 200px;
    flex-shrink: 0;
    border-top: none !important;
    border-left: 1px solid var(--color-border-subtle);
    display: flex;
    align-items: center;
    padding: var(--space-3) var(--space-4) !important;
}

@media (max-width: 599px) {
    /* Revert to stacked on mobile even in list mode */
    [b-tyc755inoq] .browse-project-card--list {
        flex-direction: column !important;
    }
    [b-tyc755inoq] .browse-project-card--list > .mud-card-media {
        min-width: unset;
        max-width: unset;
        height: 120px !important;
    }
    [b-tyc755inoq] .browse-project-card--list .browse-card-content {
        flex-direction: column !important;
    }
    [b-tyc755inoq] .browse-project-card--list .browse-card-actions {
        width: 100%;
        border-left: none;
        border-top: 1px solid var(--color-border-subtle) !important;
    }
    [b-tyc755inoq] .browse-project-card--list .browse-project-desc,
    [b-tyc755inoq] .browse-project-card--list .browse-sdg-row {
        display: flex;
    }
}

/* ── Empty State ─────────────────────────────────────────────── */
.browse-empty-state[b-tyc755inoq] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-16) var(--space-4);
    text-align: center;
    color: var(--color-text-secondary);
    border-radius: var(--radius-lg) !important;
}

.browse-empty-icon[b-tyc755inoq] {
    color: var(--color-accent, #0F766E);
    opacity: 0.45;
    font-size: 64px !important;
    width: 64px !important;
    height: 64px !important;
}

    gap: var(--space-3);
    flex-shrink: 0;[b-tyc755inoq]
}

@media (max-width: 599px) {
    .browse-hero__body[b-tyc755inoq]  { flex-direction: column; align-items: flex-start; }
    .browse-hero__right[b-tyc755inoq] { width: 100%; }
}

.browse-hero__eyebrow[b-tyc755inoq] {
    color: var(--color-accent-text, #0C5E58);
    margin: 0 0 var(--space-1) 0;
}

.browse-hero__title[b-tyc755inoq] {
    color: var(--color-text-primary, #0F1A25);
    margin: 0 0 var(--space-1) 0;
    font-weight: 700;
}

.browse-hero__sub[b-tyc755inoq] {
    color: var(--color-text-secondary, #3D4E5C);
    margin: 0;
    max-width: 560px;
}

@media (max-width: 599px) {
    .browse-hero[b-tyc755inoq] { padding: var(--space-6) var(--space-4); }
}

/* _content/AlchemosPositive.Portal/Features/OffsetMarketplace/EmissionOffsetCart.razor.rz.scp.css */
.emission-cart-empty[b-nmix61721d] {
    border: 2px dashed var(--mud-palette-lines-default);
    border-radius: 12px;
}

.emission-cart-table .mud-table-head th[b-nmix61721d] {
    background: var(--mud-palette-background-grey);
    font-weight: 600;
}

.emission-cart-tco2e[b-nmix61721d] {
    font-weight: 600;
    color: var(--mud-palette-primary);
}

.emission-cart-scope-chip[b-nmix61721d] {
    font-size: 11px;
}

/* Summary card: teal left-border accent */
.emission-cart-summary-card[b-nmix61721d] {
    border: 1px solid var(--mud-palette-lines-default);
    border-left: 4px solid var(--mud-palette-primary);
    border-radius: 8px;
}

.emission-cart-summary-label[b-nmix61721d] {
    color: var(--mud-palette-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 11px;
}

.emission-cart-total-value[b-nmix61721d] {
    color: var(--mud-palette-primary);
    font-weight: 700;
    line-height: 1;
}

.emission-cart-total-unit[b-nmix61721d] {
    color: var(--mud-palette-text-secondary);
}
/* _content/AlchemosPositive.Portal/Features/OffsetMarketplace/EmissionOffsetPurchaseDialog.razor.rz.scp.css */
.eocp-stepper[b-w2f4ze8y0i] {
    border: none;
}

.eocp-cache-bar[b-w2f4ze8y0i] {
    border-radius: var(--mud-default-borderradius);
    border: 1px solid color-mix(in srgb, var(--mud-palette-primary), transparent 72%);
    background: color-mix(in srgb, var(--mud-palette-primary), transparent 95%);
    padding: 8px 10px;
}

.eocp-cache-stack[b-w2f4ze8y0i] {
    width: 100%;
    gap: 6px;
}

.eocp-cache-meta[b-w2f4ze8y0i] {
    min-width: 0;
    flex-wrap: wrap;
}

.eocp-cache-text[b-w2f4ze8y0i] {
    color: var(--mud-palette-text-secondary);
}

.eocp-cache-subtext[b-w2f4ze8y0i] {
    color: color-mix(in srgb, var(--mud-palette-text-secondary), transparent 20%);
}

/* ── Stepper step-number chip contrast ───────────────────────────── */
[b-w2f4ze8y0i] .eocp-stepper .mud-step-label-icon-wrapper .mud-avatar {
    background-color: var(--mud-palette-primary);
    color: #ffffff;
    font-weight: 700;
}

[b-w2f4ze8y0i] .eocp-stepper .mud-step-label-icon-wrapper .mud-icon-default {
    color: #ffffff;
}

/* ── Project picker – price summary card ─────────────────────────── */
.eocp-price-card[b-w2f4ze8y0i] {
    background-color: var(--mud-palette-background-grey);
    border-radius: var(--mud-default-borderradius);
    border: 1px solid var(--mud-palette-primary);
    height: 100%;
}

.eocp-items-table[b-w2f4ze8y0i] {
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--mud-default-borderradius);
}

.eocp-confirm-box[b-w2f4ze8y0i] {
    background-color: var(--mud-palette-background-grey);
    border-radius: var(--mud-default-borderradius);
    border: 1px solid var(--mud-palette-lines-default);
}

.eocp-success[b-w2f4ze8y0i] {
    border-radius: var(--mud-default-borderradius);
    border: 1px solid var(--mud-palette-success);
    background-color: color-mix(in srgb, var(--mud-palette-success), transparent 92%);
}

@media (max-width: 599px) {
    .eocp-cache-stack[b-w2f4ze8y0i] {
        flex-direction: column;
        align-items: flex-start;
    }
}
/* _content/AlchemosPositive.Portal/Features/Offsets/Cart.razor.rz.scp.css */
/* ══════════════════════════════════════════════════════════════
   Cart.razor.css — Offset Marketplace Shopping Cart
   ══════════════════════════════════════════════════════════════ */

/* ── Back navigation link ────────────────────────────────────── */
.cart-back-nav[b-nergkrt830] {
    display: flex;
    align-items: center;
    margin-bottom: var(--space-1);
}

.cart-back-link[b-nergkrt830] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    font-size: var(--text-sm);
    color: var(--color-text-secondary) !important;
    text-decoration: none;
    transition: color 0.15s;
}

    .cart-back-link:hover[b-nergkrt830] {
        color: var(--color-accent) !important;
    }

.cart-back-icon[b-nergkrt830] {
    font-size: 16px !important;
    width: 16px !important;
    height: 16px !important;
}

/* ── Quantity stepper control ────────────────────────────────── */
.cart-qty-stepper[b-nergkrt830] {
    background: var(--color-surface-subtle, rgba(0,0,0,0.03));
    border: 1px solid var(--color-border-subtle, rgba(0,0,0,0.08));
    border-radius: var(--radius-md);
    padding: 2px var(--space-1);
}

.cart-qty-value[b-nergkrt830] {
    min-width: 44px;
    text-align: center;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--color-accent);
}

.cart-qty-btn[b-nergkrt830] {
    color: var(--color-text-secondary) !important;
}
/* _content/AlchemosPositive.Portal/Features/Offsets/History.razor.rz.scp.css */
/* ══════════════════════════════════════════════════════════════
   History.razor.css — Retirement History List Page
   Archetype 3: List Page | Slate+Teal | §7.3.2 transparency fix
   ══════════════════════════════════════════════════════════════ */

/* §7.3.2 — MudBlazor typography transparency fix */
[b-eguao7aryr] .mud-typography {
    background-color: transparent !important;
}

/* ── Page root ───────────────────────────────────────────────── */
.history-root[b-eguao7aryr] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    padding-bottom: var(--space-8);
    animation: histFadeIn-b-eguao7aryr var(--transition-reveal, 0.45s) ease-out both;
}

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

/* ── DataGrid header ─────────────────────────────────────────── */
[b-eguao7aryr] .mud-table-head .mud-table-cell {
    background-color: var(--teal-1, #f0faf9) !important;
    color: var(--color-text-secondary, #3D4E5C);
    font-weight: 600;
    font-size: var(--text-xs, 0.75rem);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

[b-eguao7aryr] .mud-table-cell {
    background-color: transparent !important;
}

[b-eguao7aryr] .mud-table-body .mud-table-row:hover {
    background-color: rgba(204, 251, 241, 0.15) !important;
}

/* ── Two-line cell text helper ───────────────────────────────── */
[b-eguao7aryr] .hist-caption {
    color: var(--color-text-secondary, #3D4E5C);
    font-size: var(--text-xs, 0.75rem);
    line-height: 1.3;
}

/* ── Section header inside table card ───────────────────────── */
.history-section-header[b-eguao7aryr] {
    border-bottom: 1px solid var(--color-border-subtle, rgba(132, 151, 168, 0.18));
    padding-bottom: var(--space-3) !important;
}

/* ── Info banner ──────────────────────────────────────────────── */
.history-info-card[b-eguao7aryr] {
    background-color: var(--color-success-bg, #F0FDF4) !important;
    border: 1px solid var(--color-success-border, #BBF7D0) !important;
}

/* ── Mobile: action buttons always visible ───────────────────── */
@media (max-width: 959px) {
    [b-eguao7aryr] .grid-action-bar {
        opacity: 1 !important;
    }
}

/* ── Reduced motion ──────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .history-root[b-eguao7aryr] { animation: none; }
}
/* _content/AlchemosPositive.Portal/Features/Offsets/Orders.razor.rz.scp.css */
/* ══════════════════════════════════════════════════════════════
   Orders.razor.css — Offset Orders Spring Aesthetics
   §7.3.2 transparency fix | §0.2 Typo-first | Misty Spring palette
   Special: remove bg colors from DataGrid cell values (transparent)
   ══════════════════════════════════════════════════════════════ */

[b-4doa1ucd1c] .mud-typography {
    background-color: transparent !important;
}

/* ── Page root ───────────────────────────────────────────────── */
.orders-root[b-4doa1ucd1c] {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
    padding-bottom: var(--space-8);
    animation: ordersFadeIn-b-4doa1ucd1c var(--transition-reveal) ease-out both;
    background:
        radial-gradient(ellipse 130% 55% at 60% 0%, rgba(204, 251, 241, 0.18) 0%, transparent 55%),
        radial-gradient(ellipse 90% 40% at 5% 80%, rgba(240, 244, 255, 0.12) 0%, transparent 55%);
}

@keyframes ordersFadeIn-b-4doa1ucd1c {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Hero Banner ─────────────────────────────────────────────── */
.orders-hero[b-4doa1ucd1c] {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-xl);
    padding: var(--space-8) var(--space-content);
    background: linear-gradient(
        130deg,
        #ddf3ee 0%,
        #e8f5e9 22%,
        #eff6fb 48%,
        #f3eff9 72%,
        #fdf5ee 100%
    );
    border: 1px solid rgba(180, 210, 200, 0.55);
    box-shadow: 0 2px 20px rgba(15, 118, 110, 0.06), 0 1px 4px rgba(15, 23, 42, 0.04);
    min-height: 110px;
    display: flex;
    align-items: center;
}

.orders-hero[b-4doa1ucd1c]::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 5% 50%, rgba(45, 212, 191, 0.10) 0%, transparent 55%),
        radial-gradient(ellipse at 90% 30%, rgba(167, 139, 250, 0.07) 0%, transparent 50%);
    pointer-events: none;
}

.orders-hero__body[b-4doa1ucd1c] {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    flex: 1;
}

.orders-hero__eyebrow[b-4doa1ucd1c] {
    color: var(--color-accent-text, #0C5E58);
    margin: 0 0 var(--space-1) 0;
}

.orders-hero__title[b-4doa1ucd1c] {
    color: var(--color-text-primary, #0F1A25);
    margin: 0 0 var(--space-1) 0;
    font-weight: 700;
}

.orders-hero__sub[b-4doa1ucd1c] {
    color: var(--color-text-secondary, #3D4E5C);
    margin: 0;
    max-width: 560px;
}

.orders-hero__icon-wrap[b-4doa1ucd1c] {
    position: absolute;
    right: var(--space-8);
    top: 50%;
    transform: translateY(-50%);
    width: 72px;
    height: 72px;
    background: rgba(255, 255, 255, 0.55);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(196, 205, 214, 0.35);
    opacity: 0.6;
    pointer-events: none;
}

@media (max-width: 599px) {
    .orders-hero[b-4doa1ucd1c] { padding: var(--space-6) var(--space-4); }
    .orders-hero__icon-wrap[b-4doa1ucd1c] { display: none; }
}

/* ── KPI Stat Cards ──────────────────────────────────────────── */
.orders-kpi-card[b-4doa1ucd1c] {
    background: var(--color-surface-2);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    transition: transform var(--transition-interactive);
}

.orders-kpi-card:hover[b-4doa1ucd1c] { transform: translateY(-1px); }

/* ── Filter Bar ──────────────────────────────────────────────── */
.orders-filter-bar[b-4doa1ucd1c] {
    background: var(--color-surface-2);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
}

/* ── Orders Table ────────────────────────────────────────────── */
[b-4doa1ucd1c] .mud-table-head .mud-table-cell {
    background-color: var(--teal-1, #f0faf9) !important;
    color: var(--color-text-secondary, #3D4E5C);
    font-weight: 600;
    font-size: var(--text-xs, 0.75rem);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* SPECIAL REQUIREMENT: Remove background colors from DataGrid cell values */
[b-4doa1ucd1c] .mud-table-cell {
    background-color: transparent !important;
}

/* Also clear input/field backgrounds rendered INSIDE grid cells (MudTextField in DataGrid) */
[b-4doa1ucd1c] .mud-table-cell .mud-input-root,
[b-4doa1ucd1c] .mud-table-cell .mud-input-outlined-border,
[b-4doa1ucd1c] .mud-table-cell .mud-field-root,
[b-4doa1ucd1c] .mud-table-cell .mud-input-slot,
[b-4doa1ucd1c] .mud-table-cell .mud-input-adorned-end,
[b-4doa1ucd1c] .mud-table-cell fieldset {
    background-color: transparent !important;
    border: none !important;
    border-color: transparent !important;
    box-shadow: none !important;
}
[b-4doa1ucd1c] .mud-table-cell .mud-input-outlined .mud-input-outlined-border {
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
}
[b-4doa1ucd1c] .mud-table-cell input,
[b-4doa1ucd1c] .mud-table-cell select {
    background-color: transparent !important;
}

[b-4doa1ucd1c] .mud-table-body .mud-table-row:hover {
    background-color: rgba(204, 251, 241, 0.15) !important;
}

/* Monospace order IDs */
.orders-id-mono[b-4doa1ucd1c] {
    font-family: var(--font-mono, 'JetBrains Mono', 'Consolas', monospace);
    font-weight: 600;
    color: var(--color-text-primary);
}

/* ── Breadcrumbs inside hero ─────────────────────────────────── */
[b-4doa1ucd1c] .orders-hero .mud-breadcrumbs {
    padding: 0 !important;
    margin-bottom: var(--space-2);
    opacity: 0.75;
}
/* _content/AlchemosPositive.Portal/Features/Offsets/Retirements.razor.rz.scp.css */
/* ══════════════════════════════════════════════════════════════
   Retirements.razor.css — Archetype 3: List Page
   §7.3.2 transparency fix | §0.2 Typo-first | Style Contract v1.0
   ══════════════════════════════════════════════════════════════ */

/* ── §7.3.2: Defeat global app.css background injection ─────── */
[b-9c5k3s54lh] .mud-typography {
    background-color: transparent !important;
}

/* ── Page root ───────────────────────────────────────────────── */
.retirements-root[b-9c5k3s54lh] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    padding-bottom: var(--space-8);
    animation: retireFadeIn-b-9c5k3s54lh var(--transition-reveal) ease-out both;
}

@keyframes retireFadeIn-b-9c5k3s54lh {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Filter Bar ──────────────────────────────────────────────── */
.retirements-filter-bar[b-9c5k3s54lh] {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
}

.retirements-filter-bar .mud-input-control[b-9c5k3s54lh],
.retirements-filter-bar .mud-select[b-9c5k3s54lh] {
    flex: 1 1 180px;
    min-width: 150px;
}

.retirements-filter-bar .mud-button-root[b-9c5k3s54lh] {
    flex: 0 0 auto;
    align-self: center;
    white-space: nowrap;
}

/* ── Data Grid — hidden transparent backgrounds ──────────────── */
.retirements-table-card[b-9c5k3s54lh] {
    overflow: hidden;
}

[b-9c5k3s54lh] .mud-table-head .mud-table-cell {
    background-color: var(--teal-1, #f0faf9) !important;
    color: var(--color-text-secondary, #3D4E5C);
    font-weight: 600;
    font-size: var(--text-xs, 0.75rem);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* Remove background override on all grid body cells */
[b-9c5k3s54lh] .mud-table-cell {
    background-color: transparent !important;
}

/* Defeat input/field backgrounds inside grid cells */
[b-9c5k3s54lh] .mud-table-cell .mud-input-root,
[b-9c5k3s54lh] .mud-table-cell .mud-input-outlined-border,
[b-9c5k3s54lh] .mud-table-cell .mud-field-root,
[b-9c5k3s54lh] .mud-table-cell .mud-input-slot,
[b-9c5k3s54lh] .mud-table-cell fieldset {
    background-color: transparent !important;
    border: none !important;
    border-color: transparent !important;
    box-shadow: none !important;
}

[b-9c5k3s54lh] .mud-table-cell input,
[b-9c5k3s54lh] .mud-table-cell select {
    background-color: transparent !important;
}

[b-9c5k3s54lh] .mud-table-body .mud-table-row:hover {
    background-color: rgba(204, 251, 241, 0.15) !important;
}

/* ── Two-line cell text styles ───────────────────────────────── */

/* Retirement ID — monospace, subdued */
[b-9c5k3s54lh] .ret-id-mono {
    font-family: 'JetBrains Mono', 'Consolas', 'Fira Code', monospace;
    font-size: var(--text-xs, 0.75rem);
    color: var(--color-text-secondary, #3D4E5C);
    opacity: 0.75;
    letter-spacing: 0.01em;
}

/* Project name — bold, primary text */
[b-9c5k3s54lh] .ret-project-name {
    font-weight: 600;
    color: var(--color-text-primary, #0F1A25);
    line-height: 1.3;
}

/* Status chip — tight fit */
[b-9c5k3s54lh] .ret-status-chip {
    height: 18px !important;
    font-size: 11px !important;
    padding: 0 6px !important;
    min-width: 0 !important;
    font-weight: 600;
    letter-spacing: var(--tracking-wide, 0.04em);
}

/* Unit label below quantity */
[b-9c5k3s54lh] .ret-unit-label {
    color: var(--color-text-secondary, #3D4E5C);
    font-size: var(--text-xs, 0.75rem);
    letter-spacing: var(--tracking-wide, 0.04em);
}

/* Reason text — wraps naturally, capped width */
[b-9c5k3s54lh] .ret-reason-text {
    color: var(--color-text-secondary, #3D4E5C);
    max-width: 200px;
    white-space: normal;
    line-height: 1.3;
    font-size: var(--text-xs, 0.75rem);
}

/* Serial number — monospace */
[b-9c5k3s54lh] .ret-serial-mono {
    font-family: 'JetBrains Mono', 'Consolas', 'Fira Code', monospace;
    font-size: var(--text-xs, 0.75rem);
    color: var(--color-text-primary, #0F1A25);
    word-break: break-all;
}

/* Retiree name below serial */
[b-9c5k3s54lh] .ret-retiree-label {
    color: var(--color-text-secondary, #3D4E5C);
    font-size: var(--text-xs, 0.75rem);
}

/* ── Action buttons — always visible on mobile ───────────────── */
/* At md+ (desktop), show on row hover only; at xs/sm always visible */
@media (max-width: 959px) {
    [b-9c5k3s54lh] .grid-action-bar {
        opacity: 1 !important;
    }
    /* Ensure action column doesn't collapse on mobile */
    [b-9c5k3s54lh] .mud-table-cell:last-child {
        min-width: 120px;
    }
}

/* ── Info card ───────────────────────────────────────────────── */
.retirements-info-card[b-9c5k3s54lh] {
    background-color: var(--color-success-bg, #F0FDF4);
    border: 1px solid var(--color-success-border, #BBF7D0) !important;
}

[b-9c5k3s54lh] .retirements-info-card .mud-typography {
    background-color: transparent !important;
}

/* ── Responsive: extra-small phones ─────────────────────────── */
@media (max-width: 599px) {
    .retirements-filter-bar[b-9c5k3s54lh] {
        flex-direction: column;
        align-items: stretch;
    }
    .retirements-filter-bar .mud-input-control[b-9c5k3s54lh],
    .retirements-filter-bar .mud-select[b-9c5k3s54lh] {
        flex: 1 1 100%;
        min-width: 0;
    }
    /* Hide Reference column on xs to save space (always show actions) */
    [b-9c5k3s54lh] .mud-table-head .mud-table-cell:nth-child(4),
    [b-9c5k3s54lh] .mud-table-body .mud-table-cell:nth-child(4) {
        display: none;
    }
}

/* ── Responsive: small tablets ───────────────────────────────── */
@media (min-width: 600px) and (max-width: 959px) {
    .retirements-filter-bar[b-9c5k3s54lh] {
        gap: 8px;
    }
}

/* ── Reduced motion ──────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .retirements-root[b-9c5k3s54lh] { animation: none; }
}

/* _content/AlchemosPositive.Portal/Features/Reference/EmissionFactorExplorer.razor.rz.scp.css */
/* ══════════════════════════════════════════════════════════════
   EmissionFactorExplorer.razor.css
   Archetype 3 — Catalog / Browse (Card-Grid variant)
   Style Contract §10.3 | Slate + Teal | WCAG AA
   ══════════════════════════════════════════════════════════════ */

/* §7.3.2 — Defeat global app.css bg tint on MudText inside gradient surfaces */
[b-xlw6xw7whh] .mud-typography {
    background-color: transparent !important;
}

/* ── Page root — fade-in reveal ──────────────────────── */
.ef-root[b-xlw6xw7whh] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    padding-bottom: var(--space-8);
    animation: efFadeIn-b-xlw6xw7whh var(--transition-reveal) ease-out both;
}

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

/* ── Hero banner ─────────────────────────────────────── */
.ef-hero[b-xlw6xw7whh] {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-xl);
    padding: var(--space-8) var(--space-content);
    background: linear-gradient(
        130deg,
        #d3eeeb 0%,
        #d8f3fa 18%,
        #eff6fb 48%,
        #f0f4ff 72%,
        #f6f0fd 100%
    );
    border: 1px solid rgba(165, 205, 200, 0.55);
    box-shadow: 0 2px 20px rgba(15, 118, 110, 0.06), 0 1px 4px rgba(15, 23, 42, 0.04);
    min-height: 130px;
    display: flex;
    align-items: center;
}

.ef-hero[b-xlw6xw7whh]::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 5% 50%, rgba(45, 212, 191, 0.14) 0%, transparent 52%),
        radial-gradient(ellipse at 90% 20%, rgba(99, 179, 237, 0.09) 0%, transparent 50%);
    pointer-events: none;
}

/* Hero body: left = text + stats, right = decorative icon */
.ef-hero__body[b-xlw6xw7whh] {
    position: relative;
    z-index: 2;
    flex: 1;
    padding-right: calc(80px + var(--space-8));
}

.ef-hero__left[b-xlw6xw7whh] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* Color + spacing only — Typo.overline drives font-shape */
.ef-hero__eyebrow[b-xlw6xw7whh] {
    color: var(--color-accent-text);
    margin: 0 0 var(--space-1) 0;
    letter-spacing: 0.08em;
}

/* Color + weight only — Typo.h5 drives font-shape */
.ef-hero__title[b-xlw6xw7whh] {
    color: var(--color-text-primary);
    margin: 0 0 var(--space-1) 0;
    font-weight: 700;
}

/* Color + max-width only — Typo.subtitle1 drives font-shape */
.ef-hero__sub[b-xlw6xw7whh] {
    color: var(--color-text-secondary);
    margin: 0 0 var(--space-3) 0;
    max-width: 560px;
}

.ef-hero__stats[b-xlw6xw7whh] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-top: var(--space-2);
}

/* Decorative background icon */
.ef-hero__icon-wrap[b-xlw6xw7whh] {
    position: absolute;
    right: var(--space-content);
    top: 50%;
    transform: translateY(-50%);
    opacity: 0.10;
    pointer-events: none;
    line-height: 1;
}

/* ── Stat pills ───────────────────────────────────────── */
.ef-stat-pill[b-xlw6xw7whh] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 999px;
    background-color: rgba(255, 255, 255, 0.70);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(165, 205, 200, 0.55);
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--teal-11);
    transition: background-color var(--transition-interactive);
}

.ef-stat-pill:hover[b-xlw6xw7whh] {
    background-color: rgba(255, 255, 255, 0.88);
}

/* ── Filter bar ───────────────────────────────────────── */
.ef-filter-bar[b-xlw6xw7whh] {
    background-color: var(--color-surface-3) !important;
    border-radius: var(--radius-lg) !important;
    border: 1px solid var(--color-border-subtle) !important;
    padding: 20px !important;
}

/* ── Results header ─────────────────────────────────── */
.ef-results-header[b-xlw6xw7whh] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-height: 40px;
    flex-wrap: wrap;
    gap: var(--space-3);
}

.ef-results-count[b-xlw6xw7whh] {
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--color-text-secondary);
}

/* ── Factor cards grid — §7.3.1 equal height enforcement ── */
.ef-cards-grid[b-xlw6xw7whh]  .mud-grid {
    align-items: stretch;
}

.ef-cards-grid[b-xlw6xw7whh]  .mud-grid-item {
    display: flex;
    flex-direction: column;
}

/* ── Factor card ──────────────────────────────────────── */
[b-xlw6xw7whh] .ef-factor-card {
    /* §7.3.1 — fill the stretching grid cell */
    flex-grow: 1;
    height: 100%;
    min-height: 0;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    cursor: pointer;
    background-color: var(--color-surface-2) !important;
    border: 1px solid var(--color-border-subtle) !important;
    border-radius: var(--radius-lg) !important;
    transition:
        border-color var(--transition-interactive),
        transform var(--transition-interactive),
        box-shadow var(--transition-interactive);
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05) !important;
}

[b-xlw6xw7whh] .ef-factor-card:hover {
    border-color: var(--teal-6) !important;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(15, 118, 110, 0.10) !important;
}

/* Card content fills remaining height */
[b-xlw6xw7whh] .ef-factor-card .mud-card-content {
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* ── Scope avatar badge colors ─────────────────────────── */
.ef-scope-s1[b-xlw6xw7whh] {
    background-color: var(--color-error-bg) !important;
    color: var(--color-error-text) !important;
    border-color: var(--error-200) !important;
}

.ef-scope-s2[b-xlw6xw7whh] {
    background-color: var(--color-warning-bg) !important;
    color: var(--color-warning-text) !important;
    border-color: var(--warning-200) !important;
}

.ef-scope-s3[b-xlw6xw7whh] {
    background-color: var(--color-info-bg) !important;
    color: var(--color-info-text) !important;
    border-color: var(--info-200) !important;
}

.ef-scope-default[b-xlw6xw7whh] {
    background-color: var(--color-bg-component) !important;
    color: var(--color-text-secondary) !important;
    border-color: var(--color-border-default) !important;
}

/* ── Card chips ─────────────────────────────────────────── */
[b-xlw6xw7whh] .ef-factor-card .mud-chip {
    height: 22px !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    letter-spacing: 0.03em;
    padding: 0 8px !important;
    border-radius: var(--radius-sm) !important;
}

/* ── Value row ────────────────────────────────────────── */
.ef-value-row[b-xlw6xw7whh] {
    display: flex;
    gap: 0.75rem;
    margin-top: var(--space-3);
    flex-wrap: wrap;
}

.ef-value-cell[b-xlw6xw7whh] {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 60px;
}

.ef-value-cell__label[b-xlw6xw7whh] {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
    margin-bottom: 2px;
}

.ef-value-cell__value[b-xlw6xw7whh] {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-text-primary);
    line-height: 1.3;
}

.ef-value-cell__value--source[b-xlw6xw7whh] {
    color: var(--teal-9);
    font-size: var(--text-xs);
    font-weight: 600;
}

.ef-value-cell__value--number[b-xlw6xw7whh] {
    color: var(--color-accent-text);
    font-size: var(--text-base);
    font-weight: 700;
}

.ef-value-cell__unit[b-xlw6xw7whh] {
    font-size: var(--text-xs);
    color: var(--color-text-secondary);
    line-height: 1.3;
}

/* ── Expanded section ────────────────────────────────── */
.ef-expanded-section[b-xlw6xw7whh] {
    border-top: 1px solid var(--color-border-subtle);
    margin-top: var(--space-3);
    padding-top: var(--space-3);
    animation: efExpandIn-b-xlw6xw7whh var(--transition-reveal) ease-out both;
}

@keyframes efExpandIn-b-xlw6xw7whh {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

.ef-detail-row[b-xlw6xw7whh] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: var(--space-1);
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
}

/* ── Tags ────────────────────────────────────────────── */
.ef-tags[b-xlw6xw7whh] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: var(--space-2);
}

.ef-tag[b-xlw6xw7whh] {
    font-size: var(--text-xs);
    font-weight: 500;
    padding: 2px 8px;
    border-radius: var(--radius-sm);
    background-color: var(--slate-3);
    color: var(--slate-11);
    border: 1px solid var(--slate-5);
    letter-spacing: 0.02em;
}

/* ── Pagination bar ───────────────────────────────────── */
.ef-pagination-bar[b-xlw6xw7whh] {
    display: flex;
    justify-content: center;
    padding-top: var(--space-4);
    padding-bottom: var(--space-2);
}

/* §7.12 — MudPagination scoped overrides */
[b-xlw6xw7whh] .mud-pagination {
    list-style: none !important;
    gap: 2px;
    align-items: center;
    padding: 0 !important;
    margin: 0 !important;
}

[b-xlw6xw7whh] .mud-pagination-item {
    list-style: none !important;
    display: flex !important;
    align-items: center;
}

[b-xlw6xw7whh] .mud-pagination-item .mud-button-root {
    min-width: 36px;
    height: 36px;
    border-radius: var(--radius-sm) !important;
    font-size: var(--text-sm);
    font-weight: 400;
    color: var(--color-text-secondary);
    background-color: transparent;
    border: 1px solid transparent;
    transition:
        background-color var(--transition-interactive),
        border-color var(--transition-interactive),
        color var(--transition-interactive);
    box-shadow: none !important;
}

[b-xlw6xw7whh] .mud-pagination-item .mud-button-root:hover {
    background-color: var(--color-bg-hover);
    border-color: var(--color-border-default);
    color: var(--color-text-primary);
}

[b-xlw6xw7whh] .mud-pagination-item.mud-pagination-item-selected .mud-button-root {
    background-color: var(--color-accent) !important;
    color: #FFFFFF !important;
    border-color: var(--color-accent) !important;
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(15, 118, 110, 0.25) !important;
}

/* Ellipsis dots ("⋯") — disabled state */
[b-xlw6xw7whh] .mud-pagination-item .mud-button-root[disabled] {
    color: var(--slate-8);
    border-color: transparent;
    background-color: transparent !important;
    cursor: default;
    letter-spacing: 0.05em;
}

/* First/Last/Prev/Next icon buttons */
[b-xlw6xw7whh] .mud-pagination-item .mud-icon-root {
    font-size: 18px;
}

/* ── Loading state ───────────────────────────────────── */
.ef-loading-state[b-xlw6xw7whh] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: var(--space-12) 0;
    gap: var(--space-3);
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
}

/* ── Empty state ─────────────────────────────────────── */
.ef-empty-state[b-xlw6xw7whh] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-12) 0;
    text-align: center;
    gap: var(--space-3);
}

.ef-empty-state__icon[b-xlw6xw7whh] {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background-color: var(--color-accent-subtle);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--space-2);
}

/* ── Responsive: MD breakpoint (< 960px) ─────────────── */
@media (max-width: 959px) {
    .ef-hero__body[b-xlw6xw7whh] {
        padding-right: 0;
    }

    .ef-hero__icon-wrap[b-xlw6xw7whh] {
        display: none;
    }
}

/* ── Responsive: XS breakpoint (< 600px) ─────────────── */
@media (max-width: 599px) {
    .ef-hero[b-xlw6xw7whh] {
        padding: var(--space-5) var(--space-4);
        min-height: unset;
    }

    .ef-hero__sub[b-xlw6xw7whh] {
        display: none;
    }

    .ef-hero__stats[b-xlw6xw7whh] {
        gap: var(--space-2);
    }

    .ef-stat-pill[b-xlw6xw7whh] {
        font-size: var(--text-xs);
        padding: 4px 10px;
    }

    .ef-filter-bar[b-xlw6xw7whh] {
        padding: var(--space-3) var(--space-4);
    }

    .ef-results-header[b-xlw6xw7whh] {
        flex-direction: column;
        align-items: flex-start;
    }

    /* Compact pagination on mobile */
    [b-xlw6xw7whh] .mud-pagination-item .mud-button-root {
        min-width: 32px;
        height: 32px;
        font-size: var(--text-xs);
    }
}

/* ── Reduced motion ───────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .ef-root[b-xlw6xw7whh] {
        animation: none;
    }

    .ef-expanded-section[b-xlw6xw7whh] {
        animation: none;
    }

    .ef-factor-card[b-xlw6xw7whh] {
        transition: none;
    }

    .ef-stat-pill[b-xlw6xw7whh] {
        transition: none;
    }
}
/* _content/AlchemosPositive.Portal/Features/Reporting/ReportBuilder.razor.rz.scp.css */
/* ================================================================
   Report Builder — Component-scoped styles
   Design tokens from alchemosPositiveStyleContract:
     --color-accent, --color-accent-subtle, --color-border-subtle,
     --color-surface-1/2, --color-text-primary/secondary,
     --color-success-bg/text, --color-error-bg/text,
     --teal-*, --violet-*, --slate-*, --space-*, --radius-*, --text-*
   ================================================================ */

/* ── Step header ─────────────────────────────────────────────── */
.rb-step-hdr[b-zk4h2dzkfs] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.rb-step-badge[b-zk4h2dzkfs] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.75rem;
    height: 1.75rem;
    border-radius: 999px;
    background: var(--color-accent);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
    flex-shrink: 0;
}

/* ── Type description ────────────────────────────────────────── */
.rb-type-desc[b-zk4h2dzkfs] {
    display: block;
    padding: 0 2px;
    line-height: 1.5;
}

/* ── Select / format item rows ───────────────────────────────── */
.rb-select-item[b-zk4h2dzkfs] {
    display: flex;
    align-items: center;
}

.rb-fmt-pdf[b-zk4h2dzkfs]   { color: #e53e3e; }
.rb-fmt-excel[b-zk4h2dzkfs] { color: #38a169; }
.rb-fmt-word[b-zk4h2dzkfs]  { color: #3182ce; }
.rb-fmt-html[b-zk4h2dzkfs]  { color: #d97706; }

/* ── Section toggle rows ─────────────────────────────────────── */
.rb-section-row[b-zk4h2dzkfs] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.625rem;
    border-radius: 8px;
    margin-bottom: 2px;
    transition: background 140ms ease-out;
}

.rb-section-row:hover[b-zk4h2dzkfs] {
    background: var(--color-accent-subtle);
}

.rb-section-row--on[b-zk4h2dzkfs] {
    background: var(--color-accent-subtle);
}

.rb-section-row__icon[b-zk4h2dzkfs] {
    opacity: 0.5;
    flex-shrink: 0;
    transition: opacity 140ms ease-out, color 140ms ease-out;
}

.rb-section-row--on .rb-section-row__icon[b-zk4h2dzkfs] {
    opacity: 1;
    color: var(--color-accent);
}

.rb-section-row__label[b-zk4h2dzkfs] {
    flex: 1;
    font-size: 0.875rem;
    font-weight: 450;
    color: var(--color-text-secondary, var(--slate-11));
    transition: color 140ms ease-out, font-weight 140ms ease-out;
}

.rb-section-row--on .rb-section-row__label[b-zk4h2dzkfs] {
    color: var(--color-text-primary, var(--slate-12));
    font-weight: 500;
}

/* Push MudCheckBox to far right */
.rb-section-row[b-zk4h2dzkfs]  .mud-checkbox {
    margin: 0;
    padding: 4px;
}

/* ── Generate button ─────────────────────────────────────────── */
.rb-generate-btn[b-zk4h2dzkfs] {
    border-radius: 10px !important;
    height: 3rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.015em !important;
    font-size: 0.9375rem !important;
}

/* ── Preview container ───────────────────────────────────────── */
.rb-preview[b-zk4h2dzkfs] {
    display: flex;
    flex-direction: column;
    min-height: 680px;
    overflow: hidden;
}

.rb-preview__header[b-zk4h2dzkfs] {
    padding: 0.75rem 1.25rem;
    border-bottom: 1px solid var(--color-border-subtle);
    background: var(--color-surface-1);
    border-radius: 12px 12px 0 0;
    position: sticky;
    top: 0;
    z-index: 2;
}

.rb-preview__body[b-zk4h2dzkfs] {
    padding: 2rem 2.25rem 1.75rem;
    flex: 1;
    overflow-y: auto;
}

/* ── Cover / title block ─────────────────────────────────────── */
.rb-cover[b-zk4h2dzkfs] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding-bottom: 1.75rem;
    gap: 0.4rem;
}

.rb-cover__eco[b-zk4h2dzkfs] {
    width: 3.25rem;
    height: 3.25rem;
    border-radius: 50%;
    background: var(--color-accent-subtle);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.375rem;
}

.rb-cover__eco-icon[b-zk4h2dzkfs] {
    font-size: 1.625rem !important;
    color: var(--color-accent) !important;
}

.rb-cover__text[b-zk4h2dzkfs] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.rb-cover__title[b-zk4h2dzkfs] {
    font-size: 1.625rem;
    font-weight: 700;
    color: var(--color-text-primary, var(--slate-12));
    line-height: 1.2;
    letter-spacing: -0.02em;
}

.rb-cover__period[b-zk4h2dzkfs] {
    font-size: 0.9375rem;
    color: var(--color-text-secondary, var(--slate-11));
    font-weight: 500;
}

.rb-cover__org[b-zk4h2dzkfs] {
    font-size: 0.8125rem;
    color: var(--slate-9, #64748b);
}

.rb-cover__chips[b-zk4h2dzkfs] {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 0.5rem;
}

/* ── Section divider ─────────────────────────────────────────── */
.rb-preview__divider[b-zk4h2dzkfs] {
    height: 1px;
    background: var(--color-border-subtle);
    margin-bottom: 1.75rem;
}

/* ── Preview section blocks ──────────────────────────────────── */
.rb-sec[b-zk4h2dzkfs] {
    margin-bottom: 2.125rem;
}

.rb-sec__hdr[b-zk4h2dzkfs] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--color-text-primary, var(--slate-12));
    margin-bottom: 0.875rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--color-accent-subtle);
}

.rb-sec__hdr[b-zk4h2dzkfs]  .mud-icon-root {
    color: var(--color-accent);
}

.rb-sec__body[b-zk4h2dzkfs] {
    font-size: 0.875rem;
    color: var(--color-text-secondary, var(--slate-11));
    line-height: 1.75;
    margin: 0;
}

/* ── Scope cards ─────────────────────────────────────────────── */
.rb-scope-grid[b-zk4h2dzkfs] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
}

.rb-scope-card[b-zk4h2dzkfs] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 1rem 0.75rem;
    border-radius: 10px;
    border: 1px solid var(--color-border-subtle);
    background: var(--color-surface-1);
    gap: 0.125rem;
}

.rb-scope-card--1[b-zk4h2dzkfs] { border-top: 3px solid var(--teal-6); }
.rb-scope-card--2[b-zk4h2dzkfs] { border-top: 3px solid var(--violet-6); }
.rb-scope-card--3[b-zk4h2dzkfs] { border-top: 3px solid var(--color-warning-border, #fbbf24); }

.rb-scope-card__lbl[b-zk4h2dzkfs] {
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--color-text-secondary, var(--slate-11));
    margin-bottom: 0.25rem;
}

.rb-scope-card__val[b-zk4h2dzkfs] {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--color-text-primary, var(--slate-12));
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.rb-scope-card__unit[b-zk4h2dzkfs] {
    font-size: 0.6875rem;
    color: var(--color-text-secondary, var(--slate-11));
}

.rb-scope-card__delta[b-zk4h2dzkfs] {
    margin-top: 0.375rem;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: 4px;
    padding: 2px 7px;
}

.rb-scope-card__delta.positive[b-zk4h2dzkfs] {
    color: var(--color-success-text);
    background: var(--color-success-bg);
}

.rb-scope-card__delta.negative[b-zk4h2dzkfs] {
    color: var(--color-error-text);
    background: var(--color-error-bg);
}

/* ── Emission category bar chart ─────────────────────────────── */
.rb-barchart[b-zk4h2dzkfs] {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

.rb-barchart__row[b-zk4h2dzkfs] {
    display: grid;
    grid-template-columns: 8.5rem 1fr 6.5rem;
    align-items: center;
    gap: 0.75rem;
}

.rb-barchart__label[b-zk4h2dzkfs] {
    font-size: 0.8125rem;
    color: var(--color-text-secondary, var(--slate-11));
    text-align: right;
    white-space: nowrap;
}

.rb-barchart__track[b-zk4h2dzkfs] {
    height: 6px;
    background: var(--color-accent-subtle);
    border-radius: 999px;
    overflow: hidden;
}

.rb-barchart__bar[b-zk4h2dzkfs] {
    height: 100%;
    background: var(--color-accent);
    border-radius: 999px;
    transition: width 500ms ease-out;
}

.rb-barchart__val[b-zk4h2dzkfs] {
    font-size: 0.75rem;
    color: var(--color-text-secondary, var(--slate-11));
    font-variant-numeric: tabular-nums;
    text-align: right;
}

/* ── Year-over-Year comparison ───────────────────────────────── */
.rb-yoy[b-zk4h2dzkfs] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.625rem;
}

.rb-yoy__col[b-zk4h2dzkfs] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 0.875rem 0.5rem;
    border-radius: 10px;
    background: var(--color-surface-1);
    border: 1px solid var(--color-border-subtle);
    gap: 0.25rem;
}

.rb-yoy__year[b-zk4h2dzkfs] {
    font-size: 0.6875rem;
    font-weight: 700;
    color: var(--color-text-secondary, var(--slate-11));
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.rb-yoy__val[b-zk4h2dzkfs] {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--color-text-primary, var(--slate-12));
    font-variant-numeric: tabular-nums;
}

.rb-yoy__delta[b-zk4h2dzkfs] {
    font-size: 0.6875rem;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 4px;
}

.rb-yoy__delta.positive[b-zk4h2dzkfs] {
    color: var(--color-success-text);
    background: var(--color-success-bg);
}

.rb-yoy__delta.negative[b-zk4h2dzkfs] {
    color: var(--color-error-text);
    background: var(--color-error-bg);
}

/* ── Target progress ─────────────────────────────────────────── */
.rb-target[b-zk4h2dzkfs] {
    margin-bottom: 1.125rem;
}

.rb-target__row[b-zk4h2dzkfs] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 0.375rem;
}

.rb-target__name[b-zk4h2dzkfs] {
    font-size: 0.875rem;
    color: var(--color-text-primary, var(--slate-12));
    font-weight: 500;
}

.rb-target__meta[b-zk4h2dzkfs] {
    font-size: 0.75rem;
    color: var(--color-text-secondary, var(--slate-11));
    font-variant-numeric: tabular-nums;
}

/* ── Offset portfolio stats ──────────────────────────────────── */
.rb-offset-grid[b-zk4h2dzkfs] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
}

.rb-offset-stat[b-zk4h2dzkfs] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 1rem 0.5rem;
    border-radius: 10px;
    border: 1px solid var(--color-border-subtle);
    background: var(--color-surface-1);
    gap: 0.25rem;
}

.rb-offset-stat__val[b-zk4h2dzkfs] {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-accent);
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.rb-offset-stat__lbl[b-zk4h2dzkfs] {
    font-size: 0.75rem;
    color: var(--color-text-secondary, var(--slate-11));
    line-height: 1.4;
}

/* ── Empty state ─────────────────────────────────────────────── */
.rb-preview__empty[b-zk4h2dzkfs] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 320px;
    text-align: center;
}

/* ── Footer ──────────────────────────────────────────────────── */
.rb-preview__footer[b-zk4h2dzkfs] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--color-border-subtle);
    font-size: 0.75rem;
    color: var(--slate-9, #64748b);
    line-height: 1.5;
}

.rb-preview__footer[b-zk4h2dzkfs]  .mud-icon-root {
    opacity: 0.6;
    flex-shrink: 0;
}

/* ── Preview loading overlay ─────────────────────────────────── */
.rb-preview__body--loading[b-zk4h2dzkfs] {
    opacity: 0.55;
    pointer-events: none;
    transition: opacity 0.15s ease;
}

/* ── Dark mode overrides ─────────────────────────────────────── */
[data-theme="dark"] .rb-preview__header[b-zk4h2dzkfs] {
    background: var(--color-surface-2);
}

[data-theme="dark"] .rb-cover__title[b-zk4h2dzkfs] {
    color: var(--color-text-primary-dark, #e2e8f0);
}

[data-theme="dark"] .rb-scope-card[b-zk4h2dzkfs],
[data-theme="dark"] .rb-yoy__col[b-zk4h2dzkfs],
[data-theme="dark"] .rb-offset-stat[b-zk4h2dzkfs] {
    background: var(--color-surface-2);
}
/* _content/AlchemosPositive.Portal/Features/Reporting/Reports.razor.rz.scp.css */
/* ── Reports page scoped styles ─────────────────────────────────────── */

[b-de1zbp5mdz] .reports-table .mud-table-row td {
    padding-top: 13px !important;
    padding-bottom: 13px !important;
}

[b-de1zbp5mdz] .reports-table tr.row-even td {
    background-color: rgba(0, 0, 0, 0.022);
}

[b-de1zbp5mdz] .reports-table .mud-table-hover-row:hover td {
    background-color: color-mix(in srgb, var(--color-accent) 6%, transparent) !important;
    transition: background-color var(--transition-fast, 120ms) ease;
}

.filter-bar[b-de1zbp5mdz] {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

.filter-search[b-de1zbp5mdz] {
    flex: 1 1 200px;
    min-width: 180px;
}

.filter-select[b-de1zbp5mdz] {
    flex: 0 0 150px;
}
/* _content/AlchemosPositive.Portal/Features/Reporting/ScheduledReports.razor.rz.scp.css */
/* ============================================================
   ScheduledReports.razor.css — Scoped styles
   Archetype 3: List Page | alchemosPositiveStyleContract
   ============================================================ */

/* ── Page root ──────────────────────────────────────────────── */
.schedules-root[b-duhodbpme5] {
    animation: schedulesPageIn-b-duhodbpme5 0.25s ease-out both;
}

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

/* ── Hero Banner ────────────────────────────────────────────── */
.schedules-hero[b-duhodbpme5] {
    position: relative;
    overflow: hidden;
}

.schedules-hero__icon-wrap[b-duhodbpme5] {
    position: absolute;
    right: 1.5rem;
    bottom: 0.75rem;
    opacity: 0.12;
    pointer-events: none;
}

.schedules-eyebrow[b-duhodbpme5] {
    color: var(--color-accent, #0F766E);
    font-weight: 600;
    letter-spacing: 0.08em;
}

.schedules-title[b-duhodbpme5] {
    color: var(--color-text-primary, #0f172a);
    font-weight: 700;
    line-height: 1.25;
}

.schedules-sub[b-duhodbpme5] {
    color: var(--color-text-muted, #64748b);
    margin-top: 0.25rem;
}

/* ── KPI Cards ──────────────────────────────────────────────── */
.schedules-kpi-card[b-duhodbpme5] {
    height: 100%;
    min-height: 84px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.schedules-kpi-icon[b-duhodbpme5] {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* Primary variant — teal accent */
.schedules-kpi-icon--primary[b-duhodbpme5] {
    background: rgba(15, 118, 110, 0.12);
    color: var(--color-accent, #0F766E);
}

/* Success variant — green */
.schedules-kpi-icon--success[b-duhodbpme5] {
    background: rgba(34, 197, 94, 0.12);
    color: #16a34a;
}

/* Warning variant — amber */
.schedules-kpi-icon--warning[b-duhodbpme5] {
    background: rgba(245, 158, 11, 0.12);
    color: #b45309;
}

/* Info variant — sky blue */
.schedules-kpi-icon--info[b-duhodbpme5] {
    background: rgba(14, 165, 233, 0.12);
    color: #0369a1;
}

.schedules-kpi-value[b-duhodbpme5] {
    font-weight: 700;
    color: var(--color-text-primary, #0f172a);
    line-height: 1.2;
}

.schedules-kpi-label[b-duhodbpme5] {
    color: var(--color-text-muted, #64748b);
}

/* ── Filter Toolbar ─────────────────────────────────────────── */
/* Flex layout + MudBlazor inner element sizing is handled via
   an unscoped <style> block in the razor file (same as Orders.razor),
   since CSS isolation cannot target MudBlazor's internal mud-input-control
   class without the ::deep combinator losing parent-scope resolution.      */

.schedules-filter-clear[b-duhodbpme5] {
    align-self: center;
    white-space: nowrap;
}

/* ── Table Card ─────────────────────────────────────────────── */
.schedules-table-card[b-duhodbpme5] {
    overflow: hidden;
}

.schedules-progress[b-duhodbpme5] {
    border-radius: 0;
}

/* Transparent cell backgrounds so card bg shows through */
[b-duhodbpme5] .mud-table-cell {
    background-color: transparent !important;
}

[b-duhodbpme5] .mud-table-head .mud-table-cell {
    text-transform: uppercase;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    color: var(--color-text-muted, #64748b);
    background-color: transparent !important;
}

/* Prevent MudBlazor typography from adding bg inside cells */
[b-duhodbpme5] .mud-typography {
    background-color: transparent !important;
}

/* ── Column: Schedule name + type ───────────────────────────── */
.schedules-name[b-duhodbpme5] {
    font-weight: 600;
    color: var(--color-text-primary, #0f172a);
}

.schedules-type-label[b-duhodbpme5] {
    color: var(--color-text-muted, #64748b);
    font-size: 0.75rem;
}

/* ── Next run label ─────────────────────────────────────────── */
.schedules-caption[b-duhodbpme5] {
    color: var(--color-text-muted, #64748b);
    font-size: 0.75rem;
}

/* Urgent: due today or tomorrow */
.schedules-soon[b-duhodbpme5] {
    color: #d97706;
    font-size: 0.75rem;
    font-weight: 600;
}

/* ── Muted icon color ───────────────────────────────────────── */
.schedules-icon-muted[b-duhodbpme5] {
    color: var(--color-text-muted, #94a3b8) !important;
}

/* ── Format icons ───────────────────────────────────────────── */
.schedules-fmt-pdf[b-duhodbpme5]   { color: #dc2626 !important; }
.schedules-fmt-excel[b-duhodbpme5] { color: #16a34a !important; }
.schedules-fmt-word[b-duhodbpme5]  { color: #2563eb !important; }
.schedules-fmt-html[b-duhodbpme5]  { color: #7c3aed !important; }

/* ── Frequency chip — smaller & dense ──────────────────────── */
.schedules-freq-chip[b-duhodbpme5] {
    font-size: 0.7rem !important;
    height: 20px !important;
    min-width: 0 !important;
}

/* ── Status chip ────────────────────────────────────────────── */
.schedules-status-chip[b-duhodbpme5] {
    font-size: 0.7rem !important;
    height: 20px !important;
    min-width: 60px !important;
    justify-content: center;
}

/* ── Action buttons — always visible (override hover-opacity) ── */
.schedules-actions[b-duhodbpme5] {
    opacity: 1 !important;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 2px;
}

/* ── Empty state ─────────────────────────────────────────────── */
.schedules-empty[b-duhodbpme5] {
    padding: 3rem 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    opacity: 0.75;
}

/* ── Responsive column hiding ───────────────────────────────── */
/* Same breakpoint tokens as global table-col-hide-xs/sm */
@media (max-width: 599px) {
    [b-duhodbpme5] .table-col-hide-xs {
        display: none !important;
    }
}

@media (max-width: 959px) {
    [b-duhodbpme5] .table-col-hide-sm {
        display: none !important;
    }
}

@media (max-width: 599px) {
    .schedules-filter-bar[b-duhodbpme5] {
        flex-direction: column;
    }

    .schedules-filter-search[b-duhodbpme5],
    .schedules-filter-select[b-duhodbpme5] {
        width: 100%;
        flex: none;
    }
}
/* _content/AlchemosPositive.Portal/Features/Settings/IntegrationsSettings.razor.rz.scp.css */
/* ── KPI Cards ──────────────────────────────────────────────────────────── */
.integ-kpi-card[b-at30sjwm11] {
    transition: box-shadow 120ms ease-out, border-color 120ms ease-out;
}

.integ-kpi-card:hover[b-at30sjwm11] {
    border-color: var(--teal-7);
}

/* ── Filter Bar ─────────────────────────────────────────────────────────── */
.integ-filter-bar[b-at30sjwm11] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.integ-search-field[b-at30sjwm11] {
    flex: 1 1 220px;
    min-width: 160px;
}

.integ-status-select[b-at30sjwm11] {
    flex: 0 0 160px;
}

/* ── Integration Cards ───────────────────────────────────────────────────── */
.integ-card[b-at30sjwm11] {
    transition: box-shadow 120ms ease-out, border-color 120ms ease-out;
}

.integ-card:hover[b-at30sjwm11] {
    border-color: var(--teal-7);
}

.integ-card--busy[b-at30sjwm11] {
    opacity: 0.8;
}

.integ-card__row[b-at30sjwm11] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.integ-card__identity[b-at30sjwm11] {
    display: flex;
    align-items: flex-start;
    gap: 0.875rem;
    flex: 1 1 260px;
    min-width: 200px;
}

.integ-avatar[b-at30sjwm11] {
    flex-shrink: 0;
}

.integ-card__meta[b-at30sjwm11] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.integ-card__name[b-at30sjwm11] {
    font-weight: 600;
    line-height: 1.3;
}

.integ-card__desc[b-at30sjwm11] {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    max-width: 400px;
}

.integ-card__timestamps[b-at30sjwm11] {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    margin-top: 0.1rem;
}

.integ-card__actions[b-at30sjwm11] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.integ-status-chip[b-at30sjwm11] {
    font-weight: 500;
}

/* ── Empty State ─────────────────────────────────────────────────────────── */
.integ-empty-state[b-at30sjwm11] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    padding: 3rem 1rem;
    text-align: center;
}

/* ── Responsive tweaks ───────────────────────────────────────────────────── */
@media (max-width: 600px) {
    .integ-card__row[b-at30sjwm11] {
        flex-direction: column;
        align-items: flex-start;
    }

    .integ-card__actions[b-at30sjwm11] {
        justify-content: flex-start;
        width: 100%;
    }
}
/* _content/AlchemosPositive.Portal/Features/Settings/NotificationSettings.razor.rz.scp.css */
/* ── Notification Settings — Scoped Styles ─────────────────────────────────── */

/* Unsaved changes banner */
[b-z6nve0wq9y] .notif-unsaved-alert {
    border-radius: 8px;
    animation: notif-slide-in-b-z6nve0wq9y 200ms ease-out;
}

@keyframes notif-slide-in-b-z6nve0wq9y {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Channel card consistent height within a row */
[b-z6nve0wq9y] .notif-channel-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    transition: box-shadow 200ms ease-out;
}

[b-z6nve0wq9y] .notif-channel-card:hover {
    box-shadow: 0 2px 8px rgba(15, 26, 37, 0.06);
}

[b-z6nve0wq9y] .notif-card-header {
    padding-bottom: 4px;
    /* Prevent switch wrapping to next line */
    flex-wrap: nowrap !important;
    align-items: center !important;
}

/* Keep the switch always on the same line — never shrink or wrap */
[b-z6nve0wq9y] .notif-card-header .mud-card-header-actions {
    flex-shrink: 0 !important;
    align-self: center;
    margin-left: auto;
}

/* Allow text content to shrink so switch stays on the right */
[b-z6nve0wq9y] .notif-card-header .mud-card-header-content {
    flex: 1 1 0;
    min-width: 0;
    overflow: hidden;
}

[b-z6nve0wq9y] .notif-card-body {
    flex: 1;
}

/* Category row — icon + label + switch in a clean line */
.notif-category-row[b-z6nve0wq9y] {
    display: flex;
    align-items: center;
    padding: 6px 8px;
    border-radius: 6px;
    transition: background-color 150ms ease-out, opacity 150ms ease-out;
}

.notif-category-row:hover:not(.disabled)[b-z6nve0wq9y] {
    background-color: var(--mud-palette-background-gray, #f4f6f8);
}

.notif-category-row.disabled[b-z6nve0wq9y] {
    opacity: 0.45;
    pointer-events: none;
}

/* Switch wrapper — stay on same line, don't stretch to full width */
[b-z6nve0wq9y] .notif-category-row .mud-input-control-boolean-input {
    flex-shrink: 0;
    width: auto !important;
    margin-left: auto;
}
/* Action bar sticky at bottom */
[b-z6nve0wq9y] .notif-action-bar {
    position: sticky;
    bottom: 0;
    z-index: 1;
    border-top: 1px solid var(--mud-palette-lines-default, #e0e0e0);
}
/* _content/AlchemosPositive.Portal/Features/Settings/SecuritySettings.razor.rz.scp.css */
/* ── Security Settings — component-scoped styles ────────────────────────── */

/* Session / API key row */
[b-91sjg82v4v] .sec-session-row {
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    background: var(--slate-2);
    border: 1px solid var(--slate-3);
    transition: background var(--transition-interactive);
}

[b-91sjg82v4v] .sec-session-row:hover {
    background: var(--slate-3);
    border-color: var(--slate-4);
}

/* Currently active session highlight */
[b-91sjg82v4v] .sec-session-current {
    background: color-mix(in srgb, var(--teal-1) 60%, var(--slate-2));
    border-color: var(--teal-6);
}

[b-91sjg82v4v] .sec-session-current:hover {
    background: color-mix(in srgb, var(--teal-2) 60%, var(--slate-2));
}

/* Revoked / inactive API key row */
[b-91sjg82v4v] .sec-session-revoked {
    opacity: 0.55;
}

/* Section sublabel e.g. "Active Methods" */
[b-91sjg82v4v] .sec-section-label {
    font-size: var(--text-xs) !important;
    letter-spacing: var(--tracking-wide) !important;
    text-transform: uppercase !important;
    color: var(--slate-9) !important;
    font-weight: 600 !important;
}

/* Status / MFA enabled badge */
[b-91sjg82v4v] .sec-badge {
    font-size: var(--text-xs) !important;
    height: 24px !important;
    padding: 0 var(--space-2) !important;
}

/* Consistent button alignment in action rows */
[b-91sjg82v4v] .sec-action-btn {
    align-self: flex-start;
}
/* _content/AlchemosPositive.Portal/Features/Settings/SettingsOrganization.razor.rz.scp.css */
/* Fallback values removed — joy-tokens.css is guaranteed to load first (linked before app.css in App.razor) */

.spring-hero__right[b-2417ip6e0z] {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

/* Logo placeholder */
.org-logo-placeholder[b-2417ip6e0z] {
    width: 80px;
    height: 80px;
    border-radius: var(--radius-md);
    border: 2px dashed var(--slate-6);
    background: var(--slate-2);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
}

.org-logo-img[b-2417ip6e0z] {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
/* _content/AlchemosPositive.Portal/Features/TargetTracking/SetTarget.razor.rz.scp.css */
.breadcrumbs-muted[b-8bxp6a03ml] {
    opacity: 0.75;
}

.hero-flag-icon[b-8bxp6a03ml] {
    font-size: 5rem;
    opacity: 0.18;
}

.sbti-snapshot[b-8bxp6a03ml] {
    background: var(--color-bg-subtle);
    border: 1px solid var(--color-border-default);
}
/* _content/AlchemosPositive.Portal/Features/TargetTracking/TargetDashboard.razor.rz.scp.css */
/* ────────────────────────────────────────────────────────────────
   TargetDashboard.razor.css
   Archetype 2 — Dashboard (§10.2)
   Scope: /targets page only
   ──────────────────────────────────────────────────────────────── */

/* ── Required: defeat global app.css bg injection on MudText ─── */
[b-q4kdbm2ouk] .mud-typography {
    background-color: transparent !important;
}

/* ── Hero ───────────────────────────────────────────────────────── */
.breadcrumbs-muted[b-q4kdbm2ouk] {
    opacity: 0.75;
}

/* ── KPI cards — equal height (§7.3.1) ─────────────────────────── */
.tgt-kpi-card[b-q4kdbm2ouk] {
    height: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

/* ── Target progress cards — equal height (§7.3.1) ─────────────── */
.tgt-card[b-q4kdbm2ouk] {
    height: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}

.tgt-card .tgt-card__grow[b-q4kdbm2ouk] {
    flex: 1;
}

/* ── Two-line metric rows ────────────────────────────────────────
   Each metric = small label (line 1) + value (line 2). No wrap.  */
.tgt-metric[b-q4kdbm2ouk] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.tgt-metric__label[b-q4kdbm2ouk] {
    color: var(--color-text-secondary);
    font-size: var(--text-xs);
    font-weight: 500;
    letter-spacing: var(--tracking-wide);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tgt-metric__value[b-q4kdbm2ouk] {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
}

.tgt-metric__value--success[b-q4kdbm2ouk] { color: var(--color-success-text); }
.tgt-metric__value--warning[b-q4kdbm2ouk] { color: var(--color-warning-text); }
.tgt-metric__value--error[b-q4kdbm2ouk]   { color: var(--color-error-text); }

/* ── Filter chip bar ────────────────────────────────────────────── */
.tgt-section-header[b-q4kdbm2ouk] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.tgt-section-title[b-q4kdbm2ouk] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.tgt-search[b-q4kdbm2ouk] {
    min-width: 180px;
    max-width: 280px;
    flex: 1 1 180px;
}

.tgt-filter-bar[b-q4kdbm2ouk] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin-bottom: 16px;
}

/* ── Chart section ──────────────────────────────────────────────── */
.tgt-chart-header[b-q4kdbm2ouk] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.tgt-chart-title[b-q4kdbm2ouk] {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* ── SBTi info panel ─────────────────────────────────────────────── */
.tgt-sbti-item[b-q4kdbm2ouk] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 0;
    border-bottom: 1px solid var(--color-border-subtle);
}

.tgt-sbti-item:last-child[b-q4kdbm2ouk] {
    border-bottom: none;
    padding-bottom: 0;
}

.tgt-sbti-icon[b-q4kdbm2ouk] {
    flex-shrink: 0;
    margin-top: 1px;
}

/* ── KPI cards — status tints ─────────────────────────────────────
   Applied to the MudPaper wrapping each KPI. Provides a subtle
   visual cue without overpowering the content.                     */
.tgt-kpi-card--success[b-q4kdbm2ouk] { background-color: var(--color-success-bg)  !important; }
.tgt-kpi-card--warning[b-q4kdbm2ouk] { background-color: var(--color-warning-bg)  !important; }
.tgt-kpi-card--error[b-q4kdbm2ouk]   { background-color: var(--color-error-bg)    !important; }
.tgt-kpi-card--alarm[b-q4kdbm2ouk]   { background-color: var(--color-error-bg)    !important; } /* OnTrack=0 */

/* Sub-label beneath the big number in a KPI card */
.tgt-kpi-sub[b-q4kdbm2ouk] {
    font-size: var(--text-xs);
    color: var(--color-text-secondary);
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Portfolio aggregate stats bar ───────────────────────────────── */
.tgt-portfolio-stats[b-q4kdbm2ouk] {
    border-top: 2px solid var(--color-accent-subtle);
}

.tgt-pstat[b-q4kdbm2ouk] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px 16px;
    border-right: 1px solid var(--color-border-subtle);
}

.tgt-pstat:last-child[b-q4kdbm2ouk]  { border-right: none; }
@media (max-width: 599px) { .tgt-pstat[b-q4kdbm2ouk] { border-right: none; border-bottom: 1px solid var(--color-border-subtle); } }

.tgt-pstat__label[b-q4kdbm2ouk] {
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: var(--tracking-wide);
    color: var(--color-text-secondary);
    text-transform: uppercase;
}

.tgt-pstat__value[b-q4kdbm2ouk] {
    font-size: var(--text-lg);
    font-weight: 700;
    color: var(--color-text-primary);
    line-height: 1.2;
}

.tgt-pstat__sub[b-q4kdbm2ouk] {
    font-size: var(--text-xs);
    color: var(--color-text-secondary);
}

/* ── Target card — status left border ─────────────────────────────── */
.tgt-card--on-track[b-q4kdbm2ouk]   { border-left: 3px solid var(--success-600) !important; }
.tgt-card--at-risk[b-q4kdbm2ouk]    { border-left: 3px solid var(--warning-500) !important; }
.tgt-card--off-track[b-q4kdbm2ouk]  { border-left: 3px solid var(--error-600)   !important; }
.tgt-card--no-data[b-q4kdbm2ouk]    { border-left: 3px solid var(--slate-7)     !important; }

/* ── Rate comparison arrow ──────────────────────────────────────────
   Inline indicator showing if actual rate is above or below required */
.tgt-rate-arrow[b-q4kdbm2ouk] {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    font-size: 11px;
    font-weight: 600;
    margin-left: 4px;
}
.tgt-rate-arrow--up[b-q4kdbm2ouk]   { color: var(--color-success-text); }
.tgt-rate-arrow--down[b-q4kdbm2ouk] { color: var(--color-error-text);   }

/* ── Pathway badge ──────────────────────────────────────────────────
   Teal-tinted badge for SBTi pathway labels (1.5°C / WB2°C / 2°C)  */
.tgt-pathway-badge[b-q4kdbm2ouk] {
    display: inline-flex;
    align-items: center;
    background-color: var(--teal-2, #CCFBF1);
    color: var(--teal-11, #0C5E58);
    border: 1px solid var(--teal-6, #14B8A6);
    border-radius: 4px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.03em;
    padding: 1px 6px;
    height: 18px;
    line-height: 16px;
    white-space: nowrap;
}

/* ── SBTi inline bar (slim replacement for full panel) ───────────── */
.tgt-sbti-slim[b-q4kdbm2ouk] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
}

.tgt-sbti-pathways[b-q4kdbm2ouk] {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.tgt-sbti-pathway-item[b-q4kdbm2ouk] {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* ── Empty state ─────────────────────────────────────────────────── */
.page-empty-state[b-q4kdbm2ouk] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 1.5rem;
    text-align: center;
}

/* ── Stack revert on mobile (§7.3.1) ────────────────────────────── */
@media (max-width: 959px) {
    .tgt-kpi-card[b-q4kdbm2ouk],
    .tgt-card[b-q4kdbm2ouk] {
        height: auto;
    }

    .tgt-search[b-q4kdbm2ouk] {
        max-width: 100%;
        width: 100%;
    }

    .tgt-section-header[b-q4kdbm2ouk] {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ── Reduced motion ──────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    *[b-q4kdbm2ouk], *[b-q4kdbm2ouk]::before, *[b-q4kdbm2ouk]::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}
/* _content/AlchemosPositive.Portal/Features/TargetTracking/TargetDetails.razor.rz.scp.css */
.target-subtitle[b-ehjlylyn3u] {
    color: var(--color-text-secondary);
}

.progress-circle-wrap[b-ehjlylyn3u] {
    height: 150px;
}

.legend-line[b-ehjlylyn3u] {
    width: 16px;
    height: 3px;
    margin-right: 8px;
}

.legend-line--actual[b-ehjlylyn3u] {
    background-color: var(--color-accent);
}

.legend-line--target[b-ehjlylyn3u] {
    background-color: var(--color-success-solid);
}

.legend-line--projected[b-ehjlylyn3u] {
    background-color: var(--color-warning-solid);
    border-style: dashed;
}

.target-hero[b-ehjlylyn3u]  .mud-typography {
    color: var(--color-text-primary) !important;
}

.milestone-timeline[b-ehjlylyn3u] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.milestone-item[b-ehjlylyn3u] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem;
    background: var(--color-bg-component);
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border-subtle);
}

.milestone-item--achieved[b-ehjlylyn3u] {
    border-color: var(--color-success-border);
    background: var(--color-success-bg);
}

.milestone-item--missed[b-ehjlylyn3u] {
    border-color: var(--color-error-border);
    background: var(--color-error-bg);
}

.milestone-item--at-risk[b-ehjlylyn3u] {
    border-color: var(--color-warning-border);
    background: var(--color-warning-bg);
}

.milestone-caption[b-ehjlylyn3u] {
    color: var(--color-text-secondary);
}

[b-ehjlylyn3u] .mud-typography {
    background-color: transparent !important;
}

/* ── Two-line metric rows (shared with TargetDashboard) ────────── */
.tgt-metric[b-ehjlylyn3u] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.tgt-metric__label[b-ehjlylyn3u] {
    color: var(--color-text-secondary);
    font-size: 0.65rem;
    font-weight: 500;
    letter-spacing: 0.05em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tgt-metric__value[b-ehjlylyn3u] {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
}

.tgt-metric__sub[b-ehjlylyn3u] {
    font-size: 0.65rem;
    color: var(--color-text-secondary);
}

.tgt-metric__value--primary[b-ehjlylyn3u] { color: var(--mud-palette-primary); }
.tgt-metric__value--success[b-ehjlylyn3u] { color: var(--color-success-text); }
.tgt-metric__value--warning[b-ehjlylyn3u] { color: var(--color-warning-text); }
.tgt-metric__value--error[b-ehjlylyn3u]   { color: var(--color-error-text); }

/* ── Chart / section header (shared with TargetDashboard) ───────── */
.tgt-chart-header[b-ehjlylyn3u] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.tgt-chart-title[b-ehjlylyn3u] {
    display: flex;
    align-items: center;
    gap: 8px;
}