/* --- 1. Colorful Division Headings --- */
.head-0 td { background-color: #e3f2fd !important; color: #0a59ad !important; border-left: 8px solid #0a59ad !important; } 
.head-1 td { background-color: #e8f5e9 !important; color: #10a208 !important; border-left: 8px solid #10a208 !important; } 
.head-2 td { background-color: #fff9e6 !important; color: #b8860b !important; border-left: 8px solid #b8860b !important; } 
.head-3 td { background-color: #fce4ec !important; color: #d81b60 !important; border-left: 8px solid #d81b60 !important; } 

/* --- 2. Rainbow Text (Naveen, Kavitha, Achinthya Rule) --- */
/* Target 'td', 'strong', and 'a' so every bit of text changes color */
.text-0 td, .text-0 strong, .text-0 a { color: #0a59ad !important; font-weight: 600 !important; } /* Blue */
.text-1 td, .text-1 strong, .text-1 a { color: #10a208 !important; font-weight: 600 !important; } /* Green */
.text-2 td, .text-2 strong, .text-2 a { color: #b8860b !important; font-weight: 600 !important; } /* Gold */
.text-3 td, .text-3 strong, .text-3 a { color: #d81b60 !important; font-weight: 600 !important; } /* Pink */
.text-4 td, .text-4 strong, .text-4 a { color: #6f42c1 !important; font-weight: 600 !important; } /* Purple */

/* Cards Styling (Ensuring they display) */
#grid-container { display: flex; flex-wrap: wrap; margin-bottom: 30px; }
.card-3d { transition: transform 0.3s; border-radius: 15px; background: white; border: 1px solid #eee; }
.card-3d:hover { transform: translateY(-5px); }

/* Center the numbers and make them bold */
.staff-item td:first-child {
    font-weight: 800;
    text-align: center;
    border-right: 1px solid #eee;
}

/* Make sure headers stay aligned */
.table th {
    text-align: left;
    padding: 12px;
}

#staffSearch:focus {
    border-color: #0a59ad;
    box-shadow: 0 0 15px rgba(10, 89, 173, 0.3);
    transition: all 0.3s ease;
}

/* --- 3. Position Label Styling (Removing Background) --- */
.badge {
    background-color: transparent !important; /* Removes the light blue fill */
    border: none !important;                /* Removes any border/outline */
    color: #0a59ad !important;               /* Matches your Blue 'text-0' theme */
    padding: 0 !important;                   /* Removes extra spacing around text */
    font-weight: 600 !important;             /* Keeps it professional and readable */
    text-transform: capitalize;              /* Optional: ensures "Assistant" looks neat */
}

/* If you are using specific Bootstrap classes like 'badge-info' or 'bg-light' */
.badge.bg-primary-light, .badge.bg-info, .badge-pill {
    background: none !important;
    box-shadow: none !important;
}

/* --- 4. Remove Mobile Icons from Table Cells --- */
.staff-item td i, 
.staff-item td svg {
    display: none !important;
}

/* Ensure the phone number aligns nicely after icon removal */
.staff-item td {
    vertical-align: middle !important;
    line-height: 1.5;
}