/*
 * 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.
 */

/* Custom scrollbar utilities */
.scrollbar-thin {
  scrollbar-width: thin;
  scrollbar-color: #cbd5e1 transparent; /* Light mode: slate-300 */
}

.dark .scrollbar-thin {
  scrollbar-color: #475569 transparent; /* Dark mode: slate-600 */
}

.scrollbar-thin::-webkit-scrollbar {
  width: 6px;
}

.scrollbar-thin::-webkit-scrollbar-track {
  background: transparent;
}

.scrollbar-thin::-webkit-scrollbar-thumb {
  background-color: #cbd5e1; /* slate-300 */
  border-radius: 3px;
}

.scrollbar-thin::-webkit-scrollbar-thumb:hover {
  background-color: #94a3b8; /* slate-400 */
}

.dark .scrollbar-thin::-webkit-scrollbar-thumb {
  background-color: #475569; /* slate-600 */
}

.dark .scrollbar-thin::-webkit-scrollbar-thumb:hover {
  background-color: #64748b; /* slate-500 */
}

/* Hidden scrollbar (keeps functionality) */
.scrollbar-none {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.scrollbar-none::-webkit-scrollbar {
  display: none;
}

/* Turbo Frame busy state */
turbo-frame[busy] {
  opacity: 0.5;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

/* Details/Summary accordion styling */
details summary::-webkit-details-marker,
details summary::marker {
  display: none;
}

details summary .details-marker {
  transition: transform 0.2s ease;
}

details[open] summary .details-marker {
  transform: rotate(90deg);
}