/**
 * ============================================================================
 * FORM ENGINE — Theme Variables (Light + Dark Mode)
 * ============================================================================
 * Loaded FIRST so other stylesheets can reference var(--...) tokens.
 * Toggle via: document.documentElement.dataset.theme = 'dark' | 'light'
 * ============================================================================
 */

:root {
  /* ---- Backgrounds ---- */
  --bg-primary:    #ffffff;  /* cards, modals, inputs */
  --bg-secondary:  #f8fafc;  /* page/content area */
  --bg-tertiary:   #f1f5f9;  /* hover rows, table stripes, code blocks */
  --bg-quaternary: #fafbfc;  /* very subtle panels */
  --bg-overlay:    rgba(0,0,0,0.5);

  /* ---- Text ---- */
  --text-primary:         #0f172a;  /* headings, strong text */
  --text-body:            #1e293b;  /* body copy */
  --text-secondary:       #334155;  /* table cells, labels */
  --text-secondary-soft:  #475569;  /* secondary body, icons in empty state */
  --text-muted:           #64748b;  /* hints, breadcrumbs, helper text */
  --text-faint:           #94a3b8;  /* disabled, tags, placeholder */
  --text-faintest:        #cbd5e1;  /* subtle separators, placeholder icons */

  /* ---- Borders ---- */
  --border:        #e2e8f0;
  --border-strong: #cbd5e1;
  --border-soft:   #f1f5f9;
  --border-col:    #d4d4d8;

  /* ---- Brand / accent (NOT themed — same in both modes) ---- */
  --color-primary:       #7c3aed;
  --color-primary-light: #8b5cf6;
  --color-primary-dark:  #6d28d9;
  --color-primary-bg:    #f5f3ff;
  --color-primary-bg-2:  #ede9fe;
  --color-primary-bg-3:  #ddd6fe;

  /* ---- Status colors ---- */
  --color-success:    #22c55e;
  --color-success-bg: #f0fdf4;
  --color-warning:    #f59e0b;
  --color-warning-bg: #fffbeb;
  --color-error:      #ef4444;
  --color-error-bg:   #fef2f2;
  --color-info:       #3b82f6;
  --color-info-bg:    #eff6ff;

  /* ---- Shell (sidebar) — same in both modes (already dark) ---- */
  --sidebar-bg: #1e1b4b;
  --sidebar-text: #a5b4fc;
  --sidebar-active-text: #ffffff;
  --sidebar-active-bg: #312e81;
  --sidebar-width: 256px;
  --sidebar-collapsed-width: 64px;

  /* ---- Structural ---- */
  --header-bg: var(--bg-primary);
  --header-height: 56px;
  --content-bg: var(--bg-secondary);
  --card-bg: var(--bg-primary);
  --border-color: var(--border);
  --footer-height: 48px;

  /* ---- Shadows ---- */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.08);
  --shadow-lg: 0 20px 60px rgba(0,0,0,0.3);
}

:root[data-theme="dark"] {
  /* ---- Backgrounds ---- */
  --bg-primary:    #1e293b;  /* cards, modals */
  --bg-secondary:  #0f172a;  /* page */
  --bg-tertiary:   #334155;  /* hover rows */
  --bg-quaternary: #1e293b;
  --bg-overlay:    rgba(0,0,0,0.7);

  /* ---- Text ---- */
  --text-primary:         #f1f5f9;
  --text-body:            #e2e8f0;
  --text-secondary:       #cbd5e1;
  --text-secondary-soft:  #94a3b8;
  --text-muted:           #94a3b8;
  --text-faint:           #64748b;
  --text-faintest:        #475569;

  /* ---- Borders ---- */
  --border:        #334155;
  --border-strong: #475569;
  --border-soft:   #1e293b;
  --border-col:    #475569;

  /* ---- Brand tints tuned for dark ---- */
  --color-primary-bg:   #2e1065;
  --color-primary-bg-2: #3b0764;
  --color-primary-bg-3: #4c1d95;

  /* ---- Status tints tuned for dark (less washed out) ---- */
  --color-success-bg: #052e1b;
  --color-warning-bg: #3a2710;
  --color-error-bg:   #3b1111;
  --color-info-bg:    #0b1f3d;

  /* ---- Shadows deeper ---- */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.3);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.4);
  --shadow-lg: 0 20px 60px rgba(0,0,0,0.6);
}

/* ===========================================
   SMOOTH THEME TRANSITION
   =========================================== */
body,
.app-header,
.app-footer,
.content-body,
.fe-card,
.modal-dialog,
.fe-table,
.fe-table th,
.fe-table td,
input, select, textarea, button {
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

/* ===========================================
   DARK MODE — GENERIC BACKSTOPS
   Forms, inputs, selects not otherwise themed.
   =========================================== */
:root[data-theme="dark"] body {
  color: var(--text-body);
  background: var(--bg-secondary);
}

:root[data-theme="dark"] input[type="text"],
:root[data-theme="dark"] input[type="search"],
:root[data-theme="dark"] input[type="email"],
:root[data-theme="dark"] input[type="password"],
:root[data-theme="dark"] input[type="number"],
:root[data-theme="dark"] input[type="url"],
:root[data-theme="dark"] input[type="tel"],
:root[data-theme="dark"] input[type="date"],
:root[data-theme="dark"] textarea,
:root[data-theme="dark"] select {
  background: var(--bg-primary);
  color: var(--text-body);
  border-color: var(--border);
}

:root[data-theme="dark"] input::placeholder,
:root[data-theme="dark"] textarea::placeholder {
  color: var(--text-muted);
}

/* Toast tints in dark mode stay vivid — already OK */

/* Theme toggle button */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  background: none;
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 150ms;
}
.theme-toggle:hover {
  background: var(--bg-tertiary);
  color: var(--color-primary);
  border-color: var(--color-primary-light);
}
.theme-toggle .theme-icon-dark  { display: none; }
:root[data-theme="dark"] .theme-toggle .theme-icon-light { display: none; }
:root[data-theme="dark"] .theme-toggle .theme-icon-dark  { display: inline-flex; }