/* IIS Custom Styles */

/* Navigation Styles */
.nav-item {
    @apply flex items-center space-x-3 px-3 py-2 rounded-lg text-sm font-medium text-gray-700 hover:bg-gray-100 hover:text-gray-900 transition;
}

.nav-item.active {
    @apply bg-blue-50 text-blue-700 hover:bg-blue-100;
}

.bottom-nav-item {
    @apply flex flex-col items-center justify-center px-3 py-2 text-gray-600 hover:text-gray-900 transition;
}

.bottom-nav-item.active {
    @apply text-blue-600;
}

/* Panel Fullscreen Styles */
.panel-container {
    @apply relative;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.panel-container.fullscreen {
    @apply fixed inset-0 z-50 bg-gray-50 overflow-y-auto;
    animation: fadeIn 0.2s ease-out;
}

.panel-container.fullscreen > div {
    @apply min-h-screen;
}

/* Fullscreen Button States */
.panel-container.fullscreen .expand-icon {
    @apply hidden;
}

.panel-container.fullscreen .collapse-icon {
    @apply block;
}

.panel-container:not(.fullscreen) .collapse-icon {
    @apply hidden;
}

/* Animations */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes slideUp {
    from {
        transform: translateY(10px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Card Hover Effects */
.hover\:shadow-md {
    transition: box-shadow 0.2s ease-in-out;
}

/* Line Clamp Utility */
.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Mobile AI Panel */
#mobile-ai-panel {
    @apply fixed inset-0 bg-white z-50 hidden;
    animation: slideUp 0.3s ease-out;
}

#mobile-ai-panel.active {
    @apply block;
}

/* Scrollbar Styling */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    @apply bg-gray-100;
}

::-webkit-scrollbar-thumb {
    @apply bg-gray-300 rounded-full;
}

::-webkit-scrollbar-thumb:hover {
    @apply bg-gray-400;
}

/* Loading States */
.htmx-request {
    opacity: 0.6;
    pointer-events: none;
}

.htmx-swapping {
    opacity: 0;
    transition: opacity 0.2s ease-out;
}

.htmx-settling {
    opacity: 1;
    transition: opacity 0.2s ease-in;
}

/* Signal Badge Colors */
.signal-buy {
    @apply bg-green-100 text-green-800;
}

.signal-sell {
    @apply bg-red-100 text-red-800;
}

.signal-neutral {
    @apply bg-gray-100 text-gray-800;
}

/* Responsive Utilities */
@media (max-width: 768px) {
    .panel-container.fullscreen {
        @apply pb-20;
    }
}

/* Focus Visible for Accessibility */
*:focus-visible {
    @apply outline-none ring-2 ring-blue-500 ring-offset-2;
}

/* Smooth Transitions */
* {
    @apply transition-colors duration-150;
}

button, a {
    @apply transition-all duration-200;
}