/* 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: #1F6FEB;
}

/* 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: #1F6FEB !important;
  box-shadow: 0 0 0 1px rgba(31, 111, 235, 0.2) !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: #4F46E5; }
[data-theme="light"] .text-indigo-300  { color: #6366F1; }
[data-theme="light"] .text-pink-400    { color: #DB2777; }
[data-theme="light"] .text-rose-400    { color: #E11D48; }
[data-theme="light"] .text-slate-400   { color: #475569; }

/* ── 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: #1F6FEB;
}


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