/* KTUI semantic theme tokens — override Metronic Tailwind defaults.
   This file loads after styles.tailwind2.css. Do not edit @theme / @layer theme. */
:root {
  --background: var(--color-zinc-100);
  --foreground: var(--color-zinc-950);
  --card: var(--color-zinc-50);
  --card-foreground: var(--color-zinc-950);
  --popover: var(--color-zinc-50);
  --popover-foreground: var(--color-zinc-950);
  --primary: var(--color-blue-500);
  --primary-foreground: var(--color-white);
  --secondary: var(--color-zinc-100);
  --secondary-foreground: var(--color-zinc-900);
  --muted: var(--color-zinc-100);
  --muted-foreground: var(--color-zinc-500);
  --accent: var(--color-zinc-100);
  --accent-foreground: var(--color-zinc-900);
  --destructive: var(--color-red-600);
  --destructive-foreground: var(--color-white);
  --mono: var(--color-zinc-950);
  --mono-foreground: var(--color-white);
  --border: oklch(94% 0.004 286.32);
  --input: var(--color-zinc-200);
  --ring: var(--color-zinc-400);
  --radius: 0.5rem;
  --bs-heading-color: var(--foreground) !important;
  --bs-body-color: var(--foreground);
  --bs-gray-900: var(--foreground);
  --bs-card-title-color: var(--card-foreground);
}
html.dark {
  --background: #111113;
  --foreground: var(--color-zinc-50);
  --card: #1c1c1f;
  --card-foreground: var(--color-zinc-50);
  --popover: #1c1c1f;
  --popover-foreground: var(--color-zinc-50);
  --primary: var(--color-blue-600);
  --primary-foreground: var(--color-white);
  --secondary: #27272a;
  --secondary-foreground: var(--color-zinc-50);
  --muted: #222226;
  --muted-foreground: var(--color-zinc-500);
  --accent: #222226;
  --accent-foreground: var(--color-zinc-50);
  --destructive: var(--color-red-600);
  --destructive-foreground: var(--color-white);
  --mono: var(--color-zinc-300);
  --mono-foreground: var(--color-black);
  --border: #2a2a2e;
  --input: #2a2a2e;
  --ring: var(--color-zinc-600);
  /* Metronic 8 Bootstrap dark uses navy (#15171C, #252F4A, #162241) — map to KTUI */
  --bs-body-bg: var(--background);
  --bs-body-color: var(--foreground);
  --bs-heading-color: var(--foreground) !important;
  --bs-gray-900: var(--foreground);
  --bs-card-title-color: var(--card-foreground);
  --bs-emphasis-color: var(--foreground);
  --bs-card-bg: var(--card);
  --bs-secondary-bg: var(--secondary);
  --bs-tertiary-bg: var(--muted);
  --bs-app-bg-color: var(--background);
  --bs-border-color: var(--border);
  --bs-table-bg: var(--card);
}

.bg-card {
  background-color: var(--card);
}

/* Ensure theme background on html and body (override Bootstrap/reset) */
html.dark,
html.light {
  background-color: var(--background) !important;
}
body.bg-background {
  background-color: var(--background) !important;
  min-height: 100vh;
}

/* Same card surface as home: beat Bootstrap .card and @layer utilities */
html.dark .kt-card,
html.dark .card,
html.dark .kt-modal-content {
  --bs-card-bg: var(--card);
  --bs-body-bg: var(--card);
  --bs-table-bg: var(--card);
  --bs-heading-color: var(--card-foreground);
  --bs-card-title-color: var(--card-foreground);
  --bs-gray-900: var(--card-foreground);
  --bs-body-color: var(--card-foreground);
  background-color: var(--card) !important;
  color: var(--card-foreground);
}

html.dark h1,
html.dark h2,
html.dark h3,
html.dark h4,
html.dark h5,
html.dark h6,
html.dark .h1,
html.dark .h2,
html.dark .h3,
html.dark .h4,
html.dark .h5,
html.dark .h6,
html.dark .kt-card-title {
  color: var(--foreground) !important;
}

html.dark .kt-card-header,
html.dark .kt-card-content,
html.dark .kt-card-footer,
html.dark .kt-modal-header,
html.dark .kt-modal-body,
html.dark .kt-modal-footer {
  background-color: transparent;
  color: inherit;
}

html.dark .kt-card thead th,
html.dark .kt-table thead th,
html.dark table.dataTable thead th,
html.dark table.dataTable tbody tr > .dtfc-fixed-left,
html.dark table.dataTable tbody tr > .dtfc-fixed-right,
html.dark table.dataTable thead tr > .dtfc-fixed-left,
html.dark table.dataTable thead tr > .dtfc-fixed-right {
  background-color: var(--card) !important;
}

html.dark .text-foreground {
  color: var(--foreground);
}
html.dark .text-mono {
  color: var(--mono);
}
html.dark .text-secondary-foreground {
  color: var(--secondary-foreground);
}