/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * 2025-11-03: Matthias Kummer (updated with Claude Code)
 * 2025-11-05: Matthias Kummer (updated with Claude Code)
 * NOTE: Tailwind configuration is in app/assets/tailwind/application.css
 * The actual Tailwind CSS is built to app/assets/builds/tailwind.css
 */

/* 2025-11-05: Matthias Kummer (added with Claude Code) - Dark mode color overrides */
html.dark,
html.dark * {
  /* Dark mode - darker backgrounds, lighter text */
  --color-gray-50: oklch(12% .025 250);    /* Darkest - body background */
  --color-gray-100: oklch(16% .022 250);   /* Very dark - card backgrounds */
  --color-gray-200: oklch(20% .020 250);   /* Dark - table headers/borders */
  --color-gray-300: oklch(45% .015 250);   /* Medium - muted text */
  --color-gray-400: oklch(55% .012 250);   /* Medium-light - secondary text */
  --color-gray-500: oklch(65% .010 250);   /* Light - body text */
  --color-gray-600: oklch(75% .008 250);   /* Very light - emphasized text */
  --color-gray-700: oklch(85% .006 250);   /* Almost white - headings */
  --color-gray-800: oklch(20% .020 250);   /* Dark - table headers (same as 200) */
  --color-gray-900: oklch(12% .025 250);   /* Darkest - navbar */

  /* White cards should be dark in dark mode */
  --color-white: oklch(18% .022 250);

  /* Gradient background colors - very dark */
  --color-blue-50: oklch(12% .028 250);
  --color-indigo-50: oklch(11% .025 265);
  --color-purple-50: oklch(12% .023 285);

  /* K-Tec brand colors - vibrant for dark backgrounds */
  --color-ktec-cyan: #5DD4F4;
  --color-ktec-blue: #3EA9DD;
  --color-ktec-deep: #2B7CB8;
  --color-ktec-lighter: oklch(20% .025 250);
  --color-ktec-light: oklch(25% .028 250);

  /* Blue scale - bright for visibility */
  --color-blue-400: oklch(75% .15 250);
  --color-blue-500: oklch(70% .17 250);
  --color-blue-600: oklch(68% .18 250);
  --color-blue-700: oklch(65% .16 250);
  --color-blue-800: oklch(62% .14 250);
  --color-blue-900: oklch(58% .13 250);

  /* Green scale */
  --color-green-400: oklch(72% .15 150);
  --color-green-500: oklch(68% .17 150);
  --color-green-600: oklch(63% .16 150);
  --color-green-700: oklch(58% .14 150);
  --color-green-800: oklch(53% .12 150);

  /* Yellow/amber */
  --color-yellow-400: oklch(78% .14 95);
  --color-yellow-500: oklch(73% .15 90);
  --color-amber-600: oklch(68% .16 70);

  /* Red scale */
  --color-red-400: oklch(68% .19 25);
  --color-red-500: oklch(63% .20 25);
  --color-red-600: oklch(58% .19 25);
  --color-red-700: oklch(53% .17 25);
  --color-red-800: oklch(48% .15 25);

  /* Purple scale */
  --color-purple-600: oklch(58% .21 300);
  --color-purple-800: oklch(48% .17 300);
}

/* Very dark gradient background for dark mode */
html.dark body {
  background: linear-gradient(135deg,
    oklch(12% .028 250) 0%,
    oklch(11% .025 265) 50%,
    oklch(12% .023 285) 100%) !important;
}

/* Enhanced light mode - more colorful surfaces and accents */
:not(.dark) body {
  /* Richer gradient background for light mode */
  background: rgb(212, 222, 235);
}

/* Add subtle color to white cards in light mode only */
:not(.dark) .bg-white {
  background-color: oklch(99% .003 250) !important;
  box-shadow: 0 1px 3px 0 rgba(59, 130, 246, 0.05), 0 1px 2px -1px rgba(59, 130, 246, 0.05);
}

/* Force dark backgrounds in dark mode */
html.dark .bg-white {
  background-color: oklch(18% .022 250) !important;
}

html.dark .bg-gray-800 {
  background-color: oklch(20% .020 250) !important;
}

html.dark .bg-gray-900 {
  background-color: oklch(12% .025 250) !important;
}

/* Force lighter text colors in dark mode for readability */
html.dark .text-gray-400 {
  color: oklch(70% .010 250) !important;
}

html.dark .text-gray-500 {
  color: oklch(75% .008 250) !important;
}

html.dark .text-gray-600 {
  color: oklch(80% .006 250) !important;
}

html.dark .text-gray-700 {
  color: oklch(85% .005 250) !important;
}

html.dark .text-gray-800 {
  color: oklch(90% .004 250) !important;
}

html.dark .text-gray-900 {
  color: oklch(95% .003 250) !important;
}

/* 2025-11-06: Matthias Kummer (added with Claude Code) - Dark mode form inputs */
/* Use dark gray backgrounds for inputs instead of white */
html.dark input[type="text"],
html.dark input[type="email"],
html.dark input[type="password"],
html.dark input[type="number"],
html.dark input[type="date"],
html.dark input[type="time"],
html.dark input[type="datetime-local"],
html.dark input[type="search"],
html.dark input[type="tel"],
html.dark input[type="url"],
html.dark textarea,
html.dark select {
  background-color: oklch(22% .020 250) !important;
  color: oklch(92% .006 250) !important;
  border-color: oklch(35% .015 250) !important;
}

/* Placeholder text in dark mode */
html.dark input::placeholder,
html.dark textarea::placeholder {
  color: oklch(55% .012 250) !important;
  opacity: 1;
}

/* Focus state for inputs in dark mode */
html.dark input:focus,
html.dark textarea:focus,
html.dark select:focus {
  background-color: oklch(24% .022 250) !important;
  border-color: oklch(60% .15 250) !important;
  outline: none;
  box-shadow: 0 0 0 3px oklch(30% .12 250 / 0.3) !important;
}

/* Disabled inputs in dark mode */
html.dark input:disabled,
html.dark textarea:disabled,
html.dark select:disabled {
  background-color: oklch(18% .018 250) !important;
  color: oklch(45% .010 250) !important;
  opacity: 0.6;
}

/* 2025-11-06: Matthias Kummer (updated with Claude Code) - Landing page branding */
/* Dark blue background with artistic logo blur effect */
.landing-background {
  background: linear-gradient(135deg, #1a2a3a 0%, #0f1923 50%, #1a2540 100%);
  position: relative;
  overflow: hidden;
}

/* Dark mode landing background - even darker */
html.dark .landing-background {
  background: linear-gradient(135deg, #0a1520 0%, #050a12 50%, #0a1228 100%) !important;
}

/* Brand colors for text - matching K-Tec logo blues */
.landing-header-text {
  color: #5DD4F4 !important; /* K-Tec cyan */
  text-shadow: 0 2px 10px rgba(93, 212, 244, 0.3);
}

.landing-subheader-text {
  color: #3EA9DD !important; /* K-Tec blue */
}