/* 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). */

/* Custom super narrow scrollbar for maximizing space density */
::-webkit-scrollbar {
  width: 4px;
  height: 4px;
}
::-webkit-scrollbar-track {
  background: #0B0E14;
}
::-webkit-scrollbar-thumb {
  background: #30363D;
  border-radius: 2px;
}
::-webkit-scrollbar-thumb:hover {
  background: #0078D4;
}

/* 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;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   FABRICX 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"] ::-webkit-scrollbar-track {
  background: #F8FAFC;
}
[data-theme="light"] ::-webkit-scrollbar-thumb {
  background: #CBD5E1;
}
[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-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: ;
  --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; 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; opacity: 0.85; }
#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; }
#modules-sidebar .fx-nav-sub,
#modules-sidebar .fx-nav-divider { border-color: var(--nav-border); }
#modules-sidebar .fx-nav-subitem { font-size: 12.5px; color: var(--nav-muted); 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);
}