/* Integration Styles for Components */

/* Component interaction styles */
.nav-panel .btn {
    /* Navigation specific button styles */
    border: none;
    background: transparent;
}

.dark-mode .nav-panel .btn {
    color: var(--text);
}

/* Animation integration with components */
.nav-tab {
    transition: var(--transition-base);
}

.nav-tab:hover {
    transform: translateY(-2px);
}

/* Button component in dark mode */
.dark-mode .btn-primary {
    background: var(--mauve);
    color: var(--base);
    border-color: var(--mauve);
}

.dark-mode .btn-secondary {
    background: var(--surface);
    color: var(--text);
    border-color: var(--surface);
}

/* Utility classes that work with dark mode */
.dark-mode .bg-primary {
    background-color: var(--surface) !important;
}

.dark-mode .text-primary {
    color: var(--mauve) !important;
}

/* Responsive component integration */
@media (max-width: 768px) {
    .nav-panel .btn {
        padding: 0.5rem;
    }
    
    .fade-in-up {
        transform: translateY(20px);
    }
}

/* Animation performance optimization */
@media (prefers-reduced-motion: reduce) {
    .fade-in,
    .fade-in-up,
    .fade-in-down,
    .fade-in-left,
    .fade-in-right,
    .slide-in-left,
    .slide-in-right,
    .scale-in,
    .rotate-in {
        animation: none;
        transform: none;
        opacity: 1;
    }
    
    .nav-tab,
    .btn {
        transition: none;
    }
}

/* Focus states for accessibility */
.btn:focus-visible,
.nav-tab:focus-visible {
    outline: 2px solid var(--mauve);
    outline-offset: 2px;
}

.dark-mode .btn:focus-visible,
.dark-mode .nav-tab:focus-visible {
    outline-color: var(--blue);
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .btn {
        border-width: 2px;
    }
    
    .nav-tab {
        border-bottom: 2px solid transparent;
    }
    
    .nav-tab.active {
        border-bottom-color: currentColor;
    }
}

/* Print styles */
@media print {
    .nav-panel,
    .btn,
    .dark-mode-btn {
        display: none;
    }
    
    .fade-in,
    .fade-in-up,
    .scale-in {
        animation: none;
        opacity: 1;
        transform: none;
    }
}

/* Component specific loading states */
.loading .btn {
    pointer-events: none;
    opacity: 0.6;
}

.loading .nav-tab {
    cursor: wait;
}

/* Error states */
.error .btn-primary {
    background-color: var(--red);
    border-color: var(--red);
}

.error .nav-tab {
    color: var(--red);
}

/* Success states */
.success .btn-primary {
    background-color: var(--green);
    border-color: var(--green);
}

/* Integration helpers */
.component-wrapper {
    position: relative;
}

.component-wrapper.has-animation {
    overflow: hidden;
}

.component-wrapper.interactive {
    cursor: pointer;
}

/* Smooth scrolling for navigation */
html {
    scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}