/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/*= require hotwire_combobox */

/* Button styles */
.btn {
  @apply inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-offset-2 transition;
}

.btn-primary {
  @apply bg-primary-600 hover:bg-primary-700 text-white focus:ring-primary-500;
}

.btn-white {
  @apply bg-white hover:bg-slate-50 text-slate-700 border-slate-300 focus:ring-primary-500;
}

.btn-white.dark {
  @apply dark:bg-slate-800 dark:hover:bg-slate-700 dark:text-slate-300 dark:border-slate-600;
}

/* Form styles */
.form-input {
  @apply block w-full px-3 py-2 border border-slate-300 rounded-md shadow-sm placeholder-slate-400 focus:outline-none focus:ring-primary-500 focus:border-primary-500 sm:text-sm;
}

.form-input.dark {
  @apply dark:border-slate-600 dark:bg-slate-700 dark:text-slate-100 dark:placeholder-slate-400;
}

.form-select {
  @apply block w-full px-3 py-2 border border-slate-300 rounded-md shadow-sm focus:outline-none focus:ring-primary-500 focus:border-primary-500 sm:text-sm;
}

.form-select.dark {
  @apply dark:border-slate-600 dark:bg-slate-700 dark:text-slate-100;
}

/* Navigation styles */
.nav-link {
  @apply flex items-center gap-2 px-3 py-2 rounded-lg text-sm font-medium text-slate-700 hover:text-slate-900 hover:bg-slate-50 transition;
}

.nav-link.dark {
  @apply dark:text-slate-300 dark:hover:text-slate-100 dark:hover:bg-slate-700;
}

.nav-link.active {
  @apply bg-primary-100 text-primary-700;
}

.nav-link.active.dark {
  @apply dark:bg-primary-900/30 dark:text-primary-400;
}

/* Card styles */
.card {
  @apply bg-white rounded-lg shadow border border-slate-200;
}

.card.dark {
  @apply dark:bg-slate-800 dark:border-slate-700;
}

.card-header {
  @apply px-6 py-4 border-b border-slate-200;
}

.card-header.dark {
  @apply dark:border-slate-700;
}

.card-body {
  @apply px-6 py-4;
}

/* Primary color definitions */
:root {
  --color-primary-50: #eff6ff;
  --color-primary-100: #dbeafe;
  --color-primary-200: #bfdbfe;
  --color-primary-300: #93c5fd;
  --color-primary-400: #60a5fa;
  --color-primary-500: #3b82f6;
  --color-primary-600: #2563eb;
  --color-primary-700: #1d4ed8;
  --color-primary-800: #1e40af;
  --color-primary-900: #1e3a8a;
}

/* Tailwind CSS custom colors */
.text-primary-50 { color: var(--color-primary-50); }
.text-primary-100 { color: var(--color-primary-100); }
.text-primary-200 { color: var(--color-primary-200); }
.text-primary-300 { color: var(--color-primary-300); }
.text-primary-400 { color: var(--color-primary-400); }
.text-primary-500 { color: var(--color-primary-500); }
.text-primary-600 { color: var(--color-primary-600); }
.text-primary-700 { color: var(--color-primary-700); }
.text-primary-800 { color: var(--color-primary-800); }
.text-primary-900 { color: var(--color-primary-900); }

.bg-primary-50 { background-color: var(--color-primary-50); }
.bg-primary-100 { background-color: var(--color-primary-100); }
.bg-primary-200 { background-color: var(--color-primary-200); }
.bg-primary-300 { background-color: var(--color-primary-300); }
.bg-primary-400 { background-color: var(--color-primary-400); }
.bg-primary-500 { background-color: var(--color-primary-500); }
.bg-primary-600 { background-color: var(--color-primary-600); }
.bg-primary-700 { background-color: var(--color-primary-700); }
.bg-primary-800 { background-color: var(--color-primary-800); }
.bg-primary-900 { background-color: var(--color-primary-900); }

/* Link styles for better visibility - only target content areas */
main a:not(.btn):not([class*="btn"]),
.card a:not(.btn):not([class*="btn"]),
.bg-white a:not(.btn):not([class*="btn"]) {
  color: var(--color-primary-600) !important;
  transition: color 0.15s ease-in-out, text-decoration 0.15s ease-in-out;
}

main a:not(.btn):not([class*="btn"]):hover,
.card a:not(.btn):not([class*="btn"]):hover,
.bg-white a:not(.btn):not([class*="btn"]):hover {
  color: var(--color-primary-700) !important;
  text-decoration: underline;
}

main a:not(.btn):not([class*="btn"]):visited,
.card a:not(.btn):not([class*="btn"]):visited,
.bg-white a:not(.btn):not([class*="btn"]):visited {
  color: var(--color-primary-700) !important;
}

/* Dark mode link styles */
@media (prefers-color-scheme: dark) {
  main a:not(.btn):not([class*="btn"]),
  .card a:not(.btn):not([class*="btn"]),
  .dark\:bg-slate-800 a:not(.btn):not([class*="btn"]),
  .bg-slate-800 a:not(.btn):not([class*="btn"]) {
    color: var(--color-primary-400) !important;
  }

  main a:not(.btn):not([class*="btn"]):hover,
  .card a:not(.btn):not([class*="btn"]):hover,
  .dark\:bg-slate-800 a:not(.btn):not([class*="btn"]):hover,
  .bg-slate-800 a:not(.btn):not([class*="btn"]):hover {
    color: var(--color-primary-300) !important;
    text-decoration: underline;
  }

  main a:not(.btn):not([class*="btn"]):visited,
  .card a:not(.btn):not([class*="btn"]):visited,
  .dark\:bg-slate-800 a:not(.btn):not([class*="btn"]):visited,
  .bg-slate-800 a:not(.btn):not([class*="btn"]):visited {
    color: var(--color-primary-500) !important;
  }
}

.border-primary-500 { border-color: var(--color-primary-500); }
.ring-primary-500 { --tw-ring-color: var(--color-primary-500); }

.hover\:bg-primary-700:hover { background-color: var(--color-primary-700); }
.focus\:ring-primary-500:focus { --tw-ring-color: var(--color-primary-500); }
.focus\:border-primary-500:focus { border-color: var(--color-primary-500); }

/* Dark mode adjustments */
@media (prefers-color-scheme: dark) {
  .dark\:bg-primary-900\/30 { background-color: rgb(30 58 138 / 0.3); }
  .dark\:text-primary-400 { color: var(--color-primary-400); }
}

/* Heroicon base styles */
.heroicon {
  @apply inline-block;
}

/* Responsive utilities */
@media (max-width: 640px) {
  .nav-link {
    @apply px-2 py-1 text-xs;
  }
}

/* JSON pretty formatting styles */
.json-display {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 0.875rem;
  color: #0f172a;
  white-space: pre-wrap;
  word-break: break-word;
  line-height: 1.6;
}

.dark .json-display {
  color: #f1f5f9;
}