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

/* Tab component — active state driven by data-active="true" set by tabs_controller.js */
[data-tabs-target="tab"][data-active="true"] {
  background-color: #ffffff;
  color: #111827;
  box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
}
[data-tabs-target="tab"][data-active="false"],
[data-tabs-target="tab"]:not([data-active]) {
  color: #6b7280;
}
.dark [data-tabs-target="tab"][data-active="true"] {
  background-color: #4b5563;
  color: #ffffff;
}
.dark [data-tabs-target="tab"][data-active="false"],
.dark [data-tabs-target="tab"]:not([data-active]) {
  color: #9ca3af;
}

/* Custom scrollbar */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background-color: #f3f4f6;
}

.dark ::-webkit-scrollbar-track {
    background-color: #1f2937;
}

::-webkit-scrollbar-thumb {
    background-color: #d1d5db;
    border-radius: 9999px;
}

.dark ::-webkit-scrollbar-thumb {
    background-color: #4b5563;
}

::-webkit-scrollbar-thumb:hover {
    background-color: #9ca3af;
}

.dark ::-webkit-scrollbar-thumb:hover {
    background-color: #6b7280;
}

/* Focus styles for accessibility */
.focus-visible\:ring-2:focus-visible {
    outline: 2px solid #06b6d4;
    outline-offset: 2px;
}

.dark .focus-visible\:ring-2:focus-visible {
    outline-offset: 2px;
}

/* Animation utilities */
@keyframes shimmer {
    0% { background-position: -200px 0; }
    100% { background-position: calc(200px + 100%) 0; }
}

.animate-shimmer {
    animation: shimmer 2s infinite;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
    background-size: 200px 100%;
}