/* RevvOps Design Refresh - Option 1: Modern SaaS Look
   Indigo/Coral palette with glass-morphism and softer shadows
   Apply only to dashboard for preview - can extend to full app later
*/

/* ========== INTER FONT ========== */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

/* Apply Inter font consistently across all elements */
body,
.card,
.card-body,
.card-header,
.table,
.table th,
.table td,
.btn,
.badge,
.alert,
.list-group-item,
.dropdown-menu,
.dropdown-item,
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
p, span, div, a, label, input, select, textarea {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}

/* Consistent font weights */
body {
    font-weight: 400 !important;
}

strong, b, th {
    font-weight: 600 !important;
}

/* Table header styling - consistent */
.table thead th,
.card .table th {
    font-family: 'Inter', sans-serif !important;
    font-weight: 600 !important;
    font-size: 0.75rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    color: var(--refresh-gray-500) !important;
}

/* Table body text - consistent */
.table tbody td,
.card .table td {
    font-family: 'Inter', sans-serif !important;
    font-weight: 400 !important;
    font-size: 0.875rem !important;
    color: var(--refresh-gray-700) !important;
}

/* Consultant names and project names in tables - slightly bolder */
.table td strong,
.table td a {
    font-weight: 500 !important;
}

/* ========== COLOR PALETTE OVERRIDE ========== */
:root {
    /* Primary palette - Deep Indigo */
    --refresh-primary: #4F46E5;
    --refresh-primary-hover: #4338CA;
    --refresh-primary-light: #EEF2FF;
    --refresh-primary-dark: #3730A3;
    
    /* Accent - Coral */
    --refresh-accent: #F97316;
    --refresh-accent-hover: #EA580C;
    --refresh-accent-light: #FFF7ED;
    
    /* Neutrals - Softer grays */
    --refresh-gray-50: #F9FAFB;
    --refresh-gray-100: #F3F4F6;
    --refresh-gray-200: #E5E7EB;
    --refresh-gray-300: #D1D5DB;
    --refresh-gray-400: #9CA3AF;
    --refresh-gray-500: #6B7280;
    --refresh-gray-600: #4B5563;
    --refresh-gray-700: #374151;
    --refresh-gray-800: #1F2937;
    --refresh-gray-900: #111827;
    
    /* Status colors - slightly softer */
    --refresh-success: #10B981;
    --refresh-warning: #F59E0B;
    --refresh-danger: #EF4444;
    --refresh-info: #3B82F6;
    
    /* Shadows - larger, softer, more diffused */
    --refresh-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.05), 0 1px 2px rgba(0, 0, 0, 0.03);
    --refresh-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.07), 0 2px 4px -1px rgba(0, 0, 0, 0.04);
    --refresh-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -2px rgba(0, 0, 0, 0.04);
    --refresh-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.08), 0 10px 10px -5px rgba(0, 0, 0, 0.03);
    
    /* Glass effect */
    --refresh-glass-bg: rgba(255, 255, 255, 0.8);
    --refresh-glass-border: rgba(255, 255, 255, 0.5);
    --refresh-glass-blur: blur(10px);
    
    /* Override Bootstrap table hover variable */
    --bs-table-hover-bg: #F9FAFB !important;
    --bs-table-bg: transparent;
    
    /* Modal backdrop - more transparent for modern look */
    --bs-backdrop-opacity: 0.3;
}

/* ========== NAVBAR OVERRIDE ========== */
/* Only apply gradient background - preserve all other Bootstrap navbar styling */
.navbar.fixed-top {
    background: linear-gradient(135deg, var(--refresh-primary) 0%, var(--refresh-primary-dark) 100%) !important;
}
/* NOTE: Do NOT add nav-link or button overrides here - they break the navbar layout */

/* ========== PAGE TITLES ========== */
.page-title {
    color: var(--refresh-gray-800) !important;
    font-weight: 600 !important;
}

.page-title i {
    color: var(--refresh-primary) !important;
}

/* ========== BODY & BACKGROUND ========== */
body {
    background: linear-gradient(180deg, var(--refresh-gray-50) 0%, #ffffff 100%);
    /* Removed background-attachment: fixed for performance - causes repaint on scroll */
}

/* ========== CARD STYLING ========== */
/* Performance optimized: removed backdrop-filter blur and hover transforms
   which cause expensive GPU compositing on pages with many cards */
.card {
    background: #ffffff !important;
    border: 1px solid var(--refresh-gray-200) !important;
    border-radius: 0.75rem !important;
    box-shadow: var(--refresh-shadow-sm) !important;
}

/* Only apply hover effect to clickable cards, not all cards */
.card[onclick]:hover,
a.card:hover {
    box-shadow: var(--refresh-shadow) !important;
}

/* Filter cards need higher z-index than results cards for dropdown visibility */
#forecastFiltersCard.card,
#demandFiltersCard.card,
#skills-card.card,
#projectsFilterCard.card,
#clientsFilterCard.card,
#consultantsFilterCard.card,
#timeTrackingFilterCard.card {
    position: relative !important;
    z-index: 10 !important;
}

/* Results cards must be in LOWER stacking context than filter cards */
#projectsResultsCard,
#clientsResultsCard,
#consultantsResultsCard,
#resultsCard {
    position: relative !important;
    z-index: 1 !important;
}

.card-header {
    background: transparent !important;
    border-bottom: 1px solid var(--refresh-gray-200) !important;
    padding: 1rem 1.25rem !important;
}

.card-header h5,
.card-header h6,
.card-header .h5,
.card-header .h6 {
    font-weight: 600 !important;
    color: var(--refresh-gray-800) !important;
}

.card-body {
    padding: 1.25rem !important;
}

/* ========== KPI CARDS - SPECIAL STYLING ========== */
.alert.alert-info {
    background: linear-gradient(135deg, var(--refresh-primary) 0%, var(--refresh-primary-dark) 100%) !important;
    border: none !important;
    border-radius: 0.75rem !important;
    box-shadow: var(--refresh-shadow-lg) !important;
    color: white !important;
}

.alert.alert-info .kpi-link,
.alert.alert-info h2,
.alert.alert-info h3,
.alert.alert-info h4,
.alert.alert-info p,
.alert.alert-info span,
.alert.alert-info small {
    color: white !important;
}

.alert.alert-info small {
    opacity: 0.85;
}

/* Secondary KPI cards */
.alert.alert-light,
.alert.bg-light {
    background: var(--refresh-glass-bg) !important;
    backdrop-filter: var(--refresh-glass-blur);
    -webkit-backdrop-filter: var(--refresh-glass-blur);
    border: 1px solid var(--refresh-gray-200) !important;
    border-radius: 0.75rem !important;
    box-shadow: var(--refresh-shadow) !important;
}

/* ========== BUTTONS ========== */
/* Base button sizing - consistent across all variants */
/* Exclude navbar buttons to preserve original Bootstrap layout */
.btn:not(.navbar .btn):not(.navbar-nav .btn) {
    padding: 0.5rem 1rem !important;
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    border-radius: 0.5rem !important;
    line-height: 1.5 !important;
}

.btn-primary {
    background: var(--refresh-primary) !important;
    border-color: var(--refresh-primary) !important;
    box-shadow: var(--refresh-shadow-sm) !important;
    transition: all 0.2s ease !important;
}

.btn-primary:hover {
    background: var(--refresh-primary-hover) !important;
    border-color: var(--refresh-primary-hover) !important;
    transform: translateY(-1px);
    box-shadow: var(--refresh-shadow) !important;
}

.btn-outline-primary {
    color: var(--refresh-primary) !important;
    border-color: var(--refresh-primary) !important;
}

.btn-outline-primary:hover {
    background: var(--refresh-primary) !important;
    color: white !important;
}

/* Accent button for CTAs */
.btn-warning,
.btn-accent {
    background: var(--refresh-accent) !important;
    border-color: var(--refresh-accent) !important;
    color: white !important;
    border-radius: 0.5rem !important;
    font-weight: 500 !important;
}

.btn-warning:hover,
.btn-accent:hover {
    background: var(--refresh-accent-hover) !important;
    border-color: var(--refresh-accent-hover) !important;
    color: white !important;
}

/* Button groups - period selector */
.btn-group .btn {
    border-radius: 0 !important;
}

.btn-group .btn:first-child {
    border-radius: 0.5rem 0 0 0.5rem !important;
}

.btn-group .btn:last-child {
    border-radius: 0 0.5rem 0.5rem 0 !important;
}

.btn-group .btn-outline-primary.active,
.btn-group .btn-check:checked + .btn-outline-primary {
    background: var(--refresh-primary) !important;
    color: white !important;
}

/* ========== TABLES ========== */
.table {
    border-radius: 0.5rem;
    overflow: hidden;
}

.table thead th {
    background: var(--refresh-gray-50) !important;
    color: var(--refresh-gray-600) !important;
    font-weight: 600 !important;
    font-size: 0.75rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    border-bottom: 1px solid var(--refresh-gray-200) !important;
}

.table tbody tr {
    transition: background-color 0.15s ease;
}

.table:not(.timeline-table) tbody tr:hover {
    background: var(--refresh-primary-light) !important;
}

.table td {
    border-bottom: 1px solid var(--refresh-gray-100) !important;
    vertical-align: middle !important;
}

/* Sticky table headers - ensure visibility above data rows */
.table thead.sticky-top {
    position: sticky !important;
    top: 0 !important;
    z-index: 10 !important;
}

.table thead.sticky-top th {
    background: var(--refresh-gray-50) !important;
}

/* Forecast report tables - ensure headers always visible */
#forecastTable thead,
#byPeriodTable thead,
#plTable thead {
    position: sticky !important;
    top: 0 !important;
    z-index: 10 !important;
}

#forecastTable thead th,
#byPeriodTable thead th,
#plTable thead th {
    background: var(--refresh-gray-50) !important;
}

/* Forecast table wrapper - allow scrolling with visible headers */
.forecast-wrapper {
    overflow-x: auto;
    overflow-y: visible;
}

/* ========== BADGES ========== */
/* Base badge styling - only affects shape/font, NOT colors */
.badge {
    font-weight: 500 !important;
    padding: 0.35em 0.65em !important;
    border-radius: 0.375rem !important;
    font-size: 0.75rem !important;
}

/* NOTE: Bootstrap semantic badge classes (.badge.bg-primary, .badge.bg-success, 
   .badge.bg-warning, .badge.bg-danger, .badge.bg-info, .badge.bg-secondary) 
   are NOT overridden here to preserve business-meaningful status colors
   in Project Modelling and Forecast Reports */

/* Tag badges - light indigo background with indigo text */
.badge-tag,
.badge.bg-primary.bg-opacity-25 {
    background: var(--refresh-primary-light) !important;
    color: var(--refresh-primary) !important;
    font-weight: 500 !important;
}

/* Forecast/Pipeline badges - use coral accent */
.badge-forecast,
.badge-accent {
    background: var(--refresh-accent) !important;
    color: white !important;
}

/* Status-specific badge classes for semantic clarity */
.badge-status-active {
    background: var(--refresh-success) !important;
    color: white !important;
}

.badge-status-awarded {
    background: var(--refresh-primary) !important;
    color: white !important;
}

.badge-status-complete {
    background: var(--refresh-gray-500) !important;
    color: white !important;
}

.badge-status-forecast {
    background: var(--refresh-accent) !important;
    color: white !important;
}

/* ========== PROGRESS BARS ========== */
.progress {
    background: var(--refresh-gray-200) !important;
    border-radius: 0.5rem !important;
    height: 0.5rem !important;
    overflow: hidden;
}

.progress-bar {
    background: linear-gradient(90deg, var(--refresh-primary) 0%, var(--refresh-info) 100%) !important;
    border-radius: 0.5rem !important;
}

/* ========== CHARTS CONTAINER ========== */
/* Note: Only target actual chart containers, NOT Font Awesome icons like fa-chart-* */
.chart-container,
div[class*="chart"],
canvas[class*="chart"] {
    background: white;
    border-radius: 0.5rem;
    padding: 1rem;
}

/* ========== LIST GROUPS ========== */
.list-group-item {
    border: none !important;
    border-bottom: 1px solid var(--refresh-gray-100) !important;
    padding: 0.875rem 1rem !important;
    transition: background-color 0.15s ease;
}

.list-group-item:last-child {
    border-bottom: none !important;
}

.list-group-item:hover {
    background: var(--refresh-gray-50) !important;
}

/* ========== CONSISTENT HOVER STATES ACROSS ALL ELEMENTS ========== */
/* Override Bootstrap's table-hover CSS variable at the class level */
.table-hover {
    --bs-table-hover-bg: #F9FAFB;
}

/* Table rows - override Bootstrap's table-hover AND custom.css blue tint */
/* Exclude .timeline-table to preserve utilization gradient backgrounds */
.table-hover:not(.timeline-table) > tbody > tr:hover,
.table-hover:not(.timeline-table) > tbody > tr:hover > td,
.table-hover:not(.timeline-table) > tbody > tr:hover > th,
.table-hover:not(.timeline-table) > tbody > tr:hover > *,
.table:not(.timeline-table) > tbody > tr:hover,
.table:not(.timeline-table) > tbody > tr:hover > td,
.table:not(.timeline-table) > tbody > tr:hover > th {
    background-color: #F9FAFB !important;
    --bs-table-hover-bg: #F9FAFB !important;
    --bs-table-accent-bg: #F9FAFB !important;
}

/* Clickable table rows */
.table tbody tr.clickable-row:hover {
    background-color: var(--refresh-gray-50) !important;
    cursor: pointer;
}

/* Any card with explicit hover-row class */
.card-body .hover-row:hover {
    background-color: var(--refresh-gray-50) !important;
    border-radius: 0.375rem;
}

/* ========== LINKS ========== */
a:not(.btn):not(.nav-link):not(.navbar-brand) {
    color: var(--refresh-primary);
    text-decoration: none;
    transition: color 0.15s ease;
}

a:not(.btn):not(.nav-link):not(.navbar-brand):hover {
    color: var(--refresh-primary-hover);
}

/* ========== METRIC CARDS - DASHBOARD SPECIFIC ========== */
.metric-card {
    background: linear-gradient(135deg, var(--refresh-primary) 0%, var(--refresh-primary-dark) 100%) !important;
    border-radius: 0.75rem !important;
    box-shadow: var(--refresh-shadow-lg) !important;
}

/* ========== DASHBOARD WIDGET STYLING ========== */
.dashboard-widget {
    background: var(--refresh-glass-bg) !important;
    backdrop-filter: var(--refresh-glass-blur);
    -webkit-backdrop-filter: var(--refresh-glass-blur);
    border: 1px solid var(--refresh-gray-200) !important;
    border-radius: 0.75rem !important;
    box-shadow: var(--refresh-shadow) !important;
}

/* ========== FORM CONTROLS ========== */
.form-control,
.form-select {
    font-family: 'Inter', sans-serif !important;
    font-size: 0.875rem !important;
    border: 1px solid var(--refresh-gray-300) !important;
    border-radius: 0.5rem !important;
    padding: 0.625rem 0.875rem !important;
    transition: all 0.15s ease !important;
    color: var(--refresh-gray-800) !important;
}

.form-control::placeholder {
    color: var(--refresh-gray-400) !important;
    font-weight: 400 !important;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--refresh-primary) !important;
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.15) !important;
}

/* ========== DROPDOWN MENUS ========== */
.dropdown-menu {
    border: 1px solid var(--refresh-gray-200) !important;
    border-radius: 0.5rem !important;
    box-shadow: var(--refresh-shadow-lg) !important;
    padding: 0.5rem !important;
    font-size: 0.875rem !important;
}

.dropdown-item {
    border-radius: 0.375rem !important;
    padding: 0.5rem 0.75rem !important;
    transition: all 0.15s ease !important;
    font-size: 0.875rem !important;
    font-family: 'Inter', sans-serif !important;
}

.dropdown-item:hover {
    background: var(--refresh-primary-light) !important;
    color: var(--refresh-primary) !important;
}

/* ========== MODALS ========== */
/* z-index must be higher than sticky headers (1100) to appear above all UI */
.modal {
    z-index: 1200 !important;
}

.modal-backdrop {
    z-index: 1195 !important;
    opacity: 0.3 !important;
}

.modal-content {
    background: var(--refresh-glass-bg) !important;
    backdrop-filter: var(--refresh-glass-blur);
    -webkit-backdrop-filter: var(--refresh-glass-blur);
    border: 1px solid var(--refresh-gray-200) !important;
    border-radius: 0.75rem !important;
    box-shadow: var(--refresh-shadow-xl) !important;
}

.modal-header {
    border-bottom: 1px solid var(--refresh-gray-200) !important;
    padding: 1rem 1.25rem !important;
}

.modal-title {
    font-family: 'Inter', sans-serif !important;
    font-weight: 600 !important;
    color: var(--refresh-gray-800) !important;
}

.modal-body {
    font-family: 'Inter', sans-serif !important;
    padding: 1.25rem !important;
    color: var(--refresh-gray-700) !important;
}

.modal-footer {
    border-top: 1px solid var(--refresh-gray-200) !important;
    padding: 1rem 1.25rem !important;
}

.btn-danger {
    background: var(--refresh-danger) !important;
    border-color: var(--refresh-danger) !important;
}

.btn-danger:hover {
    background: #DC2626 !important;
    border-color: #DC2626 !important;
}

/* ========== UTILIZATION SUMMARY CARD ========== */
/* Target elements inside card-body flexbox rows */
.card-body .d-flex strong,
.card-body .d-flex small,
.card-body .d-flex .text-muted {
    font-family: 'Inter', sans-serif !important;
}

.card-body .d-flex strong {
    font-weight: 600 !important;
    font-size: 0.875rem !important;
    color: var(--refresh-gray-800) !important;
}

.card-body .d-flex small.text-muted {
    font-size: 0.75rem !important;
    color: var(--refresh-gray-500) !important;
    font-weight: 400 !important;
}

/* ========== PAGE TITLE ========== */
h1, .h1 {
    color: var(--refresh-gray-900) !important;
    font-weight: 700 !important;
    letter-spacing: -0.025em !important;
}

h2, .h2, h3, .h3 {
    color: var(--refresh-gray-800) !important;
    font-weight: 600 !important;
}

/* ========== SUBTLE ANIMATIONS ========== */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.card {
    animation: fadeIn 0.3s ease-out;
}

/* ========== SCROLLBAR STYLING ========== */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--refresh-gray-100);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb {
    background: var(--refresh-gray-300);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--refresh-gray-400);
}

/* ========== ALLOCATION BADGES FIX ========== */
/* Note: Removed override of .badge.bg-warning to preserve semantic warning colors
   for status indicators like "OK", "Understaffed" in Project Modelling page */

/* Allocation percentage badges - make them subtle */
/* Only target allocation-specific badges, NOT semantic status badges */
.allocation-badge,
.badge-allocation {
    background: var(--refresh-primary-light) !important;
    color: var(--refresh-primary) !important;
    font-weight: 500 !important;
    border: 1px solid var(--refresh-primary) !important;
}

/* Assignment Status badges - only override specific assignment status classes */
/* Bootstrap semantic classes (bg-success, bg-danger, bg-warning, bg-primary) are NOT overridden
   to preserve business-meaningful colors in Project Modelling and Forecast Reports */
.badge-status.Booked,
.assignment-status-badge.Booked {
    background: var(--refresh-success) !important;
    color: white !important;
    border: none !important;
}

.badge-status.Planned,
.assignment-status-badge.Planned {
    background: var(--refresh-gray-200) !important;
    color: var(--refresh-gray-700) !important;
    border: none !important;
}

.badge-status.Complete,
.assignment-status-badge.Complete {
    background: var(--refresh-primary) !important;
    color: white !important;
    border: none !important;
}

/* ========== VIEW ALL DROPDOWN FIX ========== */
.btn-outline-secondary {
    color: var(--refresh-gray-600) !important;
    border-color: var(--refresh-gray-300) !important;
}

.btn-outline-secondary:hover {
    background: var(--refresh-gray-100) !important;
    color: var(--refresh-gray-800) !important;
    border-color: var(--refresh-gray-400) !important;
}

/* Details button styling */
.btn-sm.btn-outline-secondary,
.btn-details {
    padding: 0.25rem 0.5rem !important;
    font-size: 0.75rem !important;
}

/* ========== TABLE CELL BADGES ========== */
table .badge {
    font-size: 0.75rem !important;
    padding: 0.25em 0.5em !important;
}

/* ========== UTILIZATION SUMMARY STYLING ========== */
.utilization-bar,
.progress-bar.bg-primary {
    background: linear-gradient(90deg, var(--refresh-primary) 0%, var(--refresh-info) 100%) !important;
}

.progress-bar.bg-success {
    background: var(--refresh-success) !important;
}

.progress-bar.bg-warning {
    background: var(--refresh-warning) !important;
}

.progress-bar.bg-danger {
    background: var(--refresh-danger) !important;
}

/* ========== RECENT ACTIVITY LIST ========== */
.list-group {
    border-radius: 0.5rem !important;
    overflow: hidden;
}

.list-group-item {
    font-size: 0.875rem !important;
}

.list-group-item small,
.list-group-item .text-muted {
    color: var(--refresh-gray-500) !important;
}

/* Activity icons */
.list-group-item .fa,
.list-group-item .fas,
.list-group-item .far {
    color: var(--refresh-primary) !important;
}

/* ========== PROJECT STATUS CHART AREA ========== */
.chart-legend,
[class*="legend"] {
    font-size: 0.8125rem !important;
    color: var(--refresh-gray-600) !important;
}

/* ========== TOP CLIENTS TABLE ========== */
.table-sm {
    font-size: 0.875rem !important;
}

.table-sm th {
    font-size: 0.75rem !important;
    color: var(--refresh-gray-500) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    font-weight: 600 !important;
}

/* ========== CARD TITLE REFINEMENTS ========== */
.card-title,
.card-header h5,
.card-header h6 {
    font-size: 0.9375rem !important;
    font-weight: 600 !important;
    color: var(--refresh-gray-800) !important;
    margin-bottom: 0 !important;
}

/* ========== DATE RANGE DISPLAY ========== */
.text-muted {
    color: var(--refresh-gray-500) !important;
}

/* ========== ASSIGNMENT TABLE FIXES ========== */
.table td a {
    color: var(--refresh-primary) !important;
    font-weight: 500 !important;
}

.table td a:hover {
    color: var(--refresh-primary-hover) !important;
    text-decoration: underline !important;
}

/* Role column text */
.table td {
    color: var(--refresh-gray-700) !important;
}

/* ========== FOOTER ========== */
footer,
.footer {
    color: var(--refresh-gray-500) !important;
    font-size: 0.8125rem !important;
}

footer a,
.footer a {
    color: var(--refresh-primary) !important;
}

/* ========== PAGE HEADER ICON FIX ========== */
h1 i.text-primary,
h2 i.text-primary,
.h1 i.text-primary,
.h2 i.text-primary,
main i.text-primary {
    color: var(--refresh-primary) !important;
}

/* Dashboard header specifically */
main h1 i,
main .h1 i {
    color: var(--refresh-primary) !important;
}

/* ========== PREV/TODAY/NEXT NAVIGATION FIX ========== */
.dashboard-nav-btn.btn-outline-primary,
.btn-group .btn-outline-primary {
    color: var(--refresh-primary) !important;
    border-color: var(--refresh-primary) !important;
    background: transparent !important;
}

.dashboard-nav-btn.btn-outline-primary:hover,
.btn-group .btn-outline-primary:hover {
    background: var(--refresh-primary) !important;
    color: white !important;
}

.dashboard-nav-btn.btn-primary,
.btn-group .btn-primary {
    background: var(--refresh-primary) !important;
    border-color: var(--refresh-primary) !important;
    color: white !important;
}

/* Prev/Today/Next links */
.dashboard-nav-link,
a.link-primary {
    color: var(--refresh-primary) !important;
    font-weight: 500 !important;
}

.dashboard-nav-link:hover,
a.link-primary:hover {
    color: var(--refresh-primary-hover) !important;
}

/* ========== CARD HEADER ICONS FIX ========== */
.card-header i,
.card-header .fa,
.card-header .fas,
.card-header .far {
    color: var(--refresh-primary) !important;
}

/* ========== CHART.JS COLOR OVERRIDES ========== */
/* These will be applied via JavaScript, but we can style the container */
.chart-container {
    background: white !important;
    border-radius: 0.5rem !important;
}

/* Chart legend text */
.chart-legend span,
canvas + div span {
    color: var(--refresh-gray-600) !important;
}

/* ========== KPI CARD ICON FIXES ========== */
.alert i,
.alert .fa,
.alert .fas {
    opacity: 0.9;
}

/* ========== EMPTY STATE ICONS ========== */
.text-center.text-muted i {
    color: var(--refresh-gray-400) !important;
}

/* ========== VIEW ALL BUTTON ARROWS ========== */
.btn i.fa-arrow-right {
    color: inherit !important;
}

/* ========== PROJECT WIZARD STYLING ========== */
/* Update wizard step indicators to use indigo palette */
.wizard-step.active .wizard-step-number {
    background-color: var(--refresh-primary) !important;
    color: white !important;
}

.wizard-step.active .wizard-step-title {
    color: var(--refresh-primary) !important;
    font-weight: 600 !important;
}

.wizard-step.completed .wizard-step-number {
    background-color: var(--refresh-success) !important;
    color: white !important;
}

.wizard-step.completed .wizard-step-title {
    color: var(--refresh-success) !important;
}

.wizard-connector.completed {
    background-color: var(--refresh-success) !important;
}

/* Tag selector styling for wizard */
.tag-selector-container {
    border: 1px solid var(--refresh-gray-200) !important;
    border-radius: 0.75rem !important;
    background-color: var(--refresh-gray-50) !important;
}

.tag-search-input:focus {
    border-color: var(--refresh-primary) !important;
    box-shadow: 0 0 0 0.2rem rgba(79, 70, 229, 0.25) !important;
}

.selected-tag-chip {
    background-color: var(--refresh-primary) !important;
    color: white !important;
    border-radius: 1rem !important;
}

.tag-group-title {
    color: var(--refresh-gray-700) !important;
}

/* ========== PROJECT DETAILS PAGE STYLING ========== */
/* NOTE: Do NOT override .sticky-nav background - preserve original white background with pill tabs */
/* Only style nav-anchor text colors for visibility */

/* Project card headers - glass-morphism with consistent styling */
.project-card-header {
    background: var(--refresh-glass-bg) !important;
    backdrop-filter: var(--refresh-glass-blur) !important;
    -webkit-backdrop-filter: var(--refresh-glass-blur) !important;
    border-bottom: 1px solid var(--refresh-gray-200) !important;
}

.project-card-header h5 {
    color: var(--refresh-gray-800) !important;
    font-weight: 600 !important;
    font-size: 1rem !important;
    margin-bottom: 0 !important;
}

/* Card header icons - consistent indigo color */
.project-card-header i.fas,
.project-card-header i.far {
    color: var(--refresh-primary) !important;
}

/* Project card body */
.project-card {
    border-radius: 0.75rem !important;
    box-shadow: var(--refresh-shadow) !important;
    border: 1px solid var(--refresh-gray-200) !important;
}

/* Project action bar - flex container with proper spacing */
.project-action-bar {
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
}

/* Base button styling for action bar */
.project-action-bar .btn {
    border-radius: 0.5rem !important;
    font-size: 0.875rem !important;
    padding: 0.4rem 0.875rem !important;
    font-weight: 500 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.375rem !important;
}

/* Edit button - primary indigo action */
.project-action-bar .btn-outline-primary {
    color: var(--refresh-primary) !important;
    border-color: var(--refresh-primary) !important;
    background: transparent !important;
}

.project-action-bar .btn-outline-primary:hover {
    background: var(--refresh-primary) !important;
    color: white !important;
    border-color: var(--refresh-primary) !important;
}

.project-action-bar .btn-outline-primary i {
    color: var(--refresh-primary) !important;
}

.project-action-bar .btn-outline-primary:hover i {
    color: white !important;
}

/* Clone button - secondary neutral action */
.project-action-bar .btn-outline-secondary {
    color: var(--refresh-gray-600) !important;
    border-color: var(--refresh-gray-300) !important;
    background: transparent !important;
}

.project-action-bar .btn-outline-secondary:hover {
    background: var(--refresh-gray-100) !important;
    color: var(--refresh-gray-700) !important;
    border-color: var(--refresh-gray-400) !important;
}

.project-action-bar .btn-outline-secondary i {
    color: var(--refresh-gray-500) !important;
}

.project-action-bar .btn-outline-secondary:hover i {
    color: var(--refresh-gray-700) !important;
}

/* Delete button - destructive coral action (all elements coral) */
.project-action-bar .btn-outline-danger {
    color: var(--refresh-accent) !important;
    border-color: var(--refresh-accent) !important;
    background: transparent !important;
}

.project-action-bar .btn-outline-danger:hover {
    background: var(--refresh-accent) !important;
    color: white !important;
    border-color: var(--refresh-accent) !important;
}

.project-action-bar .btn-outline-danger i {
    color: var(--refresh-accent) !important;
}

.project-action-bar .btn-outline-danger:hover i {
    color: white !important;
}

/* Legacy btn-group fallback - same styling */
.project-card-header .btn-group {
    display: flex !important;
    gap: 0.5rem !important;
}

.project-card-header .btn-group .btn {
    border-radius: 0.5rem !important;
    font-size: 0.875rem !important;
    padding: 0.4rem 0.875rem !important;
    font-weight: 500 !important;
}

.project-card-header .btn-group .btn-outline-primary {
    color: var(--refresh-primary) !important;
    border-color: var(--refresh-primary) !important;
}

.project-card-header .btn-group .btn-outline-secondary {
    color: var(--refresh-gray-600) !important;
    border-color: var(--refresh-gray-300) !important;
}

.project-card-header .btn-group .btn-outline-danger {
    color: var(--refresh-accent) !important;
    border-color: var(--refresh-accent) !important;
}

.project-card-header .btn-group .btn-outline-danger i {
    color: var(--refresh-accent) !important;
}

/* Tag chips in Tags & Classification - uniform indigo palette */
.tag-chip {
    background-color: var(--refresh-primary-light) !important;
    color: var(--refresh-primary) !important;
    border-radius: 1rem !important;
    font-weight: 500 !important;
}

/* Tag group labels */
.tag-group-label {
    color: var(--refresh-gray-700) !important;
    border-bottom-color: var(--refresh-gray-200) !important;
}

.tag-group-label i {
    color: var(--refresh-primary) !important;
}

/* ========== CONSULTANT DETAIL PAGE ========== */

/* Skills card dropdown z-index fix - ensure dropdown appears above sibling cards.
   The hover transform on cards creates a new stacking context, so we need to:
   1. Give skills-card a higher z-index
   2. Disable hover transform on sibling cards that could overlap */
#skills-card {
    position: relative;
    z-index: 50;
}

#skills-card #skills-edit-mode {
    position: relative;
    z-index: 100;
}

/* Disable hover transform on cards that are siblings to skills-card to prevent
   them from creating stacking contexts that override the skills dropdown z-index */
#experience-card.card:hover,
#certifications-card.card:hover,
#education-card.card:hover,
#languages-card.card:hover {
    transform: none;
}

/* Consultant action bar - header buttons with proper spacing */
.consultant-action-bar {
    flex-wrap: wrap;
}

.consultant-action-bar .btn {
    border-radius: 0.5rem !important;
    font-weight: 500 !important;
}

/* Coral styling for Deactivate button */
.consultant-action-bar .btn-outline-danger {
    color: var(--refresh-accent) !important;
    border-color: var(--refresh-accent) !important;
    background: transparent !important;
}

.consultant-action-bar .btn-outline-danger:hover {
    background: var(--refresh-accent) !important;
    color: white !important;
    border-color: var(--refresh-accent) !important;
}

.consultant-action-bar .btn-outline-danger i {
    color: var(--refresh-accent) !important;
}

.consultant-action-bar .btn-outline-danger:hover i {
    color: white !important;
}

/* CV & Documents action buttons - coral delete pattern */
.consultant-doc-actions .btn-outline-danger {
    color: var(--refresh-accent) !important;
    border-color: var(--refresh-accent) !important;
    background: transparent !important;
}

.consultant-doc-actions .btn-outline-danger:hover {
    background: var(--refresh-accent) !important;
    color: white !important;
    border-color: var(--refresh-accent) !important;
}

.consultant-doc-actions .btn-outline-danger i {
    color: var(--refresh-accent) !important;
}

.consultant-doc-actions .btn-outline-danger:hover i {
    color: white !important;
}

/* ========== ANNOUNCEMENT BANNERS ========== */
.announcement-banner {
    padding: 0.75rem 0;
    font-size: 0.875rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    position: relative;
    z-index: 1030;
}

.announcement-info {
    background: linear-gradient(135deg, var(--refresh-primary) 0%, var(--refresh-primary-dark) 100%);
    color: white;
}

.announcement-warning {
    background: linear-gradient(135deg, var(--refresh-accent) 0%, #EA580C 100%);
    color: white;
}

.announcement-success {
    background: linear-gradient(135deg, #10B981 0%, #059669 100%);
    color: white;
}

.announcement-banner strong {
    font-weight: 600;
}

.btn-close-announcement {
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.8);
    padding: 0.25rem 0.5rem;
    cursor: pointer;
    border-radius: 0.25rem;
    transition: all 0.15s ease;
}

.btn-close-announcement:hover {
    color: white;
    background: rgba(255, 255, 255, 0.2);
}

.btn-close-announcement i {
    font-size: 0.75rem;
}

/* ========== DASHBOARD BUTTON SPACING FIX ========== */
/* Add gap between period buttons (Week/Month/Quarter/Year) */
.dashboard-nav-group.btn-group {
    gap: 0.25rem !important;
}

.dashboard-nav-group.btn-group .btn {
    border-radius: 0.5rem !important;
    margin-left: 0 !important;
}

/* Add more spacing between period buttons and Prev/Today/Next nav */
.dashboard-time-nav {
    margin-left: 1rem !important;
    gap: 0.75rem !important;
}

/* Mobile adjustments for dashboard nav */
@media (max-width: 767px) {
    .dashboard-nav-group.btn-group {
        gap: 0.125rem !important;
    }
    
    .dashboard-time-nav {
        margin-left: 0.5rem !important;
        gap: 0.5rem !important;
    }
}

/* ========== REVVY MODAL DESIGN REFRESH ========== */
/* Update Revvy modal to use indigo design system */
#revvyPalette .modal-content {
    border-radius: 0.75rem !important;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04) !important;
    overflow: hidden !important;
}

#revvyPalette .modal-header {
    background: linear-gradient(135deg, var(--refresh-primary) 0%, var(--refresh-primary-dark) 100%) !important;
    border-bottom: none !important;
    color: white !important;
}

#revvyPalette .modal-header .modal-title {
    color: white !important;
}

#revvyPalette .modal-header i {
    color: rgba(255, 255, 255, 0.9) !important;
}

/* Input focus state */
#revvyPalette #revvy-input:focus {
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.15) !important;
    border-color: var(--refresh-primary) !important;
    outline: none !important;
}

/* Spinner */
#revvyPalette .spinner-border.text-primary {
    color: var(--refresh-primary) !important;
}

/* Action item icons */
#revvyPalette .revvy-item-icon {
    background-color: var(--refresh-primary-light) !important;
    color: var(--refresh-primary) !important;
}

/* List item hover */
#revvyPalette .revvy-item:hover,
#revvyPalette .revvy-item.active {
    background-color: var(--refresh-primary-light) !important;
}

/* Footer styling */
#revvyPalette .modal-footer {
    background-color: #FAFAFA !important;
    border-top: 1px solid #E5E7EB !important;
}

#revvyPalette .modal-footer .text-primary,
#revvyPalette .modal-footer i.text-primary {
    color: var(--refresh-primary) !important;
}

/* Answer section icon */
#revvyPalette #revvy-answer i.text-primary,
#revvyPalette #revvy-answer .fa-robot {
    color: var(--refresh-primary) !important;
}

/* Result cards hover accent */
#revvyPalette .revvy-card.list-group-item:hover {
    border-left-color: var(--refresh-primary) !important;
}

/* Section headers */
#revvyPalette .text-muted.small {
    color: var(--refresh-gray-500) !important;
}

/* Links inside Revvy */
#revvyPalette a.text-primary,
#revvyPalette .link-primary {
    color: var(--refresh-primary) !important;
}

#revvyPalette a.text-primary:hover,
#revvyPalette .link-primary:hover {
    color: var(--refresh-primary-hover) !important;
}

/* ========== DELETE/DESTRUCTIVE ACTION BUTTONS ========== */
/* Coral accent for delete/destructive action icons */
.delete-action-btn {
    color: var(--refresh-accent) !important;
}

.delete-action-btn:hover {
    color: var(--refresh-accent-hover) !important;
    border-color: var(--refresh-accent) !important;
}

@media (max-width: 767.98px) {
    .project-action-bar .btn-outline-danger.mobile-hide-delete,
    .btn-group-sm .btn-outline-danger.mobile-hide-delete {
        display: none !important;
    }
}