/*
 * 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% 0.025 250); /* Darkest - body background */
  --color-gray-100: oklch(16% 0.022 250); /* Very dark - card backgrounds */
  --color-gray-200: oklch(20% 0.02 250); /* Dark - table headers/borders */
  --color-gray-300: oklch(45% 0.015 250); /* Medium - muted text */
  --color-gray-400: oklch(55% 0.012 250); /* Medium-light - secondary text */
  --color-gray-500: oklch(65% 0.01 250); /* Light - body text */
  --color-gray-600: oklch(75% 0.008 250); /* Very light - emphasized text */
  --color-gray-700: oklch(85% 0.006 250); /* Almost white - headings */
  --color-gray-800: oklch(
    20% 0.02 250
  ); /* Dark - table headers (same as 200) */
  --color-gray-900: oklch(12% 0.025 250); /* Darkest - navbar */

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

  /* Gradient background colors - very dark */
  --color-blue-50: oklch(12% 0.028 250);
  --color-indigo-50: oklch(11% 0.025 265);
  --color-purple-50: oklch(12% 0.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% 0.025 250);
  --color-ktec-light: oklch(25% 0.028 250);

  /* Blue scale - bright for visibility */
  --color-blue-400: oklch(75% 0.15 250);
  --color-blue-500: oklch(70% 0.17 250);
  --color-blue-600: oklch(68% 0.18 250);
  --color-blue-700: oklch(65% 0.16 250);
  --color-blue-800: oklch(62% 0.14 250);
  --color-blue-900: oklch(58% 0.13 250);

  /* Green scale */
  --color-green-400: oklch(72% 0.15 150);
  --color-green-500: oklch(68% 0.17 150);
  --color-green-600: oklch(63% 0.16 150);
  --color-green-700: oklch(58% 0.14 150);
  --color-green-800: oklch(53% 0.12 150);

  /* Yellow/amber */
  --color-yellow-400: oklch(78% 0.14 95);
  --color-yellow-500: oklch(73% 0.15 90);
  --color-amber-600: oklch(68% 0.16 70);

  /* Red scale */
  --color-red-400: oklch(68% 0.19 25);
  --color-red-500: oklch(63% 0.2 25);
  --color-red-600: oklch(58% 0.19 25);
  --color-red-700: oklch(53% 0.17 25);
  --color-red-800: oklch(48% 0.15 25);

  /* Purple scale */
  --color-purple-600: oklch(58% 0.21 300);
  --color-purple-800: oklch(48% 0.17 300);
}

/* Very dark gradient background for dark mode */
html.dark body {
  background: linear-gradient(
    135deg,
    oklch(12% 0.028 250) 0%,
    oklch(11% 0.025 265) 50%,
    oklch(12% 0.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% 0.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% 0.022 250) !important;
}

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

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

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

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

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

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

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

html.dark .text-gray-900 {
  color: oklch(95% 0.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% 0.02 250) !important;
  color: oklch(92% 0.006 250) !important;
  border-color: oklch(35% 0.015 250) !important;
}

/* Placeholder text in dark mode */
html.dark input::placeholder,
html.dark textarea::placeholder {
  color: oklch(55% 0.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% 0.022 250) !important;
  border-color: oklch(60% 0.15 250) !important;
  outline: none;
  box-shadow: 0 0 0 3px oklch(30% 0.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% 0.018 250) !important;
  color: oklch(45% 0.01 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 */
}

/* 2026-01-03: Matthias Kummer (created with Claude Code) - Highlight flash animation */
@keyframes highlight-flash {
  0% {
    background-color: rgba(59, 130, 246, 0.3);
  }
  100% {
    background-color: transparent;
  }
}

.highlight-flash {
  animation: highlight-flash 2s ease-out;
}

html.dark .highlight-flash {
  animation: highlight-flash-dark 2s ease-out;
}

@keyframes highlight-flash-dark {
  0% {
    background-color: rgba(59, 130, 246, 0.4);
  }
  100% {
    background-color: transparent;
  }
}