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

/*
 * IMPORT ORGANIZED STYLESHEETS
 * These files are imported in order of specificity:
 * 1. Base styles and utilities
 * 2. Animations
 * 3. Component-specific styles
 */


/* 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;
}

/* Modal Styles */
[id$="_modal"]:not(.hidden) {
    display: flex !important;
}


[data-controller*="modal"] > .relative {
    animation: scaleInModal 0.2s ease-out;
}

/* Prevent body scroll when modal is open */
body.modal-open {
    overflow: hidden !important;
    padding-right: var(--scrollbar-width, 0px) !important;
}