/* ===== COLORFUL TAB STYLING ===== */
/* Beautiful gradient tabs with vibrant colors and smooth animations */
/* Can be used throughout the application for enhanced UI */

.nav-tabs .nav-link {
    border: 1px solid transparent !important;
    border-radius: 0.475rem 0.475rem 0 0 !important;
    font-weight: 600 !important;
    transition: all 0.3s ease !important;
    position: relative !important;
    overflow: hidden !important;
    padding: 0.75rem 1.5rem !important; /* Increased padding for better spacing */
    margin: 0 0.25rem !important; /* Add margin between tabs */
    min-width: auto !important; /* Allow natural width */
    white-space: nowrap !important; /* Prevent text wrapping */
}

/* ===== PREDEFINED COLOR THEMES ===== */

/* Blue Theme - Primary/Beban/Kalendar */
.nav-tabs .nav-link.tab-blue,
.nav-tabs .nav-link[href="#stat-beban"],
.nav-tabs .nav-link[data-tab-name="kalendar"] {
    color: #009EF7 !important;
    background: linear-gradient(135deg, rgba(0, 158, 247, 0.1), rgba(0, 158, 247, 0.05)) !important;
    border-color: rgba(0, 158, 247, 0.2) !important;
}

.nav-tabs .nav-link.tab-blue:hover,
.nav-tabs .nav-link[href="#stat-beban"]:hover,
.nav-tabs .nav-link[data-tab-name="kalendar"]:hover {
    color: #ffffff !important;
    background: linear-gradient(135deg, #009EF7, #0077CC) !important;
    border-color: #009EF7 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(0, 158, 247, 0.3) !important;
}

.nav-tabs .nav-link.tab-blue.active,
.nav-tabs .nav-link[href="#stat-beban"].active,
.nav-tabs .nav-link[data-tab-name="kalendar"].active {
    color: #ffffff !important;
    background: linear-gradient(135deg, #009EF7, #0077CC) !important;
    border-color: #009EF7 !important;
    box-shadow: 0 4px 15px rgba(0, 158, 247, 0.4) !important;
}

/* Red Theme - Danger/Penolakan/Staff */
.nav-tabs .nav-link.tab-red,
.nav-tabs .nav-link[href="#stat-penolakan"],
.nav-tabs .nav-link[data-tab-name="staff"] {
    color: #F1416C !important;
    background: linear-gradient(135deg, rgba(241, 65, 108, 0.1), rgba(241, 65, 108, 0.05)) !important;
    border-color: rgba(241, 65, 108, 0.2) !important;
}

.nav-tabs .nav-link.tab-red:hover,
.nav-tabs .nav-link[href="#stat-penolakan"]:hover,
.nav-tabs .nav-link[data-tab-name="staff"]:hover {
    color: #ffffff !important;
    background: linear-gradient(135deg, #F1416C, #D63384) !important;
    border-color: #F1416C !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(241, 65, 108, 0.3) !important;
}

.nav-tabs .nav-link.tab-red.active,
.nav-tabs .nav-link[href="#stat-penolakan"].active,
.nav-tabs .nav-link[data-tab-name="staff"].active {
    color: #ffffff !important;
    background: linear-gradient(135deg, #F1416C, #D63384) !important;
    border-color: #F1416C !important;
    box-shadow: 0 4px 15px rgba(241, 65, 108, 0.4) !important;
}

/* Green Theme - Success/Perjawatan/Aset */
.nav-tabs .nav-link.tab-green,
.nav-tabs .nav-link[href="#stat-perjawatan"],
.nav-tabs .nav-link[data-tab-name="aset"] {
    color: #50CD89 !important;
    background: linear-gradient(135deg, rgba(80, 205, 137, 0.1), rgba(80, 205, 137, 0.05)) !important;
    border-color: rgba(80, 205, 137, 0.2) !important;
}

.nav-tabs .nav-link.tab-green:hover,
.nav-tabs .nav-link[href="#stat-perjawatan"]:hover,
.nav-tabs .nav-link[data-tab-name="aset"]:hover {
    color: #ffffff !important;
    background: linear-gradient(135deg, #50CD89, #3AC47D) !important;
    border-color: #50CD89 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(80, 205, 137, 0.3) !important;
}

.nav-tabs .nav-link.tab-green.active,
.nav-tabs .nav-link[href="#stat-perjawatan"].active,
.nav-tabs .nav-link[data-tab-name="aset"].active {
    color: #ffffff !important;
    background: linear-gradient(135deg, #50CD89, #3AC47D) !important;
    border-color: #50CD89 !important;
    box-shadow: 0 4px 15px rgba(80, 205, 137, 0.4) !important;
}

/* Orange Theme - Warning/Aktiviti */
.nav-tabs .nav-link.tab-orange,
.nav-tabs .nav-link[data-tab-name="aktiviti"] {
    color: #FF8C00 !important;
    background: linear-gradient(135deg, rgba(255, 140, 0, 0.1), rgba(255, 140, 0, 0.05)) !important;
    border-color: rgba(255, 140, 0, 0.2) !important;
}

.nav-tabs .nav-link.tab-orange:hover,
.nav-tabs .nav-link[data-tab-name="aktiviti"]:hover {
    color: #ffffff !important;
    background: linear-gradient(135deg, #FF8C00, #FF7F00) !important;
    border-color: #FF8C00 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(255, 140, 0, 0.3) !important;
}

.nav-tabs .nav-link.tab-orange.active,
.nav-tabs .nav-link[data-tab-name="aktiviti"].active {
    color: #ffffff !important;
    background: linear-gradient(135deg, #FF8C00, #FF7F00) !important;
    border-color: #FF8C00 !important;
    box-shadow: 0 4px 15px rgba(255, 140, 0, 0.4) !important;
}

/* Purple Theme - Tasks/Consumable */
.nav-tabs .nav-link.tab-purple,
.nav-tabs .nav-link[data-tab-name="tasks"],
.nav-tabs .nav-link[data-tab-name="consumable"] {
    color: #8B5CF6 !important;
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.1), rgba(139, 92, 246, 0.05)) !important;
    border-color: rgba(139, 92, 246, 0.2) !important;
}

.nav-tabs .nav-link.tab-purple:hover,
.nav-tabs .nav-link[data-tab-name="tasks"]:hover,
.nav-tabs .nav-link[data-tab-name="consumable"]:hover {
    color: #ffffff !important;
    background: linear-gradient(135deg, #8B5CF6, #7C3AED) !important;
    border-color: #8B5CF6 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3) !important;
}

.nav-tabs .nav-link.tab-purple.active,
.nav-tabs .nav-link[data-tab-name="tasks"].active,
.nav-tabs .nav-link[data-tab-name="consumable"].active {
    color: #ffffff !important;
    background: linear-gradient(135deg, #8B5CF6, #7C3AED) !important;
    border-color: #8B5CF6 !important;
    box-shadow: 0 4px 15px rgba(139, 92, 246, 0.4) !important;
}

/* Teal Theme - Reten */
.nav-tabs .nav-link.tab-teal,
.nav-tabs .nav-link[data-tab-name="reten"] {
    color: #14B8A6 !important;
    background: linear-gradient(135deg, rgba(20, 184, 166, 0.1), rgba(20, 184, 166, 0.05)) !important;
    border-color: rgba(20, 184, 166, 0.2) !important;
}

.nav-tabs .nav-link.tab-teal:hover,
.nav-tabs .nav-link[data-tab-name="reten"]:hover {
    color: #ffffff !important;
    background: linear-gradient(135deg, #14B8A6, #0D9488) !important;
    border-color: #14B8A6 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(20, 184, 166, 0.3) !important;
}

.nav-tabs .nav-link.tab-teal.active,
.nav-tabs .nav-link[data-tab-name="reten"].active {
    color: #ffffff !important;
    background: linear-gradient(135deg, #14B8A6, #0D9488) !important;
    border-color: #14B8A6 !important;
    box-shadow: 0 4px 15px rgba(20, 184, 166, 0.4) !important;
}

/* Pink Theme */
.nav-tabs .nav-link.tab-pink {
    color: #EC4899 !important;
    background: linear-gradient(135deg, rgba(236, 72, 153, 0.1), rgba(236, 72, 153, 0.05)) !important;
    border-color: rgba(236, 72, 153, 0.2) !important;
}

.nav-tabs .nav-link.tab-pink:hover {
    color: #ffffff !important;
    background: linear-gradient(135deg, #EC4899, #DB2777) !important;
    border-color: #EC4899 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(236, 72, 153, 0.3) !important;
}

.nav-tabs .nav-link.tab-pink.active {
    color: #ffffff !important;
    background: linear-gradient(135deg, #EC4899, #DB2777) !important;
    border-color: #EC4899 !important;
    box-shadow: 0 4px 15px rgba(236, 72, 153, 0.4) !important;
}

/* ===== TAB CONTAINER IMPROVEMENTS ===== */

/* Improve the tab container spacing */
.nav-tabs {
    margin-bottom: 1.5rem !important;
    border-bottom: 1px solid rgba(0,0,0,0.1) !important;
    padding: 0 0.5rem !important; /* Add padding to container */
}

[data-bs-theme="dark"] .nav-tabs {
    border-bottom-color: rgba(255,255,255,0.1) !important;
}

/* Better spacing for tab items */
.nav-tabs .nav-item {
    margin: 0 !important; /* Remove default margin since we're adding it to nav-link */
}

/* ===== DARK THEME SUPPORT ===== */

[data-bs-theme="dark"] .nav-tabs .nav-link {
    border-color: rgba(255, 255, 255, 0.1) !important;
}

[data-bs-theme="dark"] .nav-tabs .nav-link.tab-blue,
[data-bs-theme="dark"] .nav-tabs .nav-link[href="#stat-beban"],
[data-bs-theme="dark"] .nav-tabs .nav-link[data-tab-name="kalendar"] {
    background: linear-gradient(135deg, rgba(0, 158, 247, 0.15), rgba(0, 158, 247, 0.08)) !important;
}

[data-bs-theme="dark"] .nav-tabs .nav-link.tab-red,
[data-bs-theme="dark"] .nav-tabs .nav-link[href="#stat-penolakan"],
[data-bs-theme="dark"] .nav-tabs .nav-link[data-tab-name="staff"] {
    background: linear-gradient(135deg, rgba(241, 65, 108, 0.15), rgba(241, 65, 108, 0.08)) !important;
}

[data-bs-theme="dark"] .nav-tabs .nav-link.tab-green,
[data-bs-theme="dark"] .nav-tabs .nav-link[href="#stat-perjawatan"],
[data-bs-theme="dark"] .nav-tabs .nav-link[data-tab-name="aset"] {
    background: linear-gradient(135deg, rgba(80, 205, 137, 0.15), rgba(80, 205, 137, 0.08)) !important;
}

[data-bs-theme="dark"] .nav-tabs .nav-link.tab-orange,
[data-bs-theme="dark"] .nav-tabs .nav-link[data-tab-name="aktiviti"] {
    background: linear-gradient(135deg, rgba(255, 140, 0, 0.15), rgba(255, 140, 0, 0.08)) !important;
}

[data-bs-theme="dark"] .nav-tabs .nav-link.tab-purple,
[data-bs-theme="dark"] .nav-tabs .nav-link[data-tab-name="tasks"],
[data-bs-theme="dark"] .nav-tabs .nav-link[data-tab-name="consumable"] {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.15), rgba(139, 92, 246, 0.08)) !important;
}

[data-bs-theme="dark"] .nav-tabs .nav-link.tab-teal,
[data-bs-theme="dark"] .nav-tabs .nav-link[data-tab-name="reten"] {
    background: linear-gradient(135deg, rgba(20, 184, 166, 0.15), rgba(20, 184, 166, 0.08)) !important;
}

[data-bs-theme="dark"] .nav-tabs .nav-link.tab-pink {
    background: linear-gradient(135deg, rgba(236, 72, 153, 0.15), rgba(236, 72, 153, 0.08)) !important;
}

/* ===== ANIMATION EFFECTS ===== */

/* Shimmer animation for tab switching */
.nav-tabs .nav-link::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent) !important;
    transition: left 0.6s ease !important;
}

.nav-tabs .nav-link:hover::before {
    left: 100% !important;
}

/* ===== MOBILE RESPONSIVENESS ===== */

@media (max-width: 767.98px) {
    .nav-tabs .nav-link {
        padding: 0.875rem 1rem !important; /* Slightly smaller padding on mobile but still comfortable */
        font-size: 0.95rem !important;
        min-height: 44px !important;
        margin: 0 0.125rem !important; /* Smaller margin on mobile */
    }
    
    /* Reduce transform effect on mobile for better performance */
    .nav-tabs .nav-link:hover {
        transform: translateY(-1px) !important;
    }
    
    /* Allow horizontal scrolling on very small screens */
    .nav-tabs {
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        padding: 0 0.25rem !important;
    }
}

@media (max-width: 575.98px) {
    .nav-tabs .nav-link {
        padding: 0.75rem 0.875rem !important; /* Even more compact on very small screens */
        font-size: 0.9rem !important;
    }
}

/* ===== USAGE EXAMPLES ===== */
/*
To use these colorful tabs, simply add the appropriate class to your nav-link:

Basic usage:
<ul class="nav nav-tabs">
    <li class="nav-item">
        <a class="nav-link tab-blue active" href="#tab1">Tab 1</a>
    </li>
    <li class="nav-item">
        <a class="nav-link tab-red" href="#tab2">Tab 2</a>
    </li>
    <li class="nav-item">
        <a class="nav-link tab-green" href="#tab3">Tab 3</a>
    </li>
</ul>

Available classes:
- tab-blue (Primary/Info)
- tab-red (Danger/Error)
- tab-green (Success)
- tab-orange (Warning)
- tab-purple (Secondary)
- tab-teal (Info alternative)
- tab-pink (Custom)

Automatic styling works for:
1. Statistik dashboard tabs (href attributes):
   - href="#stat-beban" → Blue theme
   - href="#stat-penolakan" → Red theme
   - href="#stat-perjawatan" → Green theme

2. Klinik detail tabs (data-tab-name attributes):
   - data-tab-name="kalendar" → Blue theme
   - data-tab-name="aset" → Green theme
   - data-tab-name="reten" → Teal theme
   - data-tab-name="staff" → Red theme
   - data-tab-name="tasks" → Purple theme
   - data-tab-name="aktiviti" → Orange theme
   - data-tab-name="consumable" → Purple theme
*/