/* === FINMOZHI THEME — Phase 1 polish (sidebar, hero, cards, dark mode) ===
   Design tokens consolidated here. Spacing follows an 8px scale
   (0.25 / 0.5 / 0.75 / 1 / 1.5 / 2 / 3 rem = 4/8/12/16/24/32/48 px). */

/* ── VARIABLES ── */
:root {
  /* Sidebar — narrower + desaturated for enterprise feel */
  --sidebar-width: 15rem;
  --sidebar: #733da0;
  --sidebar-foreground: #ffffff;
  --sidebar-primary: #733da0;
  --sidebar-primary-foreground: #ffffff;
  --sidebar-accent: #733da0;
  --sidebar-accent-foreground: #ffffff;
  --sidebar-border: rgba(255, 255, 255, 0.08);
  --sidebar-ring: #c4b5fd;

  /* Finmozhi accent (brand purple used as accent, not dominant surface) */
  --fm-accent: #7c3aed;
  --fm-accent-soft: rgba(124, 58, 237, 0.10);
  --fm-accent-glow: rgba(167, 139, 250, 0.28);

  /* Unified radii */
  --fm-radius-sm: 8px;
  --fm-radius: 12px;
  --fm-radius-lg: 16px;
}

.dark {
  --sidebar: #733da0;
  --sidebar-foreground: #ffffff;
  --sidebar-primary: #733da0;
  --sidebar-primary-foreground: #ffffff;
  --sidebar-accent: #733da0;
  --sidebar-accent-foreground: #ffffff;
  --sidebar-border: rgba(255, 255, 255, 0.06);

  /* Richer dark surfaces — purple reserved for accents only */
  --background: #0b0b10;
  --foreground: #f5f5f7;
  --card: #15151c;
  --card-foreground: #f5f5f7;
  --popover: #15151c;
  --popover-foreground: #f5f5f7;
  --muted: #1a1a22;
  --muted-foreground: #a1a1aa;
  --accent: #1f1f29;
  --accent-foreground: #f5f5f7;
  --border: rgba(255, 255, 255, 0.08);
  --input: rgba(255, 255, 255, 0.10);
  --primary: #a78bfa;
  --primary-foreground: #0b0b10;
}

/* ── BODY FONT ── Inter for UI, Raleway reserved for the brand mark only */
html, body,
main[data-slot="sidebar-inset"],
[data-sidebar="sidebar"] {
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif !important;
  font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11' !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  letter-spacing: -0.005em !important;
}

/* ── SIDEBAR SHELL — muted enterprise purple, narrower (15rem) ── */
/* Set the EXPANDED width via --sidebar-width only. Do NOT hard-set width on
   [data-sidebar="sidebar"] — that would break Dograh's collapse-to-icon, which
   swaps in --sidebar-width-icon via group-data-[collapsible=icon] rules. */
:root,
[data-slot="sidebar"]:not([data-collapsible="icon"]) {
  --sidebar-width: 15rem !important;
}
[data-sidebar="sidebar"] {
  background: #6725CD !important;
  box-shadow: 1px 0 0 rgba(255, 255, 255, 0.04), 4px 0 24px rgba(103, 37, 205, 0.28) !important;
  border-right: none !important;
  display: flex !important;
  flex-direction: column !important;
}
.dark [data-sidebar="sidebar"] {
  background: #5820ab !important;
  box-shadow: 1px 0 0 rgba(255, 255, 255, 0.05), 4px 0 28px rgba(103, 37, 205, 0.40) !important;
}

/* Sidebar — content area scrolls internally; sidebar shell must NOT clip it */
[data-sidebar="sidebar"] {
  scrollbar-width: none !important;
  overflow: visible !important;
  display: flex !important;
  flex-direction: column !important;
}
[data-sidebar="sidebar"] ::-webkit-scrollbar { display: none !important; }
[data-sidebar="content"] {
  overflow: hidden !important;
  flex: 1 1 auto !important;
}
/* Theme toggle appended to sidebar is always visible */
#fm-sidebar-theme {
  flex-shrink: 0 !important;
  display: inline-flex !important;
}
/* When sidebar collapses to icon mode, hide the "Light/Dark Mode" label and
   shrink the pill to a 36×36 icon so it doesn't block the collapse animation. */
[data-slot="sidebar"][data-collapsible="icon"] #fm-sidebar-theme {
  width: 36px !important;
  height: 36px !important;
  padding: 0 !important;
  margin-left: auto !important;
  margin-right: auto !important;
  gap: 0 !important;
}
[data-slot="sidebar"][data-collapsible="icon"] #fm-sidebar-theme span {
  display: none !important;
}

/* Compact group spacing — 8px scale, denser to fit 768p without scroll */
[data-sidebar="group"] {
  margin-top: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
/* (1) Vertical spacing between sidebar sections (BUILD / MANAGE) — 24px gap */
[data-sidebar="group"] + [data-sidebar="group"] {
  margin-top: 24px !important;
}
[data-sidebar="group-label"] {
  padding: 0.0625rem 1rem 0.125rem !important;
  margin-bottom: 0 !important;
}
[data-sidebar="menu"] {
  gap: 1px !important;
  padding: 0 0.5rem !important;
}

/* Menu buttons — denser vertical rhythm (~32→26 px) for 768p fit */
[data-sidebar="menu-button"] {
  padding: 0.375rem 0.75rem !important;
  gap: 0.75rem !important;
  min-height: 0 !important;
  border-radius: 8px !important;
}

/* Compact header — denser to free vertical space */
[data-sidebar="header"] {
  padding: 0.25rem 0.5rem !important;
}

/* Hide Dograh sidebar footer (user avatar / logout) entirely.
   Use multiple selectors so it stays hidden even if Dograh changes data attrs. */
[data-sidebar="footer"],
[data-slot="sidebar-footer"],
[data-sidebar="sidebar"] [data-slot="sidebar-footer"] {
  display: none !important;
  height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  visibility: hidden !important;
  overflow: hidden !important;
}

/* Sidebar content: scrolls internally only if needed; minimal top padding
   pulls the menu list up so Overview sits closer to the brand header. */
[data-sidebar="content"] {
  flex: 1 1 auto !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  scrollbar-width: none !important;
  padding-top: 18px !important;   /* breathing room below the brand header, above the nav */
  padding-bottom: 0 !important;
}
[data-sidebar="content"]::-webkit-scrollbar { display: none !important; }

/* ── Sidebar fit-to-viewport on SHORT screens (site-wide chrome) ──
   The base rules above pack the 17-item nav for ~768px-tall screens; below that
   the list overflows (the scrollbar is hidden, so the bottom items + theme toggle
   silently fall off the fold). Tighten the per-item rhythm further as the viewport
   gets shorter so every item stays reachable WITHOUT any scroll. Validated: nav
   overflow = 0 at 680px and 600px tall. */
@media (max-height: 760px) {
  [data-sidebar="menu-button"] { padding-top: 0.25rem !important; padding-bottom: 0.25rem !important; height: auto !important; }
  [data-sidebar="content"] { padding-top: 10px !important; }
  [data-sidebar="group-label"] { padding-top: 0 !important; padding-bottom: 0.0625rem !important; }
}
@media (max-height: 680px) {
  [data-sidebar="menu-button"] { padding-top: 0.1875rem !important; padding-bottom: 0.1875rem !important; }
  [data-sidebar="group-label"] { font-size: 0.625rem !important; }
}
@media (max-height: 600px) {
  [data-sidebar="menu-button"] { padding-top: 0.125rem !important; padding-bottom: 0.125rem !important; gap: 0.5rem !important; }
  [data-sidebar="content"] { padding-top: 6px !important; }
  [data-sidebar="group-label"] { line-height: 1 !important; padding-bottom: 0 !important; }
}

/* Theme toggle pill */
#fm-sidebar-theme svg {
  flex-shrink: 0 !important;
  stroke: rgba(255,255,255,0.9) !important;
  color: rgba(255,255,255,0.9) !important;
}

/* Sidebar section labels — smaller, cleaner, more enterprise */
[data-sidebar="group-label"] {
  color: rgba(255, 255, 255, 0.38) !important;
  font-size: 0.6875rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  line-height: 1 !important;
}

/* ── SIDEBAR BUTTONS ── */
[data-sidebar="menu-button"] {
  background-color: transparent !important;
  color: rgba(255, 255, 255, 0.78) !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease !important;
}
[data-sidebar="menu-button"] svg {
  color: rgba(255, 255, 255, 0.75) !important;
  stroke: rgba(255, 255, 255, 0.75) !important;
  width: 1rem !important;
  height: 1rem !important;
  flex-shrink: 0 !important;
}
[data-sidebar="menu-button"]:hover {
  background-color: rgba(255, 255, 255, 0.06) !important;
  color: #ffffff !important;
}
[data-sidebar="menu-button"]:hover svg {
  color: #ffffff !important;
  stroke: #ffffff !important;
}
[data-sidebar="menu-button"]:active {
  background-color: rgba(255, 255, 255, 0.10) !important;
}

/* Active — pronounced translucent purple layer + accent border + clear glow. */
[data-sidebar="menu-button"][data-active="true"] {
  background: linear-gradient(90deg, rgba(167, 139, 250, 0.38) 0%, rgba(167, 139, 250, 0.16) 100%) !important;
  color: #ffffff !important;
  font-weight: 600 !important;
  border-left: 3px solid #c4b5fd !important;
  border-radius: 0 8px 8px 0 !important;
  padding-left: calc(0.75rem - 3px) !important;
  box-shadow:
    inset 0 0 0 1px rgba(196, 181, 253, 0.22),
    0 0 24px rgba(167, 139, 250, 0.28) !important;
}
[data-sidebar="menu-button"][data-active="true"] svg {
  color: #ffffff !important;
  stroke: #ffffff !important;
}
/* ── Keyboard focus (a11y) ── visible rings for every interactive element ──
   Heavy !important overrides elsewhere can strip default focus rings, and many
   injected/native controls never had one. Sidebar sits on a purple surface, so
   it gets a light ring; the content area gets the brand-purple ring. */
[data-slot="sidebar"] a:focus-visible,
[data-slot="sidebar"] button:focus-visible,
[data-slot="sidebar"] [role="button"]:focus-visible,
[data-sidebar="menu-button"]:focus-visible,
[data-slot="sidebar"] [tabindex]:not([tabindex="-1"]):focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.92) !important;
  outline-offset: 2px !important;
  box-shadow: none !important;
}
main[data-slot="sidebar-inset"] a:focus-visible,
main[data-slot="sidebar-inset"] button:focus-visible,
main[data-slot="sidebar-inset"] [role="button"]:focus-visible,
main[data-slot="sidebar-inset"] input:focus-visible,
main[data-slot="sidebar-inset"] select:focus-visible,
main[data-slot="sidebar-inset"] textarea:focus-visible,
main[data-slot="sidebar-inset"] summary:focus-visible,
main[data-slot="sidebar-inset"] [tabindex]:not([tabindex="-1"]):focus-visible {
  outline: 2px solid var(--fm-accent, #7c3aed) !important;
  outline-offset: 2px !important;
}

/* ── BUTTONS — unified subtle transitions site-wide ── */
html:not(.fm-workflow-builder):not(.fm-workflow-settings) main[data-slot="sidebar-inset"] button,
html:not(.fm-workflow-builder):not(.fm-workflow-settings) main[data-slot="sidebar-inset"] [role="button"],
html:not(.fm-workflow-builder):not(.fm-workflow-settings) main[data-slot="sidebar-inset"] a[href][class*="bg-"] {
  transition:
    background-color 0.15s ease,
    color 0.15s ease,
    border-color 0.15s ease,
    box-shadow 0.15s ease,
    transform 0.12s ease !important;
}
html:not(.fm-workflow-builder):not(.fm-workflow-settings) main[data-slot="sidebar-inset"] button:hover {
  transform: translateY(-1px);
}
html:not(.fm-workflow-builder):not(.fm-workflow-settings) main[data-slot="sidebar-inset"] button:active {
  transform: translateY(0);
}

/* ── TABS: active tab → brand purple (e.g. /model-configurations LLM/Voice/etc.) ── */
/* Targets shadcn Tabs (data-slot="tabs-trigger") in the main content. Skips the
   workflow builder/settings, which keep their own theme. */
html:not(.fm-workflow-builder):not(.fm-workflow-settings) main[data-slot="sidebar-inset"] [data-slot="tabs-trigger"][data-state="active"] {
  background: #662997 !important;
  color: #ffffff !important;
  border-color: #5a2388 !important;
  box-shadow: 0 2px 8px rgba(102, 41, 151, 0.28) !important;
  font-weight: 600 !important;
}
html:not(.fm-workflow-builder):not(.fm-workflow-settings) main[data-slot="sidebar-inset"] [data-slot="tabs-trigger"][data-state="active"] svg {
  color: #ffffff !important;
  stroke: #ffffff !important;
}
/* Hover on inactive tab — subtle purple tint hint */
html:not(.fm-workflow-builder):not(.fm-workflow-settings) main[data-slot="sidebar-inset"] [data-slot="tabs-trigger"]:not([data-state="active"]):hover {
  background: rgba(102, 41, 151, 0.08) !important;
  color: #5b21b6 !important;
}
html.dark:not(.fm-workflow-builder):not(.fm-workflow-settings) main[data-slot="sidebar-inset"] [data-slot="tabs-trigger"]:not([data-state="active"]):hover {
  background: rgba(167, 139, 250, 0.12) !important;
  color: #c4b5fd !important;
}

/* ── WORKFLOW BUILDER: keep the right tester panel ("Test Audio / Test Chat") on-screen ──
   The builder wraps the flow canvas + the fixed 400px tester <aside> in a flex column
   carrying `min-w-fit` (min-width: fit-content). Inside the ~1040px content area that
   intrinsic width overflows ~105px past the right edge, and the overflow is clipped (no
   scrollbar) — chopping the right tab's label so "Test Chat" reads cut off. Letting the
   wrapper shrink lets the flex row redistribute (the canvas absorbs it; the 400px aside
   stays fully visible). Scoped to the builder; exactly one element matches. */
html.fm-workflow-builder main[data-slot="sidebar-inset"] .h-screen.min-w-fit {
  min-width: 0 !important;
}

/* ── BRAND NAME ── */
a[href="/"] {
  font-family: 'Raleway', sans-serif !important;
  font-size: 2.5rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.01em !important;
  line-height: 1.1 !important;
  background: linear-gradient(135deg, #ffffff 0%, #e9d5ff 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  text-shadow: none !important;
  filter: drop-shadow(0 1px 6px rgba(255,255,255,0.15)) !important;
  display: inline-block !important;
  margin-top: 18px !important;   /* breathing room above the Finmozhi wordmark */
}
/* On short viewports trim the gap so the nav still fits the fold. */
@media (max-height: 760px) { a[href="/"] { margin-top: 10px !important; } }
@media (max-height: 680px) { a[href="/"] { margin-top: 6px !important; } }
@media (max-height: 600px) { a[href="/"] { margin-top: 2px !important; } }
/* Hide the version badge next to the brand name (text-muted-foreground span
   that Dograh appends, e.g. "v1.37.0"). Scoped so it does NOT hide the
   "Finmozhi" wordmark span we inject in finmozhi-patch.js (marked with
   data-fm-brand-replaced). Without this scope the brand area renders blank. */
a[href="/"] span:not([data-fm-brand-replaced]) { display: none !important; }

/* Theme toggle pill is removed — the app is locked to dark mode. This rule is
   a belt-and-braces kill-switch in case a stale cached patch.js re-injects
   `#fm-sidebar-theme` after a deploy. CSS wins; the button never paints. */
#fm-sidebar-theme { display: none !important; }

/* Dograh paints `/brand-imprint-dark.svg` (a giant 1000×282 "dograh" wordmark)
   as a fixed background watermark on `main.app-surface`. It bleeds through on
   empty pages (Campaigns when there are 0 rows, Tools, etc.). Strip it — we're
   FinCover/Finmozhi, the Dograh watermark is off-brand and distracting. The
   auth-imprint panel keeps its own rendering; this only targets app surfaces.
   ALSO: clear the near-white `oklch(0.984 ...)` fill so the inner main inherits
   the lavender from the outer sidebar-inset (visible on /model-configurations,
   where the cards don't cover the full surface). */
main.app-surface {
  background-image: none !important;
  background-color: transparent !important;
}


/* ── DARK MODE SURFACES — richer body + scrollbars ── */
.dark body,
html.dark {
  background: var(--background) !important;
  color: var(--foreground) !important;
}
.dark main[data-slot="sidebar-inset"] {
  background: var(--background) !important;
}
/* Dark-mode scrollbars for inner scroll areas (dialogs, lists, etc.)
   The outer main[data-slot="sidebar-inset"] scrollbar is always hidden
   via the global desktop rule — don't re-show it here. */
.dark :not(main[data-slot="sidebar-inset"])::-webkit-scrollbar { width: 10px; height: 10px; }
.dark :not(main[data-slot="sidebar-inset"])::-webkit-scrollbar-track { background: transparent; }
.dark :not(main[data-slot="sidebar-inset"])::-webkit-scrollbar-thumb {
  background: rgba(167, 139, 250, 0.18);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
.dark :not(main[data-slot="sidebar-inset"])::-webkit-scrollbar-thumb:hover {
  background: rgba(167, 139, 250, 0.32);
  background-clip: padding-box;
}

/* ── CARDS — unified radius / shadow / hover / transitions ── */
/* All cards in the main content (excluding workflow builder/settings) share
   the same border-radius, padding, shadow, and subtle hover lift. */
html:not(.fm-workflow-builder):not(.fm-workflow-settings) main[data-slot="sidebar-inset"] [class~="rounded-lg"][class~="border"],
html:not(.fm-workflow-builder):not(.fm-workflow-settings) main[data-slot="sidebar-inset"] [class~="rounded-xl"][class~="border"] {
  border-radius: var(--fm-radius) !important;
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.04),
    0 8px 24px rgba(15, 23, 42, 0.05) !important;
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    border-color 0.18s ease !important;
}
html.dark:not(.fm-workflow-builder):not(.fm-workflow-settings) main[data-slot="sidebar-inset"] [class~="rounded-lg"][class~="border"],
html.dark:not(.fm-workflow-builder):not(.fm-workflow-settings) main[data-slot="sidebar-inset"] [class~="rounded-xl"][class~="border"] {
  background: var(--card) !important;
  border-color: rgba(255, 255, 255, 0.06) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.03),
    0 1px 2px rgba(0, 0, 0, 0.35),
    0 8px 24px rgba(0, 0, 0, 0.32) !important;
}
/* Subtle hover lift — applies to any non-table card */
html:not(.fm-workflow-builder):not(.fm-workflow-settings) main[data-slot="sidebar-inset"] [class~="rounded-lg"][class~="border"]:not(:has(table)):hover,
html:not(.fm-workflow-builder):not(.fm-workflow-settings) main[data-slot="sidebar-inset"] [class~="rounded-xl"][class~="border"]:not(:has(table)):hover {
  transform: translateY(-1px);
  box-shadow:
    0 4px 10px rgba(15, 23, 42, 0.06),
    0 16px 36px rgba(15, 23, 42, 0.08) !important;
}
html.dark:not(.fm-workflow-builder):not(.fm-workflow-settings) main[data-slot="sidebar-inset"] [class~="rounded-lg"][class~="border"]:not(:has(table)):hover,
html.dark:not(.fm-workflow-builder):not(.fm-workflow-settings) main[data-slot="sidebar-inset"] [class~="rounded-xl"][class~="border"]:not(:has(table)):hover {
  box-shadow:
    0 4px 10px rgba(0, 0, 0, 0.4),
    0 16px 36px rgba(0, 0, 0, 0.42) !important;
}

/* ── WORKFLOW SETTINGS: single scrollbar + sticky right nav ── */
/* Only the OUTER sidebar-inset main scrolls — not the inner main */
html.fm-workflow-settings main[data-slot="sidebar-inset"] {
  overflow-y: auto !important;
  height: 100dvh !important;
  scroll-padding-top: 64px !important;
}
/* Inner main (flex-1): must NOT be a second scroll container */
html.fm-workflow-settings main[data-slot="sidebar-inset"] main {
  overflow: visible !important;
  height: auto !important;
}
/* Show the inner "← Workflow Settings" header on desktop (hidden by the global header rule).
   Remove the outer padding-top so the sticky header sits at y=0 from page load (not y=64).
   Add right padding so the toggle button (top-right corner) doesn't overlap the header. */
@media (min-width: 768px) {
  html.fm-workflow-settings main[data-slot="sidebar-inset"] {
    padding-top: 0 !important;
  }
  html.fm-workflow-settings main[data-slot="sidebar-inset"] main header.sticky {
    display: flex !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 40 !important;
    padding-right: 56px !important;
  }
}

/* ── GLOBAL: cards, tables, metrics — all pages except workflow ── */

/* No tinted background — plain white/dark surface */

/* Card titles → use Dograh's default foreground for readability.
   Excludes the workflow builder / settings (own theme) AND the overview page
   (whose two welcome cards intentionally use a brand-purple title — see the
   overview-specific rule near the bottom of this file). */
html:not(.fm-workflow-builder):not(.fm-workflow-settings):not(.fm-page-overview) main[data-slot="sidebar-inset"] [class~="rounded-lg"][class~="border"] [class~="tracking-tight"],
html:not(.fm-workflow-builder):not(.fm-workflow-settings):not(.fm-page-overview) main[data-slot="sidebar-inset"] [class~="rounded-xl"][class~="border"] [class~="tracking-tight"],
html:not(.fm-workflow-builder):not(.fm-workflow-settings):not(.fm-page-overview) main[data-slot="sidebar-inset"] [class~="rounded-lg"][class~="border"] [class~="font-semibold"][class~="leading-none"],
html:not(.fm-workflow-builder):not(.fm-workflow-settings):not(.fm-page-overview) main[data-slot="sidebar-inset"] [class~="rounded-xl"][class~="border"] [class~="font-semibold"][class~="leading-none"] {
  color: var(--card-foreground) !important;
}

/* Stat cards: clean / no purple tint or accent border on ANY non-overview page.
   (The two welcome cards on /overview keep their purple gradient styling via
   the overview-specific block near the bottom of this file. The /reports
   page is also excluded — it has its own colorful styling below.) */
html:not(.fm-workflow-builder):not(.fm-workflow-settings):not(.fm-page-overview):not(.fm-page-reports) main[data-slot="sidebar-inset"] [class~="rounded-lg"][class~="border"][class~="shadow-sm"]:not(:has(table)),
html:not(.fm-workflow-builder):not(.fm-workflow-settings):not(.fm-page-overview):not(.fm-page-reports) main[data-slot="sidebar-inset"] [class~="rounded-lg"][class~="border"][class~="shadow"]:not(:has(table)),
html:not(.fm-workflow-builder):not(.fm-workflow-settings):not(.fm-page-overview):not(.fm-page-reports) main[data-slot="sidebar-inset"] [class~="rounded-xl"][class~="border"][class~="shadow-sm"]:not(:has(table)) {
  background: var(--card) !important;
  border-left: 1px solid var(--border) !important;
}

/* Table header — purple gradient (not workflow, not agents) */
html:not(.fm-workflow-builder):not(.fm-workflow-settings):not(.fm-page-agents) main[data-slot="sidebar-inset"] thead tr {
  background: linear-gradient(90deg, #7c3aed, #6d28d9) !important;
}
html:not(.fm-workflow-builder):not(.fm-workflow-settings):not(.fm-page-agents) main[data-slot="sidebar-inset"] thead th {
  color: #ffffff !important;
  border-color: rgba(255,255,255,0.15) !important;
  font-weight: 600 !important;
}

/* Alternating rows + hover (not workflow, not agents) */
html:not(.fm-workflow-builder):not(.fm-workflow-settings):not(.fm-page-agents) main[data-slot="sidebar-inset"] tbody tr:nth-child(even) {
  background: rgba(124,58,237,0.04) !important;
}
html:not(.fm-workflow-builder):not(.fm-workflow-settings):not(.fm-page-agents) main[data-slot="sidebar-inset"] tbody tr:hover {
  background: rgba(124,58,237,0.09) !important;
}

/* Cards wrapping a table — never add left border (table header handles the colour) */
main[data-slot="sidebar-inset"] [class~="rounded-lg"][class~="border"]:has(table),
main[data-slot="sidebar-inset"] [class~="rounded-xl"][class~="border"]:has(table) {
  border-left: 1px solid var(--border) !important;
  background: var(--card) !important;
}

/* Agents page — also reset thead/tbody in case table header rule still fires */
html.fm-page-agents main[data-slot="sidebar-inset"] thead tr {
  background: none !important;
}
html.fm-page-agents main[data-slot="sidebar-inset"] thead th {
  color: var(--muted-foreground) !important;
  border-color: var(--border) !important;
}
html.fm-page-agents main[data-slot="sidebar-inset"] tbody tr:nth-child(even) {
  background: none !important;
}
html.fm-page-agents main[data-slot="sidebar-inset"] tbody tr:hover {
  background: var(--accent) !important;
}

/* Large metric numbers / page titles — default foreground for max contrast.
   (Previously brand-purple; reverted at the user's request — applies to all
   pages except the workflow builder & settings, which keep their own theme.) */

/* Badges — bolder + standardized size (not workflow). Tailwind px-2.5 py-0.5 = 2px 10px; text-sm = .875rem. */
html:not(.fm-workflow-builder):not(.fm-workflow-settings) main[data-slot="sidebar-inset"] [class~="rounded-full"][class~="text-xs"] {
  font-weight: 600 !important;
  padding: 2px 10px !important;
  font-size: 0.875rem !important;
  line-height: 1.25 !important;
}

/* ── SETTINGS PAGE FADE-IN ── */
/* patch.js adds fm-settings-page to <html> on /settings page load — masks the 300ms React mount */
@keyframes fm-fadein {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
html.fm-settings-page main,
html.fm-settings-page [role="main"] {
  animation: fm-fadein 0.35s ease-out both;
}

/* ── HIDE EXTERNAL / DOGRAH LINKS ── */
a[href*="slack.com"],
a[href*="dograh-hq"],
a[href*="docs.dograh.com"] { display: none !important; }
.bg-emerald-50, .bg-amber-50, .bg-blue-50, .bg-yellow-50 { display: none !important; }
.woot-widget-bubble, .woot-widget-holder { display: none !important; }

/* ── FULL-SCREEN LAYOUT ── */
html, body {
  height: 100% !important;
  overflow: hidden !important;
}
/* Root wrapper fills the full viewport */
[class*="min-h-screen"] {
  min-height: 100vh !important;
  min-height: 100dvh !important;
}

/* ── DESKTOP ── */
@media (min-width: 768px) {
  /* Hide sticky top header (the line/gap) */
  header.sticky {
    display: none !important;
  }
  /* Fill viewport, scroll vertically — no top gap; Dograh containers handle their own py-8 */
  main[data-slot="sidebar-inset"] {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    height: 100dvh !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
    scrollbar-width: none !important;
  }
  main[data-slot="sidebar-inset"]::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
  }
  /* AI Models Configuration — flush to top, no scroll; form fits within 100dvh */
  html.fm-page-model-configurations main[data-slot="sidebar-inset"] {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    overflow: hidden !important;
  }
  /* Workflow builder — no top gap, canvas fills full height */
  html.fm-workflow-builder main[data-slot="sidebar-inset"],
  html.fm-workflow-settings main[data-slot="sidebar-inset"] {
    padding-top: 0 !important;
  }
  /* Remove excess bottom space — pages stretched to min-h-screen even when short */
  main[data-slot="sidebar-inset"] [class~="min-h-screen"] {
    min-height: 0 !important;
  }
  /* model-configurations: if any Dograh inner wrapper has overflow-y auto, neutralise it
     so the main element is the only scroll root (but main is overflow:hidden so no scroll). */
  html.fm-page-model-configurations main[data-slot="sidebar-inset"] > div,
  html.fm-page-model-configurations main[data-slot="sidebar-inset"] > main {
    overflow: visible !important;
    height: auto !important;
    min-height: 0 !important;
  }
  /* Collapse hidden free-plan/upgrade banners — no dangling gap */
  .bg-emerald-50:empty, .bg-amber-50:empty, .bg-blue-50:empty, .bg-yellow-50:empty,
  [style*="display: none"], [style*="display:none"] {
    margin: 0 !important; padding: 0 !important;
  }
}

/* ══════════════════════════════════════════════════
   MOBILE LAYOUT — comprehensive fixes
   ══════════════════════════════════════════════════ */
@media (max-width: 767px) {

  /* ── 1. HEADER: full-width purple bar ── */
  header.sticky {
    display: flex !important;
    width: 100% !important;
    box-sizing: border-box !important;
    background: linear-gradient(90deg, #7530ab 0%, #662997 100%) !important;
    border-bottom: none !important;
    box-shadow: 0 2px 12px rgba(102,41,151,0.4) !important;
    padding: 0 0.5rem 0 0.25rem !important;
    height: 52px !important;
    align-items: center !important;
    justify-content: space-between !important;
    position: fixed !important;
    top: 0 !important; left: 0 !important; right: 0 !important;
    z-index: 50 !important;
  }
  header.sticky, header.sticky * { color: #ffffff !important; }
  header.sticky svg { stroke: #ffffff !important; }
  header.sticky button {
    background: transparent !important;
    border: none !important;
    padding: 0.5rem !important;
    min-width: 44px !important; min-height: 44px !important;
    display: flex !important;
    align-items: center !important; justify-content: center !important;
    flex-shrink: 0 !important;
  }
  header.sticky button:hover { background: rgba(255,255,255,0.15) !important; border-radius: 8px !important; }
  /* Brand text: reset desktop gradient → solid white */
  header.sticky a[href="/"] {
    font-family: 'Raleway', sans-serif !important;
    font-size: 1.35rem !important; font-weight: 900 !important;
    letter-spacing: 0.06em !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    background: none !important;
    -webkit-background-clip: unset !important; background-clip: unset !important;
    text-shadow: 0 1px 4px rgba(0,0,0,0.2) !important;
    filter: none !important;
    flex: 1 !important; text-align: center !important;
    padding: 0 0.25rem !important;
  }

  /* ── 2. DARK/LIGHT TOGGLE: pill, docked at the bottom of the sidebar ── */
  #fm-theme-btn { display: none !important; }
  #fm-sidebar-theme {
    width: auto !important;
    align-self: center !important;
    margin: 0.5rem auto 0.85rem !important;
    padding: 0.5rem 1.1rem !important;
    background: rgba(255,255,255,0.14) !important;
    border: 1px solid rgba(255,255,255,0.4) !important;
    border-radius: 9999px !important;
    font-size: 0.88rem !important; font-weight: 500 !important;
    color: rgba(255,255,255,0.95) !important;
    display: inline-flex !important; align-items: center !important;
    justify-content: center !important; gap: 0.45rem !important;
    flex-shrink: 0 !important;
  }
  #fm-sidebar-theme:hover {
    background: rgba(255,255,255,0.26) !important;
    border-color: rgba(255,255,255,0.6) !important;
  }
  #fm-sidebar-theme svg { stroke: rgba(255,255,255,0.95) !important; color: rgba(255,255,255,0.95) !important; }

  /* ── 3. CORE LAYOUT ── */
  /* Body-scroll model: collapse wrapper, let body scroll */
  [class*="min-h-screen"] {
    min-height: 0 !important;
    height: auto !important;
  }
  html, body {
    height: auto !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }
  main[data-slot="sidebar-inset"] {
    padding-top: 52px !important;
    overflow-x: hidden !important;
    max-width: 100vw !important;
    box-sizing: border-box !important;
    align-self: flex-start !important; /* don't stretch to wrapper's cross-axis height */
    width: 100% !important;
  }
  /* Inner main: natural height; body handles scrolling */
  main[data-slot="sidebar-inset"] > main,
  main[data-slot="sidebar-inset"] > div > main {
    padding: 0.75rem !important;
    flex: none !important;
    min-height: 0 !important;
    overflow-y: visible !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
  }

  /* ── 4. SIDEBAR SHEET ── */
  [data-sidebar="sidebar"] {
    background: linear-gradient(180deg, #7530ab 0%, #662997 55%, #5a2388 100%) !important;
  }
  [data-sidebar="menu-button"] {
    padding-top: 0.6rem !important; padding-bottom: 0.6rem !important;
    min-height: 44px !important;
  }

  /* ── 5. CONTAINER CLASS: strip double-padding ── */
  main[data-slot="sidebar-inset"] .container,
  main[data-slot="sidebar-inset"] [class~="container"] {
    padding-left: 0 !important; padding-right: 0 !important;
    max-width: 100% !important;
  }

  /* ── 6. FIXED-WIDTH BUSTERS ── */
  /* Skeleton loaders (w-96=384px, w-64=256px) and fixed-width selects */
  main[data-slot="sidebar-inset"] [class~="w-96"],
  main[data-slot="sidebar-inset"] [class~="w-64"],
  main[data-slot="sidebar-inset"] [class~="w-48"],
  main[data-slot="sidebar-inset"] [class~="w-[200px]"],
  main[data-slot="sidebar-inset"] [class~="w-[300px]"] {
    width: 100% !important; max-width: 100% !important;
  }
  main[data-slot="sidebar-inset"] [class~="h-64"][class~="w-96"] {
    height: 160px !important;
  }

  /* ── 7. OVERFLOW PREVENTION ── */
  main[data-slot="sidebar-inset"] img,
  main[data-slot="sidebar-inset"] video,
  main[data-slot="sidebar-inset"] iframe {
    max-width: 100% !important; height: auto !important;
  }
  /* pre/code: scroll long lines; don't override break-all on inline code */
  main[data-slot="sidebar-inset"] pre {
    overflow-x: auto !important; max-width: 100% !important;
    white-space: pre-wrap !important; word-break: break-word !important;
  }
  main[data-slot="sidebar-inset"] code {
    overflow-x: auto !important; max-width: 100% !important;
    overflow-wrap: break-word !important;
  }

  /* ── 8. TABLES: compact, no forced horizontal scroll ── */
  main[data-slot="sidebar-inset"] table {
    display: table !important;
    width: 100% !important;
    table-layout: fixed !important; /* compact layout for narrow tables (≤5 cols) */
    font-size: 0.78rem !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  /* Wide tables (>5 cols, marked by JS): auto layout + min-content width so they scroll */
  main[data-slot="sidebar-inset"] table[data-fm-wide="1"] {
    table-layout: auto !important;
    width: auto !important;
    min-width: max-content !important;
    max-width: none !important;
    font-size: 0.75rem !important;
  }
  main[data-slot="sidebar-inset"] th,
  main[data-slot="sidebar-inset"] td {
    padding: 0.35rem 0.4rem !important;
    white-space: normal !important;
    word-break: break-word !important;
    overflow: hidden !important;
  }
  main[data-slot="sidebar-inset"] table[data-fm-wide="1"] th,
  main[data-slot="sidebar-inset"] table[data-fm-wide="1"] td {
    white-space: nowrap !important; /* wide tables: each cell stays on one line */
    word-break: normal !important;
    min-width: 60px !important;
    max-width: 140px !important;
  }
  /* Narrow fixed-width columns (narrow tables only) */
  main[data-slot="sidebar-inset"] table:not([data-fm-wide]) th:first-child,
  main[data-slot="sidebar-inset"] table:not([data-fm-wide]) td:first-child { width: 2rem !important; }
  main[data-slot="sidebar-inset"] table:not([data-fm-wide]) th:last-child,
  main[data-slot="sidebar-inset"] table:not([data-fm-wide]) td:last-child { width: 5rem !important; }
  /* Compact action buttons in tables */
  main[data-slot="sidebar-inset"] table td button {
    font-size: 0.65rem !important;
    padding: 0.15rem 0.35rem !important;
    height: auto !important;
    min-height: 0 !important;
  }
  main[data-slot="sidebar-inset"] table td button svg {
    width: 0.75rem !important; height: 0.75rem !important;
  }
  /* Hide Archive button in narrow table actions — show Edit only */
  main[data-slot="sidebar-inset"] table:not([data-fm-wide]) td button:has(.lucide-archive) {
    display: none !important;
  }
  main[data-slot="sidebar-inset"] [class~="overflow-x-auto"] {
    overflow-x: auto !important; -webkit-overflow-scrolling: touch !important;
    max-width: 100% !important;
  }

  /* ── 9. WHITESPACE-NOWRAP: don't override on buttons/links ── */
  /* Only reset for non-interactive block text that would overflow the screen */
  main[data-slot="sidebar-inset"] [class~="whitespace-nowrap"][class~="text-sm"]:not([class~="font-mono"]):not([class~="rounded"]):not(td):not(th):not(button):not(a):not([role="button"]) {
    white-space: normal !important; word-break: break-word !important;
  }

  /* ── 9b. RECHARTS: explicit height so charts render on mobile ── */
  .recharts-responsive-container {
    min-height: 220px !important;
    height: 220px !important;
  }

  /* ── 10. GRIDS: single column (except tab bars) ── */
  main[data-slot="sidebar-inset"] [class~="grid"]:not([role="tablist"]) {
    grid-template-columns: 1fr !important;
    gap: 0.75rem !important;
  }
  main[data-slot="sidebar-inset"] [class~="grid-cols-2"]:not([role="tablist"]),
  main[data-slot="sidebar-inset"] [class~="grid-cols-3"]:not([role="tablist"]),
  main[data-slot="sidebar-inset"] [class~="grid-cols-4"]:not([role="tablist"]) {
    grid-template-columns: 1fr !important;
  }
  /* Tab bars: keep equal horizontal columns — they use role="tablist" + grid w-full */
  main[data-slot="sidebar-inset"] [role="tablist"][class~="grid"] {
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr)) !important;
    gap: 0 !important;
  }
  /* Tab buttons: compact font so full labels fit on one line */
  main[data-slot="sidebar-inset"] [role="tablist"][class~="grid"] button {
    font-size: 0.7rem !important;
    padding-left: 0.15rem !important;
    padding-right: 0.15rem !important;
  }

  /* ── 11. FLEX HEADERS: wrap page-title rows (mb-6 = section separator) ── */
  /* Only wrap 2-item page headers, NOT 3-item date navs or toolbar rows */
  main[data-slot="sidebar-inset"] [class~="flex"][class~="justify-between"][class~="mb-6"],
  main[data-slot="sidebar-inset"] [class~="flex"][class~="justify-between"][class~="items-start"][class~="gap-4"] {
    flex-wrap: wrap !important; gap: 0.5rem !important;
  }
  /* Horizontal card stat rows and multi-card rows */
  main[data-slot="sidebar-inset"] [class~="flex"][class~="gap-6"],
  main[data-slot="sidebar-inset"] [class~="flex"][class~="space-x-4"] {
    flex-wrap: wrap !important;
  }
  /* Button groups inside headers: wrap so buttons stack instead of overflow */
  main[data-slot="sidebar-inset"] [class~="flex"][class~="justify-between"] > [class~="flex"][class~="gap-2"] {
    flex-wrap: wrap !important;
    max-width: 100% !important;
  }

  /* ── 12. CARDS: full-width (NOT rounded-md — that matches buttons too) ── */
  main[data-slot="sidebar-inset"] [class~="rounded-lg"][class~="border"],
  main[data-slot="sidebar-inset"] [class~="rounded-xl"][class~="border"] {
    width: 100% !important; max-width: 100% !important;
    margin-left: 0 !important; margin-right: 0 !important;
    box-sizing: border-box !important;
  }
  /* Buttons use rounded-md — do NOT set width:100% on them */
  main[data-slot="sidebar-inset"] button,
  main[data-slot="sidebar-inset"] [role="button"] {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* ── 13. RECHARTS: force full width ── */
  .recharts-responsive-container, .recharts-wrapper {
    width: 100% !important; max-width: 100% !important; min-width: 0 !important;
  }

  /* ── 14. DIALOGS / MODALS: fit screen ── */
  [role="dialog"] {
    max-width: calc(100vw - 2rem) !important;
    width: calc(100vw - 2rem) !important;
    box-sizing: border-box !important;
  }
  [role="dialog"] [class~="overflow-y-auto"],
  [role="dialog"] [class~="max-h-"] {
    max-height: calc(100dvh - 6rem) !important; overflow-y: auto !important;
  }

  /* ── 15. TRUNCATION: widen on small screen ── */
  main[data-slot="sidebar-inset"] [class~="max-w-[250px]"],
  main[data-slot="sidebar-inset"] [class~="max-w-[300px]"] {
    max-width: calc(55vw) !important;
  }

  /* ── 16. PAGE-SPECIFIC: settings ── */
  main[data-slot="sidebar-inset"] [class~="py-12"] {
    padding-top: 1.5rem !important; padding-bottom: 1.5rem !important;
  }

  /* ── 17. PAGE-SPECIFIC: agent-run call buttons ── */
  main[data-slot="sidebar-inset"] [class~="p-8"] {
    padding: 1.25rem 1rem !important;
  }

  /* ── 18. TYPOGRAPHY ── */
  main[data-slot="sidebar-inset"] h1 { font-size: 1.25rem !important; }
  main[data-slot="sidebar-inset"] h2 { font-size: 1.1rem !important; }
  main[data-slot="sidebar-inset"] h3 { font-size: 1rem !important; }
  main[data-slot="sidebar-inset"] [class~="text-3xl"] { font-size: 1.5rem !important; }

  /* ── 19a. SETTINGS PAGE: restore sidebar-inset scroll container on mobile ── */
  html.fm-workflow-settings main[data-slot="sidebar-inset"] {
    height: 100dvh !important;
    overflow-y: auto !important;
  }
  html.fm-workflow-settings main[data-slot="sidebar-inset"] main {
    overflow: visible !important;
    height: auto !important;
  }

  /* ── 19. WORKFLOW BUILDER: full-viewport canvas ── */
  /* Builder has its own dark toolbar — hide our purple header, use full 100dvh */
  html.fm-workflow-builder header.sticky {
    display: none !important;
  }
  html.fm-workflow-builder main[data-slot="sidebar-inset"] {
    height: 100dvh !important;
    padding-top: 0 !important;
    overflow: hidden !important;
  }
  html.fm-workflow-builder main[data-slot="sidebar-inset"] > main {
    flex: 1 1 auto !important;
    height: 100% !important;
    overflow: hidden !important;
  }
  /* Workflow canvas: allow touch pan/zoom */
  .react-flow, .react-flow__renderer, [class~="react-flow"] {
    touch-action: none !important;
  }
  /* Workflow node list sidebar: full width on mobile */
  html.fm-workflow-builder [class~="w-64"],
  html.fm-workflow-builder [class~="w-72"],
  html.fm-workflow-builder [class~="w-80"] {
    width: 100% !important; max-width: 100% !important;
  }

  /* ── 20. BOTTOM FREE-SPACE: compact min-height ── */
  main[data-slot="sidebar-inset"] [class~="min-h-screen"] {
    min-height: 0 !important;
  }
}

/* ── OVERVIEW PAGE: container width + symmetric cards under the Welcome hero ── */

/* Dograh wraps overview content in `.container.mx-auto.px-4.py-8 > .max-w-4xl.mx-auto`,
   which caps everything at 896px and leaves a huge gap on the right on desktop.
   Let the outer container span fluidly (so it can center its child), then cap the
   inner block to a comfortable column width and center it with margin:auto. On a
   typical laptop the old 1400px cap + width:100% made the block sprawl edge-to-edge
   (no side whitespace = "not centered"); a ~1080px cap gives balanced margins on
   large screens while staying fluid (and stacking to 1 column) below the cap. */
html.fm-page-overview main[data-slot="sidebar-inset"] [class~="container"][class~="mx-auto"] {
  max-width: 100% !important;
  width: 100% !important;
  /* Fluid breathing room — scales with viewport so the dashboard never feels
     cramped at 1280 nor lost in whitespace at 1920+. */
  padding: clamp(0.85rem, 2vw, 2.25rem) !important;
}
/* Overview: no extra padding — container padding handles breathing room.
   Scrollbar hidden globally via the desktop rule above; this keeps the override explicit. */
html.fm-page-overview main[data-slot="sidebar-inset"] {
  padding-top: 0 !important;
  scrollbar-width: none !important;
}
html.fm-page-overview main[data-slot="sidebar-inset"]::-webkit-scrollbar { display: none !important; width: 0 !important; height: 0 !important; }
html.fm-page-overview main[data-slot="sidebar-inset"] [class~="max-w-4xl"] {
  /* Fluid full-width column with a generous high-DPI cap. The dashboard now
     truly fills the available space (4K and ultrawide users stop seeing a
     narrow 1024px block in the middle), while the cap keeps line-lengths
     readable on giant displays. Natural height — vertical centring is done
     by the parent's justify-content:center. */
  max-width: min(1680px, 100%) !important;
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  display: block !important;
}
/* When the sidebar is collapsed to icons it frees ~12rem of width; keep the
   same generous cap (the container padding already adapts). */
html.fm-page-overview [data-slot="sidebar"][data-collapsible="icon"] ~ main[data-slot="sidebar-inset"] [class~="max-w-4xl"] {
  max-width: min(1800px, 100%) !important;
}

/* Overview desktop: container fills full viewport height (box-sizing includes
   padding). The wrapper is a flex column that vertically CENTRES the
   (natural-height) dashboard, so it sits lower on the page (out of the top
   corner). The dashboard itself never stretches — panels keep their natural
   compact height. */
@media (min-width: 768px) {
  html.fm-page-overview main[data-slot="sidebar-inset"] [class~="container"][class~="mx-auto"] {
    height: 100dvh !important;
    min-height: 0 !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
  }
  html.fm-page-overview main[data-slot="sidebar-inset"] [class~="max-w-4xl"] {
    flex: 0 1 auto !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    min-height: 0 !important;
  }
}

/* ── /overview cleanup (bulletproof, CSS-enforced; React cannot undo) ──
   Structure: div.max-w-4xl > [ dash (injected), Card.mb-8 (welcome),
   div.grid (2 cards), Card.mt-8 (resources) ]. The welcome + resources cards
   are the only mb-8 / mt-8 direct children, so target them precisely. JS
   additionally REMOVES the welcome card, but this guarantees the hide. */
html.fm-page-overview main[data-slot="sidebar-inset"] [class~="max-w-4xl"] > [class~="mb-8"],
html.fm-page-overview main[data-slot="sidebar-inset"] [class~="max-w-4xl"] > [class~="mt-8"] {
  display: none !important;
}

/* "Configure Models" button → match the "Go to Agents" primary button exactly.
   It ships as a shadcn `outline` variant (light/transparent), so we promote it to
   the same primary fill the default button uses. Driven by --primary tokens so it
   tracks light/dark mode (dark = light-purple #a78bfa on dark text) instead of the
   old hard-coded solid black that vanished against the dark card. */
html.fm-page-overview main[data-slot="sidebar-inset"] a[href="/model-configurations"] {
  background: var(--primary) !important;
  background-image: none !important;
  color: var(--primary-foreground) !important;
  border: 1px solid var(--primary) !important;
}
html.fm-page-overview main[data-slot="sidebar-inset"] a[href="/model-configurations"]:hover {
  background: var(--primary) !important;
  border-color: var(--primary) !important;
  opacity: 0.9 !important;
}
html.fm-page-overview main[data-slot="sidebar-inset"] a[href="/model-configurations"] svg {
  color: var(--primary-foreground) !important;
  stroke: var(--primary-foreground) !important;
}

/* ── REPORTS PAGE: colorful stat + chart cards ── */
/* Layout on /reports:
   • Grid 1: 2 stat cards (Total Workflow Runs, Transfer Dispositions)
   • Grid 2: 2 chart cards (Disposition Distribution, Call Duration Distribution)
   Each card gets its own brand-aligned color: vivid border-left, soft gradient
   background, hover lift, and a colored icon. */

html.fm-page-reports main[data-slot="sidebar-inset"] [class~="rounded-xl"][class~="border"]:not(:has(table)),
html.fm-page-reports main[data-slot="sidebar-inset"] [class~="rounded-lg"][class~="border"]:not(:has(table)) {
  border-radius: 14px !important;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease !important;
}
html.fm-page-reports main[data-slot="sidebar-inset"] [class~="rounded-xl"][class~="border"]:not(:has(table)):hover,
html.fm-page-reports main[data-slot="sidebar-inset"] [class~="rounded-lg"][class~="border"]:not(:has(table)):hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.10), 0 2px 6px rgba(0, 0, 0, 0.06) !important;
}

/* Stat cards row — grid-cols-1 md:grid-cols-2 gap-4 */
/* Card 1 — Total Workflow Runs → brand violet */
html.fm-page-reports main[data-slot="sidebar-inset"] [class~="md:grid-cols-2"][class~="gap-4"] > [class~="rounded-xl"]:nth-of-type(1),
html.fm-page-reports main[data-slot="sidebar-inset"] [class~="md:grid-cols-2"][class~="gap-4"] > [class~="rounded-lg"]:nth-of-type(1) {
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.10) 0%, rgba(124, 58, 237, 0.02) 60%, transparent 100%), var(--card) !important;
  border-left: 4px solid #7c3aed !important;
}
html.fm-page-reports main[data-slot="sidebar-inset"] [class~="md:grid-cols-2"][class~="gap-4"] > [class~="rounded-xl"]:nth-of-type(1) svg,
html.fm-page-reports main[data-slot="sidebar-inset"] [class~="md:grid-cols-2"][class~="gap-4"] > [class~="rounded-lg"]:nth-of-type(1) svg {
  color: #7c3aed !important;
  stroke: #7c3aed !important;
}
html.fm-page-reports main[data-slot="sidebar-inset"] [class~="md:grid-cols-2"][class~="gap-4"] > [class~="rounded-xl"]:nth-of-type(1) [class~="text-2xl"],
html.fm-page-reports main[data-slot="sidebar-inset"] [class~="md:grid-cols-2"][class~="gap-4"] > [class~="rounded-lg"]:nth-of-type(1) [class~="text-2xl"] {
  color: #6d28d9 !important;
}

/* Card 2 — Transfer Dispositions → magenta / pink */
html.fm-page-reports main[data-slot="sidebar-inset"] [class~="md:grid-cols-2"][class~="gap-4"] > [class~="rounded-xl"]:nth-of-type(2),
html.fm-page-reports main[data-slot="sidebar-inset"] [class~="md:grid-cols-2"][class~="gap-4"] > [class~="rounded-lg"]:nth-of-type(2) {
  background: linear-gradient(135deg, rgba(236, 72, 153, 0.10) 0%, rgba(236, 72, 153, 0.02) 60%, transparent 100%), var(--card) !important;
  border-left: 4px solid #ec4899 !important;
}
html.fm-page-reports main[data-slot="sidebar-inset"] [class~="md:grid-cols-2"][class~="gap-4"] > [class~="rounded-xl"]:nth-of-type(2) svg,
html.fm-page-reports main[data-slot="sidebar-inset"] [class~="md:grid-cols-2"][class~="gap-4"] > [class~="rounded-lg"]:nth-of-type(2) svg {
  color: #ec4899 !important;
  stroke: #ec4899 !important;
}
html.fm-page-reports main[data-slot="sidebar-inset"] [class~="md:grid-cols-2"][class~="gap-4"] > [class~="rounded-xl"]:nth-of-type(2) [class~="text-2xl"],
html.fm-page-reports main[data-slot="sidebar-inset"] [class~="md:grid-cols-2"][class~="gap-4"] > [class~="rounded-lg"]:nth-of-type(2) [class~="text-2xl"] {
  color: #db2777 !important;
}

/* Charts row — grid-cols-1 lg:grid-cols-2 gap-6 */
/* Card 3 — Disposition Distribution → indigo / blue-violet */
html.fm-page-reports main[data-slot="sidebar-inset"] [class~="lg:grid-cols-2"][class~="gap-6"] > [class~="rounded-xl"]:nth-of-type(1),
html.fm-page-reports main[data-slot="sidebar-inset"] [class~="lg:grid-cols-2"][class~="gap-6"] > [class~="rounded-lg"]:nth-of-type(1) {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.10) 0%, rgba(99, 102, 241, 0.02) 60%, transparent 100%), var(--card) !important;
  border-left: 4px solid #6366f1 !important;
}
html.fm-page-reports main[data-slot="sidebar-inset"] [class~="lg:grid-cols-2"][class~="gap-6"] > [class~="rounded-xl"]:nth-of-type(1) [class~="tracking-tight"],
html.fm-page-reports main[data-slot="sidebar-inset"] [class~="lg:grid-cols-2"][class~="gap-6"] > [class~="rounded-lg"]:nth-of-type(1) [class~="tracking-tight"] {
  color: #4338ca !important;
}

/* Card 4 — Call Duration Distribution → teal */
html.fm-page-reports main[data-slot="sidebar-inset"] [class~="lg:grid-cols-2"][class~="gap-6"] > [class~="rounded-xl"]:nth-of-type(2),
html.fm-page-reports main[data-slot="sidebar-inset"] [class~="lg:grid-cols-2"][class~="gap-6"] > [class~="rounded-lg"]:nth-of-type(2) {
  background: linear-gradient(135deg, rgba(20, 184, 166, 0.10) 0%, rgba(20, 184, 166, 0.02) 60%, transparent 100%), var(--card) !important;
  border-left: 4px solid #14b8a6 !important;
}
html.fm-page-reports main[data-slot="sidebar-inset"] [class~="lg:grid-cols-2"][class~="gap-6"] > [class~="rounded-xl"]:nth-of-type(2) [class~="tracking-tight"],
html.fm-page-reports main[data-slot="sidebar-inset"] [class~="lg:grid-cols-2"][class~="gap-6"] > [class~="rounded-lg"]:nth-of-type(2) [class~="tracking-tight"] {
  color: #0f766e !important;
}

/* Dark mode: brighten the colored text on chart card titles for contrast */
html.dark.fm-page-reports main[data-slot="sidebar-inset"] [class~="lg:grid-cols-2"][class~="gap-6"] > [class~="rounded-xl"]:nth-of-type(1) [class~="tracking-tight"],
html.dark.fm-page-reports main[data-slot="sidebar-inset"] [class~="lg:grid-cols-2"][class~="gap-6"] > [class~="rounded-lg"]:nth-of-type(1) [class~="tracking-tight"] {
  color: #a5b4fc !important;
}
html.dark.fm-page-reports main[data-slot="sidebar-inset"] [class~="lg:grid-cols-2"][class~="gap-6"] > [class~="rounded-xl"]:nth-of-type(2) [class~="tracking-tight"],
html.dark.fm-page-reports main[data-slot="sidebar-inset"] [class~="lg:grid-cols-2"][class~="gap-6"] > [class~="rounded-lg"]:nth-of-type(2) [class~="tracking-tight"] {
  color: #5eead4 !important;
}
html.dark.fm-page-reports main[data-slot="sidebar-inset"] [class~="md:grid-cols-2"][class~="gap-4"] > [class~="rounded-xl"]:nth-of-type(1) [class~="text-2xl"],
html.dark.fm-page-reports main[data-slot="sidebar-inset"] [class~="md:grid-cols-2"][class~="gap-4"] > [class~="rounded-lg"]:nth-of-type(1) [class~="text-2xl"] {
  color: #c4b5fd !important;
}
html.dark.fm-page-reports main[data-slot="sidebar-inset"] [class~="md:grid-cols-2"][class~="gap-4"] > [class~="rounded-xl"]:nth-of-type(2) [class~="text-2xl"],
html.dark.fm-page-reports main[data-slot="sidebar-inset"] [class~="md:grid-cols-2"][class~="gap-4"] > [class~="rounded-lg"]:nth-of-type(2) [class~="text-2xl"] {
  color: #f9a8d4 !important;
}

/* ── /workflow page: Active ⇄ Archived view separation ──────────────
   patch.js sets html.fm-archived-view based on the ?archived=1 query
   param and tags the two sections with .fm-active-section /
   .fm-archived-section. We just flip visibility based on the class. */

/* Default view = Active only */
html.fm-page-workflow:not(.fm-archived-view) .fm-archived-section {
  display: none !important;
}

/* Archived view = Archived only + hide Create/Upload buttons */
html.fm-page-workflow.fm-archived-view .fm-active-section {
  display: none !important;
}
html.fm-page-workflow.fm-archived-view .fm-workflow-toolbar > button:not(#fm-archived-btn),
html.fm-page-workflow.fm-archived-view .fm-workflow-toolbar > a:not(#fm-archived-btn) {
  display: none !important;
}
/* In archived view, drop the "Archived Workflows" sub-heading since the
   whole page IS the archived view (page title says so). Keep the table. */
html.fm-page-workflow.fm-archived-view .fm-archived-section > h2:first-child {
  display: none !important;
}
/* And let it render at full operational rhythm (no muted color on its table heading) */
html.fm-page-workflow.fm-archived-view .fm-archived-section {
  margin-top: 0 !important;
}

/* Our injected toggle button (uses borrowed Dograh button classes; just nudge it) */
#fm-archived-btn {
  display: inline-flex !important;
  align-items: center !important;
  font-weight: 500 !important;
}
#fm-archived-btn[aria-current="true"] {
  background: rgba(124, 58, 237, 0.10) !important;
  border-color: rgba(124, 58, 237, 0.30) !important;
  color: #6d28d9 !important;
}
.dark #fm-archived-btn[aria-current="true"] {
  background: rgba(167, 139, 250, 0.14) !important;
  border-color: rgba(167, 139, 250, 0.30) !important;
  color: #c4b5fd !important;
}

/* Empty state for archived view when count === 0 */
#fm-archived-empty {
  margin-top: 1rem !important;
  font-size: 0.875rem !important;
}

/* ── /workflow page: "Uncategorized" category group ───────────────────
   (2026-06-10) The hide rule was REMOVED. It hid the whole "Uncategorized"
   collapsible to drop an empty-looking row when every agent lived in a
   folder — but it ALSO hid legitimately ungrouped agents (e.g. ones
   restored from archive land with no folder), leaving only a ~10px margin
   strip (the "white bar"). Dograh only renders this group when ≥1 agent is
   uncategorized, so showing it is correct: the user sees a normal
   collapsible "Uncategorized (N)" header, exactly like the named folders. */

/* ── Accessibility: honor prefers-reduced-motion ──────────────────────
   Users who request reduced motion get no fade-ins, hover lifts, or animated
   transitions. Durations collapse to ~0 (state changes still apply, just
   instantly) and the decorative hover translate is removed so there's no jump. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }
  html:not(.fm-workflow-builder):not(.fm-workflow-settings) main[data-slot="sidebar-inset"] button:hover,
  html:not(.fm-workflow-builder):not(.fm-workflow-settings) main[data-slot="sidebar-inset"] [role="button"]:hover,
  html.fm-page-overview main[data-slot="sidebar-inset"] a[href="/model-configurations"]:hover {
    transform: none !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   DRIBBBLE REDESIGN OVERLAY (2026-06-07)
   Light  = "Finance" dashboard (Meghna Gaur): white sidebar, lavender canvas,
            white cards, purple gradient active pill + CTAs.
   Dark   = "TradUp" investment dashboard (Paperpillar): midnight purple/blue
            canvas with corner glow, indigo→violet accents, glowy cards.
   Final cascade layer — overrides the purple-sidebar / neutral-dark defaults
   above. Sidebar *appearance* is desktop-only so the mobile slide-over sheet
   keeps its existing purple treatment (matches the purple mobile header).
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── GLOBAL TOKENS (all widths) ── */
/* Light: brand purple primary + lavender canvas */
html:not(.dark) { --primary: #7c3aed; --primary-foreground: #ffffff; }
html:not(.dark),
html:not(.dark) body { background: #f5f4fb !important; }
html:not(.dark) main[data-slot="sidebar-inset"] { background: #f5f4fb !important; }
/* Light: primary CTA buttons → brand purple (Finance look, was near-black) */
html:not(.dark) main[data-slot="sidebar-inset"] button.bg-primary,
html:not(.dark) main[data-slot="sidebar-inset"] a.bg-primary {
  background: #7c3aed !important;
  color: #ffffff !important;
  border-color: #7c3aed !important;
}

/* Dark (TradUp): midnight-purple surface tokens + indigo accent */
html.dark {
  --background: #070414;
  --card: #140d2b;
  --popover: #140d2b;
  --muted: #191134;
  --muted-foreground: #a99fd0;   /* ≈ #BB9DC2 lavender */
  --accent: #1d1540;
  --accent-foreground: #f3f0fb;
  --border: rgba(124, 92, 255, 0.14);
  --input: rgba(124, 92, 255, 0.16);
  --foreground: #f3f0fb;
  --card-foreground: #f3f0fb;
  --popover-foreground: #f3f0fb;
  --primary: #7c5cff;            /* indigo, family of #5321DE */
  --primary-foreground: #ffffff;
}
/* Dark: near-black midnight base + radial purple/violet corner glows.
   sidebar-inset is transparent so the body glow shows through the content area. */
html.dark,
html.dark body { background-color: #070414 !important; }
html.dark body {
  background-image:
    radial-gradient(950px 520px at 0% -6%,   rgba(83, 33, 222, 0.20), transparent 60%),
    radial-gradient(820px 520px at 100% -2%, rgba(160, 60, 192, 0.14), transparent 55%),
    radial-gradient(760px 620px at 100% 102%, rgba(46, 13, 156, 0.12), transparent 60%) !important;
  background-attachment: fixed !important;
}
/* Overview (dark) only: drop the ambient purple background glow — it bands on older
   screens. Flat midnight (#070414 is already set globally on html.dark body). */
html.dark.fm-page-overview body { background-image: none !important; }
html.dark main[data-slot="sidebar-inset"] { background: transparent !important; }

/* Dark: cards get a subtle purple ring + outer glow.
   Uses compound `html.dark` (the earlier `.dark html …` rules never match —
   `.dark` lives on <html> itself, so there is no descendant <html>). */
html.dark:not(.fm-workflow-builder):not(.fm-workflow-settings) main[data-slot="sidebar-inset"] [class~="rounded-lg"][class~="border"],
html.dark:not(.fm-workflow-builder):not(.fm-workflow-settings) main[data-slot="sidebar-inset"] [class~="rounded-xl"][class~="border"] {
  background: #140d2b !important;
  border-color: rgba(124, 92, 255, 0.16) !important;
  box-shadow:
    inset 0 1px 0 rgba(167, 139, 250, 0.05),
    0 0 0 1px rgba(124, 92, 255, 0.05),
    0 12px 36px rgba(0, 0, 0, 0.52) !important;
}
html.dark:not(.fm-workflow-builder):not(.fm-workflow-settings) main[data-slot="sidebar-inset"] [class~="rounded-lg"][class~="border"]:not(:has(table)):hover,
html.dark:not(.fm-workflow-builder):not(.fm-workflow-settings) main[data-slot="sidebar-inset"] [class~="rounded-xl"][class~="border"]:not(:has(table)):hover {
  border-color: rgba(124, 92, 255, 0.30) !important;
  box-shadow:
    0 0 28px rgba(124, 92, 255, 0.22),
    0 18px 42px rgba(0, 0, 0, 0.55) !important;
}

/* ── SIDEBAR APPEARANCE — DESKTOP ONLY ──
   (≥768px; mobile keeps the existing purple slide-over sheet + white text) */
@media (min-width: 768px) {
  /* LIGHT: vivid purple sidebar with white text (matches the product design) */
  html:not(.dark) [data-sidebar="sidebar"] {
    background: #6725CD !important;
    border-right: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow:
      1px 0 0 rgba(255, 255, 255, 0.04),
      4px 0 24px rgba(103, 37, 205, 0.28) !important;
  }
  /* Brand wordmark → white on the purple sidebar */
  html:not(.dark) a[href="/"] {
    background: none !important;
    -webkit-text-fill-color: #ffffff !important;
    color: #ffffff !important;
    filter: none !important;
  }
  /* Sidebar collapse toggle → white */
  html:not(.dark) [data-sidebar="trigger"],
  html:not(.dark) [data-sidebar="trigger"] svg {
    color: #ffffff !important;
    stroke: #ffffff !important;
  }
  html:not(.dark) [data-sidebar="trigger"]:hover {
    background: rgba(255, 255, 255, 0.12) !important;
  }
  html:not(.dark) [data-sidebar="group-label"] { color: rgba(255, 255, 255, 0.45) !important; }
  html:not(.dark) [data-sidebar="menu-button"] { color: rgba(255, 255, 255, 0.82) !important; }
  html:not(.dark) [data-sidebar="menu-button"] svg {
    color: rgba(255, 255, 255, 0.78) !important; stroke: rgba(255, 255, 255, 0.78) !important;
  }
  html:not(.dark) [data-sidebar="menu-button"]:hover {
    background: rgba(255, 255, 255, 0.10) !important; color: #ffffff !important;
  }
  html:not(.dark) [data-sidebar="menu-button"]:hover svg {
    color: #ffffff !important; stroke: #ffffff !important;
  }
  /* Active item → bright highlighted pill on the purple surface */
  html:not(.dark) [data-sidebar="menu-button"][data-active="true"] {
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.24) 0%, rgba(255, 255, 255, 0.12) 100%) !important;
    color: #ffffff !important;
    border-left: none !important;
    border-radius: 10px !important;
    padding-left: 0.75rem !important;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.24), 0 4px 14px rgba(0, 0, 0, 0.18) !important;
  }
  html:not(.dark) [data-sidebar="menu-button"][data-active="true"] svg {
    color: #ffffff !important; stroke: #ffffff !important;
  }
  /* Theme-toggle pill → translucent white on the purple sidebar */
  html:not(.dark) #fm-sidebar-theme {
    background: rgba(255, 255, 255, 0.14) !important;
    border: 1px solid rgba(255, 255, 255, 0.40) !important;
    color: #ffffff !important;
  }
  html:not(.dark) #fm-sidebar-theme svg { color: #ffffff !important; stroke: #ffffff !important; }

  /* DARK: deeper midnight sidebar + indigo→violet active glow */
  html.dark [data-sidebar="sidebar"] {
    background: #5820ab !important;
    border-right: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow:
      1px 0 0 rgba(255, 255, 255, 0.05),
      6px 0 30px rgba(103, 37, 205, 0.40) !important;
  }
  html.dark [data-sidebar="menu-button"][data-active="true"] {
    background: linear-gradient(90deg, #5321DE 0%, #A03CC0 100%) !important;
    color: #ffffff !important;
    border-left: none !important;
    border-radius: 10px !important;
    padding-left: 0.75rem !important;
    box-shadow:
      0 0 22px rgba(124, 92, 255, 0.45),
      inset 0 0 0 1px rgba(167, 139, 250, 0.25) !important;
  }
  html.dark [data-sidebar="menu-button"][data-active="true"] svg {
    color: #ffffff !important; stroke: #ffffff !important;
  }
}

/* ════════════════════════════════════════════════════════════════════════════
   Voice Agents (/workflow) — folder/agent rows as individual cards
   Each folder is a `div.mb-3` wrapping a `[data-slot="collapsible"]` inside the
   `.space-y-1` list. Default Dograh renders them as flat text on the page; we
   give each one a raised "white bar" (card) so folders read as discrete items —
   new folders pick this up automatically (same markup). Uses Dograh's own --card
   / --border tokens so light = white-on-grey and dark = dark surface, with only
   the shadow tuned per-mode. Scoped to the workflow list page only.
   ════════════════════════════════════════════════════════════════════════════ */
html.fm-page-workflow .space-y-1 > .mb-3 {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--fm-radius);
  padding: 4px 8px;
  margin-bottom: 10px;
  box-shadow: 0 1px 2px rgba(16, 16, 24, 0.05);
  transition: box-shadow 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
html.fm-page-workflow .space-y-1 > .mb-3:hover {
  border-color: color-mix(in srgb, var(--border) 40%, var(--foreground));
  box-shadow: 0 4px 12px -4px rgba(16, 16, 24, 0.12);
}
/* dark mode: deeper shadow, the surface/border already swap via tokens */
html.fm-page-workflow.dark .space-y-1 > .mb-3 {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.30);
}
html.fm-page-workflow.dark .space-y-1 > .mb-3:hover {
  box-shadow: 0 4px 14px -4px rgba(0, 0, 0, 0.55);
}

/* ── Live KB-health stat strip on /overview ─────────────────────────── */
.fm-stats-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 12px; margin: 16px 0 2px; }
.fm-stat-card { display: block; background: #ffffff; border: 1px solid #e8e3f3; border-radius: 14px; padding: 15px 18px; text-decoration: none; color: inherit; box-shadow: 0 1px 2px rgba(20,12,40,.05); transition: border-color .15s ease, transform .15s ease; }
.fm-stat-card:hover { border-color: rgba(124,58,237,.35); transform: translateY(-1px); }
.fm-stat-n { font-size: 1.7rem; font-weight: 700; line-height: 1; color: #1c1830; }
.fm-stat-card.warn .fm-stat-n { color: #b9791d; }
.fm-stat-card.bad .fm-stat-n { color: #cf3b4b; }
.fm-stat-l { font-size: .8rem; color: #6b6480; margin-top: 6px; }
.dark .fm-stats-strip .fm-stat-card { background: #15151c; border-color: rgba(124,92,255,.16); }
.dark .fm-stat-n { color: #f3f0fb; }
.dark .fm-stat-l { color: #a99fd0; }

/* ════════════════ Web3 overview dashboard (rich, useful) ════════════════ */
/* Hide Dograh's native welcome/resources cards (the dashboard replaces them).
   Vertical centring of the dashboard is handled by the rule at the top of this
   block (container is a flex column with justify-content:center + min-height
   ≈viewport); do NOT re-add a justify-content override here. */
html.fm-page-overview main[data-slot="sidebar-inset"] [class~="max-w-4xl"]:has(> #fm-overview-dash) > div:not([id^="fm-overview"]) { display: none !important; }

/* ════════ OVERVIEW — clean light dashboard (matches the White-Mode design) ════════ */
/* Natural content height — no flex:1 stretch — keeps the 3 bottom cards from
   sprawling to fill the viewport. Vertical positioning is handled by the
   max-w-4xl wrapper rule below (justify-content + padding-top). */
#fm-overview-dash { width: 100%; display: flex; flex-direction: column; gap: 16px; }
.fm3-loading { padding: 40px; text-align: center; color: #8b84a3; font-size: .9rem; }

/* Header: title + subtitle (left), primary/secondary actions (right) */
.fm3-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex: 0 0 auto; }
.fm3-head-title { margin: 0; font-size: 1.55rem; font-weight: 700; letter-spacing: -.02em; color: #16122b; line-height: 1.1; }
.fm3-head-sub { margin: 4px 0 0; font-size: .85rem; color: #6b6480; }
.fm3-head-r { display: flex; gap: 10px; flex: 0 0 auto; }

/* Buttons */
.fm3-btn { display: inline-flex; align-items: center; gap: 7px; padding: 9px 16px; border-radius: 10px; font-size: .82rem; font-weight: 600; text-decoration: none; white-space: nowrap; border: 1px solid transparent; cursor: pointer; transition: transform .15s ease, box-shadow .15s ease, filter .15s ease, border-color .15s ease, color .15s ease; }
.fm3-btn svg { width: 15px; height: 15px; }
.fm3-btn.primary { color: #fff; background: linear-gradient(135deg, #7c3aed, #a855f7); box-shadow: 0 4px 14px rgba(124,58,237,.30); }
/* (5) Purple-button hover: brightness-110 + shadow-md (Tailwind defaults) */
.fm3-btn.primary:hover { filter: brightness(1.10); box-shadow: 0 4px 6px -1px rgba(0,0,0,.10), 0 2px 4px -2px rgba(0,0,0,.10), 0 7px 22px rgba(124,58,237,.42); transform: translateY(-1px); }
.fm3-btn.ghost { color: #4b4566; background: #fff; border-color: #e6e1f3; }
.fm3-btn.ghost:hover { border-color: rgba(124,58,237,.42); color: #6d28d9; }

/* KPI cards (4) — flat white, subtle border, tinted icon chip, dark numerals */
/* Fluid: auto-fit reflows 4→3→2→1 columns as the viewport shrinks. The
   min(220px, 100%) floor keeps each card readable; min-width:0 on the card
   keeps a long KPI from widening its column. Gap also scales with viewport. */
.fm3-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: clamp(10px, 1.2vw, 18px); flex: 0 0 auto; }
.fm3-kpi { display: block; min-width: 0; width: 100%; border-radius: 14px; padding: 16px 18px; text-decoration: none; background: #fff; border: 1px solid #ece8f6; box-shadow: 0 1px 2px rgba(20,12,40,.04), 0 10px 26px rgba(124,58,237,.05); transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease; }
.fm3-kpi:hover { transform: translateY(-2px); border-color: rgba(124,58,237,.28); box-shadow: 0 16px 36px rgba(124,58,237,.13); }
.fm3-kpi-top { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.fm3-kpi-ic { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 10px; background: rgba(124,58,237,.10); color: #7c3aed; }
.fm3-kpi-ic svg { width: 17px; height: 17px; }
.fm3-kpi-l { font-size: .78rem; color: #6b6480; font-weight: 500; }
.fm3-kpi-n { font-size: 1.9rem; font-weight: 800; line-height: 1.05; letter-spacing: -.02em; color: #16122b; margin-top: 0; }
.fm3-kpi-c { font-size: .72rem; color: #9b93b5; margin-top: 4px; }
.fm3-kpi.warn .fm3-kpi-ic { background: rgba(245,158,11,.15); color: #d97706; }
.fm3-kpi.warn .fm3-kpi-n { color: #c2570c; }

/* 3-panel grid — fluid: auto-fit reflows 3→2→1 columns as the viewport shrinks.
   min(300px, 100%) floor keeps the lists/gauge legible; gap scales with viewport. */
.fm3-grid3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: clamp(10px, 1vw, 16px); }
/* (6) Three bottom cards share a 320px floor so they line up even when content
   is short (Agents empty, KB Health = donut only, Needs Attention = 1 item). */
.fm3-panel { display: flex; flex-direction: column; min-height: 0; min-width: 0; border-radius: 14px; padding: 16px 18px; background: #fff; border: 1px solid #ece8f6; box-shadow: 0 1px 2px rgba(20,12,40,.04), 0 10px 26px rgba(124,58,237,.05); }
.fm3-panel.attn { background: linear-gradient(180deg, #fff6f5, #ffffff 55%); border-color: #f6dcdc; }
.fm3-ph { display: flex; flex-direction: column; gap: 1px; margin-bottom: 12px; flex: 0 0 auto; }
.fm3-pt { font-size: .95rem; font-weight: 700; color: #16122b; }
.fm3-psub { font-size: .73rem; color: #8b84a3; }
.fm3-panel.attn .fm3-psub { color: #dc5a52; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; }
.fm3-panel.attn .fm3-psub::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #ef4444; }
/* (3) "Needs Attention" panel header — slightly bolder than the other panel titles */
.fm3-panel.attn .fm3-pt { font-weight: 800 !important; letter-spacing: -.005em; }

/* lists inside panels (the scroll-sink when space is tight) */
.fm3-plist { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; }
.fm3-plist::-webkit-scrollbar { width: 6px; }
.fm3-plist::-webkit-scrollbar-thumb { background: rgba(124,58,237,.20); border-radius: 999px; }
.fm3-li { display: flex; align-items: center; gap: 10px; padding: 9px 2px; border-bottom: 1px solid #f1eef9; text-decoration: none; }
.fm3-li:last-child { border-bottom: 0; }
.fm3-li-t { flex: 1; min-width: 0; font-size: .84rem; color: #2c2640; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
a.fm3-li:hover .fm3-li-t { color: #6d28d9; }
/* (7) Standardized badges — Tailwind px-2.5 py-0.5 = 2px 10px, text-sm = .875rem */
.fm3-pill { flex: 0 0 auto; font-size: .875rem; font-weight: 700; border-radius: 999px; padding: 2px 10px; line-height: 1.25; white-space: nowrap; }
.fm3-pill.warn { color: #b9791d; background: #fdf1e0; }
.fm3-pill.ok { color: #0f9f54; background: #e6f8ee; }
.fm3-empty { font-size: .82rem; color: #8b84a3; padding: 18px 0; text-align: center; }

/* panel bottom button */
.fm3-pbtn { flex: 0 0 auto; margin-top: 12px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 9px 14px; border-radius: 10px; font-size: .8rem; font-weight: 600; text-decoration: none; border: 1px solid #e6e1f3; color: #4b4566; background: #fff; transition: transform .15s ease, box-shadow .15s ease, filter .15s ease, border-color .15s ease, color .15s ease; }
.fm3-pbtn:hover { border-color: rgba(124,58,237,.42); color: #6d28d9; }
.fm3-pbtn.primary { color: #fff; background: linear-gradient(135deg, #7c3aed, #a855f7); border-color: transparent; box-shadow: 0 4px 14px rgba(124,58,237,.28); }
/* (5) Purple panel-button hover: brightness-110 + shadow-md */
.fm3-pbtn.primary:hover { filter: brightness(1.10); color: #fff; box-shadow: 0 4px 6px -1px rgba(0,0,0,.10), 0 2px 4px -2px rgba(0,0,0,.10), 0 7px 20px rgba(124,58,237,.4); }

/* Knowledge Base Health — circular gauge */
/* (4) Donut centered both axes — text-align + auto-margin SVG + flex centering. */
.fm3-panel.kbh { text-align: center; align-items: center; }
.fm3-gauge-wrap { position: relative; flex: 1 1 auto; min-height: 0; display: flex; align-items: center; justify-content: center; padding: 6px 0; width: 100%; }
.fm3-gauge-svg { width: 124px; height: 124px; max-height: 100%; transform: rotate(-90deg); display: block; margin: 0 auto; }
.fm3-gauge-track { fill: none; stroke: #eee7f8; stroke-width: 10; }
.fm3-gauge-fill { fill: none; stroke: url(#fm3grad); stroke-width: 10; stroke-linecap: round; transition: stroke-dashoffset .9s ease; }
.fm3-gauge-ctr { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.fm3-gauge-pct { font-size: 1.55rem; font-weight: 800; color: #16122b; line-height: 1; letter-spacing: -.02em; }
.fm3-gauge-cap { font-size: .7rem; color: #8b84a3; margin-top: 3px; }
.fm3-kbh-stats { display: flex; gap: 10px; flex: 0 0 auto; }
.fm3-kbh-stat { flex: 1; border-radius: 10px; background: #f7f5fd; padding: 9px 6px; }
.fm3-kbh-n { font-size: 1.05rem; font-weight: 700; color: #16122b; }
.fm3-kbh-l { font-size: .67rem; color: #8b84a3; margin-top: 1px; }

/* footer */
.fm3-foot { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: .72rem; color: #9b93b5; }

/* ── dark mode variants ── */
.dark .fm3-head-title, .dark .fm3-pt, .dark .fm3-kpi-n, .dark .fm3-gauge-pct, .dark .fm3-kbh-n { color: #f5f3ff; }
.dark .fm3-head-sub, .dark .fm3-kpi-l, .dark .fm3-kpi-c, .dark .fm3-psub, .dark .fm3-gauge-cap, .dark .fm3-kbh-l, .dark .fm3-foot, .dark .fm3-empty { color: #b3a8d8; }
.dark .fm3-kpi, .dark .fm3-panel { background: linear-gradient(150deg, rgba(32,23,56,.72), rgba(20,13,43,.6)); border-color: rgba(124,92,255,.20); box-shadow: 0 8px 30px rgba(0,0,0,.32); }
.dark .fm3-panel.attn { background: linear-gradient(180deg, rgba(60,24,40,.5), rgba(20,13,43,.6) 60%); border-color: rgba(239,68,68,.28); }
.dark .fm3-kpi:hover { border-color: rgba(124,92,255,.45); }
.dark .fm3-kpi-ic { background: rgba(124,92,255,.18); color: #c4b5fd; }
.dark .fm3-li, .dark .fm3-li-t { color: #e7e1fb; }
.dark .fm3-li { border-bottom-color: rgba(124,92,255,.14); }
.dark .fm3-btn.ghost, .dark .fm3-pbtn { background: rgba(124,92,255,.10); border-color: rgba(124,92,255,.24); color: #e7e1fb; }
.dark .fm3-btn.ghost:hover, .dark .fm3-pbtn:hover { color: #fff; border-color: rgba(124,92,255,.5); }
.dark .fm3-kbh-stat { background: rgba(124,92,255,.10); }
.dark .fm3-gauge-track { stroke: rgba(124,92,255,.18); }

/* The dashboard's vertical centring (container = flex column, min-height
   ≈viewport, justify-content:center) is declared once at the top of the
   /overview block; no further container overrides should live here. */

/* ── Shrink-to-fit on short viewports so the panels keep usable height instead of
   being crushed by the fixed KPI/action rows. Scales the chrome down as the
   screen gets shorter; pairs with the hard height cap above. ── */
@media (min-width: 768px) and (max-height: 820px) {
  #fm-overview-dash { gap: 11px !important; }
  .fm3-head-title { font-size: 1.35rem !important; }
  .fm3-kpis { gap: 11px !important; }
  .fm3-kpi { padding: 12px 15px !important; }
  .fm3-kpi-ic { width: 32px !important; height: 32px !important; margin-bottom: 8px !important; }
  .fm3-kpi-n { font-size: 1.55rem !important; }
  .fm3-grid3 { gap: 11px !important; }
  .fm3-panel { padding: 13px 15px !important; }
  .fm3-ph { margin-bottom: 9px !important; }
  .fm3-li { padding: 7px 2px !important; }
  .fm3-gauge-pct { font-size: 1.6rem !important; }
}
@media (min-width: 768px) and (max-height: 680px) {
  /* Gentle density only — never hide the icon or the caption line (the page can
     scroll now that the fixed-fill is gone). */
  .fm3-kpi { padding: 10px 13px !important; }
  .fm3-kpi-ic { width: 30px !important; height: 30px !important; }
  .fm3-kpi-n { font-size: 1.4rem !important; }
  .fm3-li { padding: 5px 2px !important; }
}

/* ── Narrow viewports (tablet portrait / mobile): header + footer stack
   vertically, fonts reduce, the dashboard scrolls naturally instead of being
   forced to fit a viewport-height. Pairs with the auto-fit grids above so the
   KPIs and panels collapse to fewer columns on their own. ── */
@media (max-width: 767px) {
  html.fm-page-overview main[data-slot="sidebar-inset"] [class~="container"][class~="mx-auto"] {
    height: auto !important;
    min-height: 100dvh !important;
    padding: clamp(0.75rem, 3vw, 1.25rem) !important;
  }
  html.fm-page-overview main[data-slot="sidebar-inset"] [class~="max-w-4xl"] {
    flex: 0 0 auto !important;
  }
  #fm-overview-dash { gap: 12px !important; }
  .fm3-head { flex-direction: column !important; align-items: stretch !important; gap: 10px !important; }
  .fm3-head-r { flex-wrap: wrap !important; }
  .fm3-head-title { font-size: 1.3rem !important; }
  .fm3-kpi-n { font-size: 1.55rem !important; }
  .fm3-foot { flex-direction: column !important; align-items: flex-start !important; gap: 4px !important; }
}

/* ── Wide viewports (≥1440px): scale the dashboard up so it visually fills
   ultrawide / 4K screens instead of looking like a fixed-size widget. ── */
@media (min-width: 1440px) {
  .fm3-head-title { font-size: clamp(1.55rem, 1.4vw, 2rem) !important; }
  .fm3-head-sub { font-size: clamp(.85rem, .75vw, 1rem) !important; }
  .fm3-kpi { padding: clamp(16px, 1.2vw, 22px) clamp(18px, 1.3vw, 24px) !important; }
  .fm3-kpi-n { font-size: clamp(1.9rem, 1.7vw, 2.4rem) !important; }
  .fm3-kpi-ic { width: clamp(34px, 2.4vw, 42px) !important; height: clamp(34px, 2.4vw, 42px) !important; }
  .fm3-panel { padding: clamp(16px, 1.2vw, 22px) clamp(18px, 1.3vw, 24px) !important; }
  .fm3-pt { font-size: clamp(.95rem, .9vw, 1.1rem) !important; }
  .fm3-li-t { font-size: clamp(.84rem, .82vw, .98rem) !important; }
  .fm3-gauge-svg { width: clamp(124px, 9vw, 160px) !important; height: clamp(124px, 9vw, 160px) !important; }
  .fm3-gauge-pct { font-size: clamp(1.55rem, 1.6vw, 2rem) !important; }
}

/* ════════════ Web3 polish — cards / buttons / canvas, ALL dashboard pages ════════════ */
/* Glass cards w/ purple accent — fixes the flat "white box on grey" and gives every
   page (Telephony, Tools, Developers, Models, Campaigns, Settings…) one cohesive look. */
html:not(.fm-workflow-builder):not(.fm-workflow-settings):not(.fm-page-overview):not(.fm-page-reports) main[data-slot="sidebar-inset"] [class~="rounded-lg"][class~="border"]:not(:has(table)),
html:not(.fm-workflow-builder):not(.fm-workflow-settings):not(.fm-page-overview):not(.fm-page-reports) main[data-slot="sidebar-inset"] [class~="rounded-xl"][class~="border"]:not(:has(table)) {
  border-radius: 16px !important;
  background: linear-gradient(165deg, #ffffff 0%, #f7f5ff 100%) !important;
  border: 1px solid rgba(124,58,237,.13) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 2px 8px rgba(124,58,237,.05), 0 14px 36px rgba(124,58,237,.08) !important;
}
html.dark:not(.fm-workflow-builder):not(.fm-workflow-settings):not(.fm-page-overview):not(.fm-page-reports) main[data-slot="sidebar-inset"] [class~="rounded-lg"][class~="border"]:not(:has(table)),
html.dark:not(.fm-workflow-builder):not(.fm-workflow-settings):not(.fm-page-overview):not(.fm-page-reports) main[data-slot="sidebar-inset"] [class~="rounded-xl"][class~="border"]:not(:has(table)) {
  background: linear-gradient(165deg, rgba(34,24,60,.72) 0%, rgba(20,13,43,.66) 100%) !important;
  border: 1px solid rgba(124,92,255,.2) !important;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 2px 8px rgba(0,0,0,.3), 0 14px 36px rgba(0,0,0,.34) !important;
}
html:not(.fm-workflow-builder):not(.fm-workflow-settings):not(.fm-page-overview):not(.fm-page-reports) main[data-slot="sidebar-inset"] [class~="rounded-lg"][class~="border"]:not(:has(table)):hover {
  transform: translateY(-2px); border-color: rgba(124,58,237,.32) !important;
  box-shadow: 0 4px 12px rgba(124,58,237,.09), 0 22px 48px rgba(124,58,237,.14) !important;
}
html.dark:not(.fm-workflow-builder):not(.fm-workflow-settings):not(.fm-page-overview):not(.fm-page-reports) main[data-slot="sidebar-inset"] [class~="rounded-lg"][class~="border"]:not(:has(table)):hover {
  border-color: rgba(124,92,255,.42) !important; box-shadow: 0 22px 48px rgba(124,92,255,.18) !important;
}

/* Primary buttons → gradient + glow */
main[data-slot="sidebar-inset"] button[class*="bg-primary"],
main[data-slot="sidebar-inset"] [data-slot="button"][class*="bg-primary"],
main[data-slot="sidebar-inset"] a[class*="bg-primary"] {
  background: linear-gradient(135deg, #7c3aed 0%, #a855f7 100%) !important;
  border: none !important;
  box-shadow: 0 4px 16px rgba(124,58,237,.32) !important;
  transition: filter .15s ease, box-shadow .15s ease !important;
}
main[data-slot="sidebar-inset"] button[class*="bg-primary"]:hover,
main[data-slot="sidebar-inset"] [data-slot="button"][class*="bg-primary"]:hover {
  filter: brightness(1.07); box-shadow: 0 6px 24px rgba(124,58,237,.44) !important;
}

/* Subtle web3 glow on the light content canvas (depth, no flat grey) */
html.light:not(.fm-workflow-builder) main[data-slot="sidebar-inset"] {
  background: radial-gradient(1100px 620px at 88% -8%, rgba(124,58,237,.06), transparent 55%), radial-gradient(800px 560px at -6% 108%, rgba(168,85,247,.045), transparent 55%), #f3f1fb !important;
}

/* ── dark mode: white important numbers + brighter text + clear focus (visibility) ── */
.dark .fm3-kpi-n { background: none !important; -webkit-text-fill-color: #ffffff !important; color: #ffffff !important; }
.dark .fm3-kpi.warn .fm3-kpi-n { -webkit-text-fill-color: #fbbf24 !important; color: #fbbf24 !important; }
.dark .fm3-kpi-l { color: #c8bdf2 !important; }
.dark .fm3-act-time, .dark .fm3-empty { color: #b3a8d8 !important; }
.dark .fm3-panel-title, .dark .fm3-gap-q, .dark .fm3-act-t { color: #f5f3ff !important; }
/* clear, visible focus ring across the dashboard in dark mode */
.dark main[data-slot="sidebar-inset"] a:focus-visible,
.dark main[data-slot="sidebar-inset"] button:focus-visible,
.dark main[data-slot="sidebar-inset"] input:focus-visible,
.dark main[data-slot="sidebar-inset"] select:focus-visible,
.dark main[data-slot="sidebar-inset"] textarea:focus-visible,
.dark main[data-slot="sidebar-inset"] [role="button"]:focus-visible {
  outline: 2px solid #a78bfa !important; outline-offset: 2px !important; box-shadow: 0 0 0 4px rgba(167,139,250,.25) !important;
}

/* stronger, visible web3 cards — lavender glass + float (beats Dograh bg-card white) */
html.light:not(.fm-workflow-builder):not(.fm-workflow-settings):not(.fm-page-overview):not(.fm-page-reports) main[data-slot="sidebar-inset"] [class~="bg-card"]:not(:has(table)) {
  background-color: #f7f4ff !important;
  background-image: linear-gradient(160deg, rgba(255,255,255,.7), rgba(124,58,237,.055)) !important;
  border: 1px solid rgba(124,58,237,.18) !important;
  border-radius: 16px !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.85), 0 2px 10px rgba(124,58,237,.07), 0 18px 44px rgba(124,58,237,.12) !important;
}
html.dark:not(.fm-workflow-builder):not(.fm-workflow-settings):not(.fm-page-overview):not(.fm-page-reports) main[data-slot="sidebar-inset"] [class~="bg-card"]:not(:has(table)) {
  background-color: rgba(26,18,46,.7) !important;
  background-image: linear-gradient(160deg, rgba(124,92,255,.08), rgba(34,24,60,.4)) !important;
  border: 1px solid rgba(124,92,255,.22) !important;
}

/* make Dograh's bg-card cards a soft lavender glass (override the --card token in content) */
html.light:not(.fm-workflow-builder) main[data-slot="sidebar-inset"] { --card: #f7f4ff !important; --card-foreground: #1c1830 !important; }
.dark:not(.fm-workflow-builder) main[data-slot="sidebar-inset"] { --card: #1a122e !important; }