/**
 * Admin Interface Styles for Finder-v2 Widget Configuration
 * Ensures proper styling for template gallery and accordion components
 */

/* ============================================================================
   Template Gallery Styles
   ============================================================================ */

#template-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 1rem;
  margin-top: 1rem;
}

/* Template cards are styled with Tailwind classes in JavaScript */
/* Backup styles in case JavaScript styling fails */
.template-card {
  position: relative;
  background-color: white;
  border: 1px solid #e5e7eb;
  border-radius: 0.5rem;
  padding: 1rem;
  cursor: pointer;
  transition: all 200ms;
}

.template-card:hover {
  border-color: #a5b4fc;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

/* ============================================================================
   Accordion Styles Override
   ============================================================================ */

/* Ensure accordion sections have proper background */
details.group {
  background-color: transparent !important;
}

/* Consistent accordion header styling matching Template Gallery */
details.group > summary {
  background-color: #f9fafb !important;
  color: #111827 !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 0.5rem !important;
  padding: 0.75rem 1rem !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  text-align: left !important;
  cursor: pointer !important;
  transition: background-color 0.15s ease !important;
}

details.group > summary:hover {
  background-color: #f3f4f6 !important;
}

/* Override dark mode for summary headers */
details.group > summary.dark\:bg-gray-800\/50,
details.group > summary.dark\:bg-gray-700\/50,
details.group > summary.dark\:text-white {
  background-color: #f9fafb !important;
  color: #111827 !important;
  border-color: #e5e7eb !important;
}

/* Ensure icons and text in headers have consistent colors */
details.group > summary svg {
  color: #6b7280 !important;
  width: 1rem !important;
  height: 1rem !important;
}

details.group > summary .text-gray-500,
details.group > summary .dark\:text-gray-400 {
  color: #6b7280 !important;
}

/* Content area styling - matching Template Gallery */
details.group > div {
  background-color: white !important;
  margin-top: 0.75rem !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 0.5rem !important;
  padding: 1rem !important;
  box-shadow: none !important;
}

/* Override all dark mode classes for accordion content */
details.group > div.dark\:bg-gray-900,
details.group > div.dark\:bg-gray-800,
details.group > div.dark\:bg-gray-700,
details.group > div.dark\:bg-gray-800\/50 {
  background-color: white !important;
  border-color: #e5e7eb !important;
}

/* Consistent paragraph styling in accordion content */
details.group > div > p:first-child {
  font-size: 0.75rem !important;
  color: #6b7280 !important;
  margin-bottom: 0.75rem !important;
}

/* Ensure text remains readable with white background */
details.group > div .dark\:text-gray-100,
details.group > div .dark\:text-gray-200,
details.group > div .dark\:text-gray-300,
details.group > div .dark\:text-gray-400,
details.group > div .dark\:text-white {
  color: inherit !important;
}

/* Keep proper text colors for labels and descriptions */
details.group > div label {
  color: #111827 !important;
}

details.group > div .text-gray-500,
details.group > div .text-gray-600,
details.group > div .dark\:text-gray-300 {
  color: #6b7280 !important;
}

details.group > div .text-gray-900 {
  color: #111827 !important;
}

/* Remove shadow from accordion content */
details.group > div.shadow-sm {
  box-shadow: none !important;
}

/* Fix input fields in accordion to have proper backgrounds */
details.group > div input[type="text"],
details.group > div input[type="color"],
details.group > div select,
details.group > div textarea {
  background-color: white !important;
  color: #111827 !important;
  border-color: #d1d5db !important;
}

details.group > div input[type="text"]:focus,
details.group > div select:focus,
details.group > div textarea:focus {
  background-color: white !important;
  border-color: #6366f1 !important;
}

/* Fix dark mode input backgrounds */
details.group > div .dark\:bg-gray-800 {
  background-color: white !important;
}

/* Fix blue info boxes in accordion */
details.group > div .dark\:bg-blue-950\/20 {
  background-color: #eff6ff !important;
}

details.group > div .dark\:border-blue-800\/30 {
  border-color: #bfdbfe !important;
}

details.group > div .dark\:text-blue-200,
details.group > div .dark\:text-blue-300 {
  color: #1e40af !important;
}

/* ============================================================================
   Translation Validation Messages
   ============================================================================ */

#translation-validation-message {
  display: block;
  margin-top: 0.5rem;
  font-size: 0.875rem;
}

#translation-validation-message.text-success {
  color: #10b981;
}

#translation-validation-message.text-danger {
  color: #ef4444;
}

#translation-validation-message.text-warning {
  color: #f59e0b;
}

#translation-validation-message.text-info {
  color: #3b82f6;
}

#translation-validation-message.text-gray-500 {
  color: #6b7280;
}

/* ============================================================================
   Preview Status Messages
   ============================================================================ */

#preview-status,
#preview-error {
  margin-top: 0.5rem;
  padding: 0.75rem;
  border-radius: 0.375rem;
}

#preview-error {
  background-color: #fef2f2;
  border: 1px solid #fecaca;
  color: #991b1b;
}

#preview-status {
  background-color: #f0fdf4;
  border: 1px solid #bbf7d0;
}

/* ============================================================================
   JSON Textarea Formatting
   ============================================================================ */

textarea[name="interface-translation"] {
  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', monospace;
  font-size: 0.875rem;
  line-height: 1.5;
  tab-size: 2;
}

/* ============================================================================
   Utility Classes
   ============================================================================ */

/* .hidden {
  display: none !important;
} */

/* Ensure proper spacing for form sections */
.form-section {
  margin-bottom: 2rem;
}

/* Help text styling */
.help-text {
  font-size: 0.875rem;
  color: #6b7280;
  margin-top: 0.25rem;
}

/* Button consistency */
button[type="button"]:not(.use-template-btn) {
  cursor: pointer;
  transition: all 150ms ease;
}

/* ============================================================================
   Responsive Adjustments
   ============================================================================ */

@media (max-width: 768px) {
  #template-gallery {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 768px) and (max-width: 1024px) {
  #template-gallery {
    grid-template-columns: repeat(2, 1fr);
  }
}