/**
 * Enhanced DataTable - Minimal CSS
 * 
 * Only essential styles that aren't covered by existing Bootstrap/site classes
 * Uses your existing design system - just adds the missing pieces
 * 
 * @author Rovo Dev
 * @version 1.0.0
 */

/* ==========================================================================
   SMART RESET BUTTON ANIMATION (Only new feature needed)
   ========================================================================== */

.enhanced-reset-btn {
    transition: all 0.3s ease;
}

.enhanced-reset-btn.show {
    animation: slideInRight 0.3s ease;
}

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(-15px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* ==========================================================================
   LOADING STATE OVERLAY (For AJAX operations)
   ========================================================================== */

.enhanced-table-loading {
    position: relative;
    opacity: 0.6;
    pointer-events: none;
}

.enhanced-table-loading::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.8);
    z-index: 10;
    border-radius: 8px;
}

.enhanced-table-loading::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 2rem;
    height: 2rem;
    margin: -1rem 0 0 -1rem;
    border: 2px solid #f3f3f3;
    border-top: 2px solid var(--bs-primary);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    z-index: 11;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* ==========================================================================
   SEARCH HIGHLIGHT (For search results)
   ========================================================================== */

.enhanced-search-highlight {
    background-color: rgba(255, 235, 59, 0.3) !important;
    transition: background-color 0.3s ease;
}

/* ==========================================================================
   MOBILE RESPONSIVE TWEAKS (Only if Bootstrap doesn't cover it)
   ========================================================================== */

@media (max-width: 576px) {
    /* Ensure search bar doesn't get too small on mobile */
    .search-bar {
        min-width: 200px !important;
    }
    
    /* Stack filter controls on very small screens */
    .enhanced-filters-mobile .d-flex {
        flex-direction: column !important;
        gap: 0.5rem !important;
    }
    
    .enhanced-filters-mobile .d-flex > * {
        width: 100% !important;
    }
}

/* ==========================================================================
   FADE-IN ANIMATION (For smooth content loading)
   ========================================================================== */

.enhanced-fade-in {
    animation: fadeInUp 0.5s ease;
}

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

/* ==========================================================================
   TABLE ROW HOVER ENHANCEMENT (Subtle improvement over Bootstrap default)
   ========================================================================== */

.table-hover > tbody > tr:hover > td {
    background-color: rgba(0, 0, 0, 0.02) !important;
    transition: background-color 0.2s ease;
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
    .enhanced-table-loading::after {
        background: rgba(45, 55, 72, 0.9);
    }
    
    .enhanced-table-loading::before {
        border-color: #4a5568;
        border-top-color: var(--bs-primary);
    }
    
    .table-hover > tbody > tr:hover > td {
        background-color: rgba(255, 255, 255, 0.05) !important;
    }
}