/* Ported verbatim from frontend/src/index.css (everything except the Tailwind @theme block,
   which lives in index.html because the Tailwind browser build only reads inline text/tailwindcss styles). */

/* 2026-11-11: wider and clearly visible (it was 4 px, dark grey on black / light grey on white); Firefox via scrollbar-color */
html { scrollbar-width: auto; scrollbar-color: #5B6472 #0B0E14; }
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-track {
  background: #0B0E14;
}
::-webkit-scrollbar-thumb {
  background: #5B6472;
  border-radius: 6px;
  border: 2px solid #0B0E14;
}
::-webkit-scrollbar-thumb:hover {
  background: #0078D4;
}
::-webkit-scrollbar-corner { background: transparent; }

/* Header logo: the dark-text artwork on the light theme, the light-text one on the dark theme (shell/layout.js) */
.fx-logo-dark { display: none; }
[data-theme="dark"] .fx-logo-light { display: none; }
[data-theme="dark"] .fx-logo-dark { display: block; }

/* Base custom interactive styles and inputs */
body {
  font-family: var(--font-sans);
  background-color: #0B0E14;
  color: #C9D1D9;
}

/* A <select>'s open dropdown list doesn't inherit background/text color from the <select> element the
   way its closed box does — it needs its own explicit color on each <option>, or Chromium renders the
   popup with default OS colors (white on black text) regardless of the page's theme. */
:root {
  color-scheme: dark;
}
[data-theme="light"] {
  color-scheme: light;
}
select option {
  background-color: #0B0E14;
  color: #C9D1D9;
}
[data-theme="light"] select option {
  background-color: #FFFFFF;
  color: #334155;
}

/* Dense form elements focus states resetting default bulky focus rings */
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: #0078D4 !important;
  box-shadow: 0 0 0 1px rgba(0, 120, 212, 0.25) !important;
}

/* Fluid clean micro transitions to preserve active high density performance feels */
* {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 120ms;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   TRULATTICE LIGHT THEME
   Professional enterprise SaaS — white/slate surface palette.
   CSS custom property overrides cascade to all child elements,
   so every Tailwind utility that uses var(--color-slate-*) or
   var(--color-indigo-*) picks up the light values automatically.
   No component files need to change.
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

[data-theme="light"] {

  /* ── Slate surface palette (dark → light semantic flip) ── */
  --color-slate-950: #FFFFFF;    /* Page canvas → pure white           */
  --color-slate-900: #F8FAFC;    /* Card / panel surface → off-white    */
  --color-slate-800: #E2E8F0;    /* Panel borders / dividers            */
  --color-slate-700: #CBD5E1;    /* Subtle borders / secondary dividers */
  --color-slate-600: #94A3B8;    /* Disabled / placeholder text         */
  --color-slate-500: #64748B;    /* Muted label text                    */
  --color-slate-400: #475569;    /* Secondary / helper text             */
  --color-slate-300: #334155;    /* Body text                           */
  --color-slate-200: #1E293B;    /* Heading / strong text               */
  --color-slate-100: #0F172A;    /* Primary text                        */
  --color-slate-50:  #0F172A;    /* Strongest text                      */

  /* ── Dark custom brand tokens ── */
  --color-dark-surface: #F8FAFC;
  --color-dark-border:  #E2E8F0;

  /* ── Indigo dark backgrounds → light tints on white surface ── */
  --color-indigo-950: #EFF6FF;   /* bg-indigo-950 badge fill → light blue tint */
  --color-indigo-900: #DBEAFE;   /* bg-indigo-900 → very light blue             */
  --color-indigo-800: #BFDBFE;   /* bg-indigo-800 → light blue                  */
  --color-indigo-700: #93C5FD;   /* bg-indigo-700 → medium light blue           */

  /* ── Emerald dark backgrounds → light tints ── */
  --color-emerald-950: #ECFDF5;
  --color-emerald-900: #D1FAE5;
  --color-emerald-800: #A7F3D0;

  /* ── Amber dark backgrounds → light tints ── */
  --color-amber-950: #FFFBEB;
  --color-amber-900: #FEF3C7;

  /* ── Sky dark backgrounds → light tints ── */
  --color-sky-950: #F0F9FF;
  --color-sky-900: #E0F2FE;

  /* ── Purple dark backgrounds → light tints ── */
  --color-purple-950: #FAF5FF;
  --color-purple-900: #F3E8FF;

  /* ── Rose dark backgrounds → light tints ── */
  --color-rose-950: #FFF1F2;
  --color-rose-900: #FFE4E6;
}

/* ── Explicit white-text override (not a CSS variable in Tailwind core) ── */
[data-theme="light"] .text-white {
  color: #0F172A;
}

/* ── Accent text darkened for light-mode legibility ── */
[data-theme="light"] .text-emerald-400 { color: #059669; }
[data-theme="light"] .text-emerald-300 { color: #10B981; }
[data-theme="light"] .text-sky-400     { color: #0284C7; }
[data-theme="light"] .text-sky-300     { color: #0EA5E9; }
[data-theme="light"] .text-purple-400  { color: #7C3AED; }
[data-theme="light"] .text-purple-300  { color: #9333EA; }
[data-theme="light"] .text-amber-400   { color: #B45309; }
[data-theme="light"] .text-amber-300   { color: #D97706; }
[data-theme="light"] .text-indigo-400  { color: #0078D4; }
[data-theme="light"] .text-indigo-300  { color: #106EBE; }
[data-theme="light"] .text-pink-400    { color: #DB2777; }
[data-theme="light"] .text-rose-400    { color: #E11D48; }
[data-theme="light"] .text-slate-400   { color: #475569; }

/* ── Pale accent text (-100 / -200, meant for dark surfaces: code output, generated DDL, highlights) → readable shades on light ── */
[data-theme="light"] .text-emerald-100 { color: #065F46; }
[data-theme="light"] .text-emerald-200 { color: #047857; }
[data-theme="light"] .text-sky-100     { color: #075985; }
[data-theme="light"] .text-sky-200     { color: #0369A1; }
[data-theme="light"] .text-indigo-100  { color: #004578; }
[data-theme="light"] .text-indigo-200  { color: #005A9E; }
[data-theme="light"] .text-amber-100   { color: #78350F; }
[data-theme="light"] .text-amber-200   { color: #92400E; }
[data-theme="light"] .text-rose-100    { color: #9F1239; }
[data-theme="light"] .text-rose-200    { color: #BE123C; }
[data-theme="light"] .text-rose-300    { color: #BE123C; }
[data-theme="light"] .text-purple-100  { color: #581C87; }
[data-theme="light"] .text-purple-200  { color: #6B21A8; }
[data-theme="light"] .text-violet-200  { color: #5B21B6; }
[data-theme="light"] .text-violet-300  { color: #6D28D9; }
[data-theme="light"] .text-cyan-200    { color: #0E7490; }
[data-theme="light"] .text-cyan-300    { color: #0E7490; }
[data-theme="light"] .text-teal-200    { color: #0F766E; }
[data-theme="light"] .text-teal-300    { color: #0F766E; }
[data-theme="light"] .text-pink-200    { color: #9D174D; }
[data-theme="light"] .text-pink-300    { color: #BE185D; }
[data-theme="light"] .text-green-200   { color: #166534; }
[data-theme="light"] .text-yellow-200  { color: #854D0E; }
[data-theme="light"] .text-orange-200  { color: #9A3412; }
[data-theme="light"] .text-blue-200    { color: #1E40AF; }

/* ── White text stays white on solid colour fills (buttons, badges): the .text-white flip above is for text on the page surface ── */
[data-theme="light"] :is([class~="bg-indigo-500"], [class~="bg-indigo-600"], [class~="bg-indigo-700"], [class~="bg-emerald-500"], [class~="bg-emerald-600"],
  [class~="bg-emerald-700"], [class~="bg-rose-500"], [class~="bg-rose-600"], [class~="bg-rose-700"], [class~="bg-sky-600"], [class~="bg-sky-700"],
  [class~="bg-purple-600"], [class~="bg-purple-700"], [class~="bg-blue-600"], [class~="bg-blue-700"], [class~="bg-red-600"], [class~="bg-amber-600"],
  [class~="bg-teal-600"], [class~="bg-cyan-600"], [class~="bg-violet-600"]).text-white { color: #FFFFFF; }

/* ── Data Modeling's ER diagram (modules/data-modeling ErDiagram.js; its SVG attributes are the dark theme) ── */
[data-theme="light"] .fx-er .er-body { fill: #FFFFFF; stroke: #C8C6C4; }
[data-theme="light"] .fx-er .er-body.is-selected { stroke: #0078D4; }
[data-theme="light"] .fx-er .er-head { fill: #EFF6FC; }
[data-theme="light"] .fx-er .er-title { fill: #201F1E; }
[data-theme="light"] .fx-er .er-badge { fill: #201F1E; }
[data-theme="light"] .fx-er .er-muted { fill: #605E5C; }
[data-theme="light"] .fx-er .er-dot { fill: #A19F9D; }
[data-theme="light"] .fx-er .er-pk { fill: #986F0B; }
[data-theme="light"] .fx-er .er-fk { fill: #0078D4; }
[data-theme="light"] .fx-er .er-col { fill: #323130; }
[data-theme="light"] .fx-er .er-col.is-key { fill: #8A5A00; font-weight: 600; }
[data-theme="light"] .fx-er .er-line { stroke: #0078D4; }
[data-theme="light"] .fx-er .er-line-soft { stroke: #8A8886; }
[data-theme="light"] .fx-er .er-ring { fill: #FFFFFF; }
[data-theme="light"] .fx-er .er-label { fill: #201F1E; stroke: #FFFFFF; }

/* ── Body background and base text for light mode ── */
[data-theme="light"] body,
[data-theme="light"] {
  background-color: #FFFFFF;
  color: #334155;
}

/* ── Scrollbar for light mode ── */
[data-theme="light"] { scrollbar-color: #8A94A6 #EEF1F5; }
[data-theme="light"] ::-webkit-scrollbar-track {
  background: #EEF1F5;
}
[data-theme="light"] ::-webkit-scrollbar-thumb {
  background: #8A94A6;
  border-color: #EEF1F5;
}
[data-theme="light"] ::-webkit-scrollbar-thumb:hover {
  background: #0078D4;
}


/* ━━━ Sidebar (shell/layout.js): the look of sidebar_hierarchy_proposal.html (neutral panel, small heading labels, a coloured letter tile per group, a line icon per page) ━━━
   ID-scoped so it wins over the Tailwind utilities the browser build injects later. */
#modules-sidebar {
  --nav-bg: #11141a;
  --nav-border: #262c35;
  --nav-text: #e5e8ec;
  --nav-text-strong: #ffffff;
  --nav-muted: #9ba5b1;
  --nav-header: #8a939e;
  --nav-subtext: #c9d0d8;      /* a group's pages (2026-11-10: brighter than --nav-muted, readable at 12.5px) */
  --nav-subicon: #9fb0c2;
  --nav-hover: #1c222b;
  --nav-selected: #15253a;
  --nav-accent: #5aa7ff;
  background-color: var(--nav-bg);
  border-color: var(--nav-border);
  font-family: var(--font-sans);
}
[data-theme="light"] #modules-sidebar {
  --nav-bg: #eef1f4;
  --nav-border: #d9dee4;
  --nav-text: #1a1e23;
  --nav-text-strong: #1a1e23;
  --nav-muted: #5a6470;
  --nav-header: #4b5563;       /* was empty, so headings only got a colour by accident */
  --nav-subtext: #27313d;      /* a group's pages: dark slate (12:1 on the panel), was the faint --nav-muted */
  --nav-subicon: #475569;
  --nav-hover: #e2e7ec;
  --nav-selected: #e4effa;
  --nav-accent: #0f6cbd;
}
#modules-sidebar .fx-nav-section {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--nav-header);
}
#modules-sidebar .fx-nav-item {
  position: relative;
  font-size: 13px;
  font-weight: 400;
  color: var(--nav-text);
  background: transparent;
}
#modules-sidebar .fx-nav-item:hover { background: var(--nav-hover); color: var(--nav-text-strong); }
/* The headings: small labels, not clicks */
#modules-sidebar .fx-nav-section[data-heading] { font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--nav-header); padding: 14px 8px 4px; }
#modules-sidebar .fx-nav-subheading { font-size: 10px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--nav-header); padding: 6px 8px 1px; }
/* A group's tile: its letter on its own colour (shell/boot.js GROUPS) */
#modules-sidebar .fx-nav-mono { width: 20px; height: 20px; border-radius: 5px; color: #fff; font-size: 10.5px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
/* A page's icon (`icon` on its nav item) takes the row's text colour */
#modules-sidebar .fx-nav-subicon { stroke-width: 1.8; color: var(--nav-subicon); }
#modules-sidebar .fx-nav-subitem:hover .fx-nav-subicon,
#modules-sidebar .fx-nav-subitem.is-active .fx-nav-subicon { color: inherit; }
#modules-sidebar .fx-nav-item.is-active { background: var(--nav-selected); color: var(--nav-accent); font-weight: 600; }

#modules-sidebar .fx-nav-chevron { color: var(--nav-muted); }
#modules-sidebar .fx-nav-sub { margin: 2px 0 6px 18px; padding-left: 9px; animation: fx-nav-open 140ms ease-out; transform-origin: top; }
@keyframes fx-nav-open { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { #modules-sidebar .fx-nav-sub { animation: none; } }
#modules-sidebar .fx-nav-sub,
#modules-sidebar .fx-nav-divider { border-color: var(--nav-border); }
#modules-sidebar .fx-nav-subitem { font-size: 12.5px; font-weight: 500; color: var(--nav-subtext); background: transparent; }
#modules-sidebar .fx-nav-subitem { border-radius: 6px; padding: 3px 8px; }
#modules-sidebar .fx-nav-subitem:hover { background: var(--nav-hover); color: var(--nav-text-strong); }
#modules-sidebar .fx-nav-subitem.is-active { background: var(--nav-selected); color: var(--nav-accent); font-weight: 600; }
#modules-sidebar summary.fx-nav-section:hover { color: var(--nav-text-strong); }
/* The live filter at the top (shell/sidebarSearch.js): stays visible while the list scrolls */
#modules-sidebar .fx-nav-search-wrap { background: var(--nav-bg); }
#modules-sidebar .fx-nav-search {
  font-size: 12.5px;
  color: var(--nav-text-strong);
  background: var(--nav-hover);
  border: 1px solid var(--nav-border);
}
#modules-sidebar .fx-nav-search::placeholder { color: var(--nav-muted); }
#modules-sidebar .fx-nav-search:focus { border-color: var(--nav-accent); background: var(--nav-bg); }
#modules-sidebar .fx-nav-search-icon { color: var(--nav-muted); }
#modules-sidebar button.fx-nav-search-icon:hover { color: var(--nav-text-strong); background: var(--nav-selected); }
#modules-sidebar .fx-nav-hit { background: color-mix(in srgb, var(--nav-accent) 22%, transparent); color: inherit; border-radius: 2px; }
#modules-sidebar .fx-nav-empty { font-size: 12.5px; color: var(--nav-muted); }

/* ── Vue <Transition name="fx-fade"> — replaces framer-motion's fade/slide-in (opacity 0, y 5 → 1, 0) ── */
.fx-fade-enter-active,
.fx-fade-leave-active {
  transition: opacity 200ms ease, transform 200ms ease;
}
.fx-fade-enter-from {
  opacity: 0;
  transform: translateY(5px);
}
.fx-fade-leave-to {
  opacity: 0;
}

/* ── Vue <TransitionGroup name="fx-toast"> — stacked toasts slide in from the right (framer-motion x 100 → 0) ── */
.fx-toast-enter-active,
.fx-toast-leave-active {
  transition: opacity 300ms ease, transform 300ms ease;
}
.fx-toast-enter-from {
  opacity: 0;
  transform: translateX(100px) scale(0.95);
}
.fx-toast-leave-to {
  opacity: 0;
  transform: translateX(50px) scale(0.9);
}

/* ── Vue <Transition name="fx-pop"> — modal dialogs scale in (framer-motion scale 0.95 → 1) ── */
.fx-pop-enter-active,
.fx-pop-leave-active {
  transition: opacity 200ms ease, transform 200ms ease;
}
.fx-pop-enter-from,
.fx-pop-leave-to {
  opacity: 0;
  transform: scale(0.95);
}

/* ── Vue <Transition name="fx-rise"> — panels that slide up into place (framer-motion y 10 → 0) ── */
.fx-rise-enter-active {
  transition: opacity 300ms ease, transform 300ms ease;
}
.fx-rise-enter-from {
  opacity: 0;
  transform: translateY(10px);
}

/* ── Vue <Transition name="fx-drop"> — toast that drops in from above (framer-motion y -20 → 0) ── */
.fx-drop-enter-active,
.fx-drop-leave-active {
  transition: opacity 250ms ease, transform 250ms ease;
}
.fx-drop-enter-from,
.fx-drop-leave-to {
  opacity: 0;
  transform: translateY(-20px);
}

/* ── Dotted canvas background (2026-11-11; like n8n): every canvas - Pipeline studio, Data Modelling (ER + conceptual), Lineage graph, the AI
   dashboard preview. "local" makes the dots scroll with a scrollable diagram; a pannable / zoomable canvas moves them with --fx-dot-x / -y and
   scales them with --fx-dot-gap (PipelineCanvas.js). ── */
:root { --fx-canvas-dot: rgba(148, 163, 184, 0.42); }
[data-theme="light"] { --fx-canvas-dot: rgba(71, 85, 105, 0.48); }
.fx-canvas-dots {
  background-image: radial-gradient(circle, var(--fx-canvas-dot) 1.5px, transparent 1.7px);
  background-size: var(--fx-dot-gap, 20px) var(--fx-dot-gap, 20px);
  background-position: var(--fx-dot-x, 0px) var(--fx-dot-y, 0px);
  background-attachment: local;
}

/* ── Pipeline studio canvas (2026-11-11; PipelineCanvas.js): connections, the steps' connection dots, the numbered inputs of a merge ── */
.fx-canvas-edge { stroke: #475569; stroke-width: 2; transition: stroke 0.15s; }
.fx-canvas-edge.is-flowing { stroke: #00adef; animation: fx-edge-flow 0.8s linear infinite; }
@keyframes fx-edge-flow { to { stroke-dashoffset: -20; } }
.fx-canvas-edge.is-selected { stroke: #818cf8; stroke-width: 3; }
.fx-canvas-edge.is-drawing { stroke: #818cf8; }
.fx-canvas-port { width: 12px; height: 12px; background: #0f172a; border: 2px solid #64748b; }
.fx-canvas-port.is-out { border-color: #818cf8; }
.fx-canvas-port.is-out:hover { background: #818cf8; transform: scale(1.25); }
.fx-canvas-badge { fill: #1e1b4b; stroke: #818cf8; stroke-width: 1.5; }
.fx-canvas-badge-text { fill: #c7d2fe; font-size: 9px; font-weight: 700; font-family: ui-monospace, monospace; }
[data-theme="light"] .fx-canvas-edge { stroke: #94a3b8; }
[data-theme="light"] .fx-canvas-edge.is-selected, [data-theme="light"] .fx-canvas-edge.is-drawing { stroke: #4f46e5; }
[data-theme="light"] .fx-canvas-port { background: #ffffff; border-color: #94a3b8; }
[data-theme="light"] .fx-canvas-port.is-out { border-color: #4f46e5; }
[data-theme="light"] .fx-canvas-port.is-out:hover { background: #4f46e5; }
[data-theme="light"] .fx-canvas-badge { fill: #eef2ff; stroke: #4f46e5; }
[data-theme="light"] .fx-canvas-badge-text { fill: #3730a3; }

/* ── Writing assist's suggestion chip (2026-11-11; shell/writingAssist.js) ── */
.fx-wa-chip { position: fixed; z-index: 9999; display: none; align-items: center; gap: 6px; padding: 3px 8px; border-radius: 6px; font-size: 11px;
  background: #1e1b4b; color: #e0e7ff; border: 1px solid #4f46e5; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35); cursor: pointer; max-width: 320px; }
.fx-wa-chip kbd { font: 600 9px ui-monospace, monospace; padding: 1px 4px; border-radius: 3px; background: #312e81; color: #c7d2fe; border: 1px solid #4338ca; }
.fx-wa-chip .fx-wa-word { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fx-wa-chip .fx-wa-typed { opacity: 0.55; }
[data-theme="light"] .fx-wa-chip { background: #eef2ff; color: #312e81; border-color: #818cf8; box-shadow: 0 4px 14px rgba(30, 41, 59, 0.15); }
[data-theme="light"] .fx-wa-chip kbd { background: #e0e7ff; color: #3730a3; border-color: #a5b4fc; }