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

/* Toast Animations */
.toast-notification {
    animation: toastSlideIn 0.3s ease-out;
}

.toast-notification.removing {
    animation: toastSlideOut 0.3s ease-in forwards;
}

@keyframes toastSlideIn {
    from {
        opacity: 0;
        transform: translateX(100%);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes toastSlideOut {
    from {
        opacity: 1;
        transform: translateX(0);
    }
    to {
        opacity: 0;
        transform: translateX(100%);
    }
}

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

/* Modal backdrop animation */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Modal content animation */
@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

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

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