/* Custom Tab Colors for Customer Discrepancy Categories */

/* Tab color scheme to match summary cards:
   - Tab 1 (MISMATCHED CUSTOMERS): Purple/Pink (#9189fd / #f790c8)
   - Tab 2 (MISSING CUSTOMERS FROM SALES BOOK): Orange (#ffbf79)
   - Tab 3 (MISSING CUSTOMERS FROM 26AS): Blue (#8dc8ff)
   - Tab 4 (COMPLIANT CUSTOMERS): Green (#7bc67e)
   - Tab 5 (UNMATCHED COMMISSION): Teal (#4db8a8)
*/

/* Target tabs by nth-child to apply specific colors */
/* Target tabs by nth-child to apply specific colors */
.p-tabview .p-tabview-nav li:nth-child(1) a {
    background-color: #9189fd !important;
    color: #ffffff !important;
}

.p-tabview .p-tabview-nav li:nth-child(1) a .pi {
    color: #ffffff !important;
}

.p-tabview .p-tabview-nav li:nth-child(2) a {
    background-color: #ffbf79 !important;
    color: #ffffff !important;
}

.p-tabview .p-tabview-nav li:nth-child(2) a .pi {
    color: #ffffff !important;
}

.p-tabview .p-tabview-nav li:nth-child(3) a {
    background-color: #8dc8ff !important;
    color: #ffffff !important;
}

.p-tabview .p-tabview-nav li:nth-child(3) a .pi {
    color: #ffffff !important;
}

.p-tabview .p-tabview-nav li:nth-child(4) a {
    background-color: #7bc67e !important;
    color: #ffffff !important;
}

.p-tabview .p-tabview-nav li:nth-child(4) a .pi {
    color: #ffffff !important;
}

.p-tabview .p-tabview-nav li:nth-child(5) a {
    background-color: #4db8a8 !important;
    color: #ffffff !important;
}

.p-tabview .p-tabview-nav li:nth-child(5) a .pi {
    color: #ffffff !important;
}

/* Hover states - slightly darker versions */
.p-tabview .p-tabview-nav li:nth-child(1):not(.p-highlight):hover a {
    background-color: #7a6fe5 !important;
    color: #ffffff !important;
}

.p-tabview .p-tabview-nav li:nth-child(2):not(.p-highlight):hover a {
    background-color: #e6a661 !important;
    color: #ffffff !important;
}

.p-tabview .p-tabview-nav li:nth-child(3):not(.p-highlight):hover a {
    background-color: #6fb3e6 !important;
    color: #ffffff !important;
}

.p-tabview .p-tabview-nav li:nth-child(4):not(.p-highlight):hover a {
    background-color: #62ad66 !important;
    color: #ffffff !important;
}

.p-tabview .p-tabview-nav li:nth-child(5):not(.p-highlight):hover a {
    background-color: #3a9f90 !important;
    color: #ffffff !important;
}

/* Keep the active tab with active background but ensure text is white. 
   We essentially allow the specific child rules above to dictate background.
   We just need to ensure the generic rule below doesn't override text color incorrectly if it has higher specificity, 
   but specific nth-child rules usually win or we use !important which we already are.
   However, we should probably remove the generic override below or update it. 
*/
/* .p-tabview .p-tabview-nav li.p-highlight a {
    color: #2196F3 !important; 
} */