/* ========================================
   THEME-AWARE ICON SYSTEM
   Modern CSS best practices for icon visibility
   ======================================== */

/* CSS Custom Properties for Theme Colors */
:root {
    /* Light theme colors */
    --icon-primary: #374151;
    --icon-secondary: #6b7280;
    --icon-muted: #9ca3af;
    --icon-hover: #1f2937;
    --icon-background: #ffffff;
    --icon-border: #d1d5db;
    --icon-hover-bg: #f3f4f6;
}

/* Dark theme colors */
[data-theme="dark"],
.dark-mode {
    --icon-primary: #e5e7eb;
    --icon-secondary: #9ca3af;
    --icon-muted: #6b7280;
    --icon-hover: #f9fafb;
    --icon-background: #1f2937;
    --icon-border: #4b5563;
    --icon-hover-bg: #374151;
}

/* ========================================
   MATERIAL ICONS THEME AWARENESS
   ======================================== */

/* Base material icon styling */
.material-icons {
    color: var(--icon-primary);
    transition: color 0.2s ease;
    font-size: 1.4em ; /* Make icons bigger globally (+0.2em more) */
}

/* Icons in buttons inherit button color */
.btn .material-icons,
button .material-icons,
a .material-icons {
    color: currentColor;
    font-size: inherit;
}

/* ========================================
   OUTLINE BUTTON ICONS
   ======================================== */

/* Modern outline button with proper contrast */
.btn-outline {
    background: transparent;
    color: var(--icon-primary);
    border: 1px solid var(--icon-border);
    transition: all 0.2s ease;
    position: relative;
    overflow: hidden;
}

.btn-outline:hover {
    background: var(--icon-hover-bg);
    color: var(--icon-hover);
    border-color: var(--primary, #22c55e);
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.btn-outline:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.1);
}

/* Ensure icons in outline buttons are visible */
.btn-outline .material-icons {
    color: currentColor;
    opacity: 1;
}

/* ========================================
   SPECIFIC ICON FIXES
   ======================================== */

/* User count icon specific styling */
.user-count .btn-outline {
    min-width: 32px;
    min-height: 32px;
    padding: 0.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.user-count .btn-outline .material-icons {
    font-size: 1.6rem; /* +0.2rem bigger */
    color: var(--icon-primary);
}

/* User count badge icons - force white color with maximum specificity */
.user-count-link .count-badge .material-icons,
a.user-count-link .count-badge .material-icons,
.user-count-link span.count-badge .material-icons {
    font-size: 1.4rem ; /* +0.2rem bigger */
    color: white ; /* Force white color for visibility */
    opacity: 1 ; /* Full opacity */
    fill: white ; /* For SVG icons */
}

/* Ensure white icons in all badge contexts with maximum specificity */
.count-badge .material-icons,
.badge .material-icons,
span.count-badge .material-icons,
div.count-badge .material-icons {
    color: white ;
    opacity: 1 ;
    fill: white ;
}

/* Override any theme colors for badge icons */
[data-theme] .count-badge .material-icons,
.dark-mode .count-badge .material-icons,
.light-mode .count-badge .material-icons {
    color: white ;
    fill: white ;
}

/* Workplace icons - force white color with maximum specificity */
.workplace-icon .material-icons,
.workplace-icon i.material-icons,
div.workplace-icon .material-icons,
.workplace-info .workplace-icon .material-icons,
.workplace-item .workplace-icon .material-icons,
.current-workplace .workplace-icon .material-icons {
    color: white ;
    opacity: 1 ;
    fill: white ;
    -webkit-text-fill-color: white ;
    text-fill-color: white ;
}

/* Override any theme colors for workplace icons */
[data-theme] .workplace-icon .material-icons,
.dark-mode .workplace-icon .material-icons,
.light-mode .workplace-icon .material-icons {
    color: white ;
    fill: white ;
}

/* Workplace icon container styling */
.workplace-icon {
    background: var(--primary, #3f51b5) ;
    color: white ;
}

/* Ensure workplace icons are visible in all contexts */
.workplace-item .workplace-icon .material-icons,
.current-workplace .workplace-icon .material-icons {
    color: white ;
    opacity: 1 ;
    fill: white ;
}

/* Action button icons */
.action-buttons .btn-outline .material-icons {
    font-size: 1.5rem; /* +0.2rem bigger */
    color: var(--icon-primary);
}

/* ========================================
   THEME DETECTION AND FALLBACKS
   ======================================== */

/* Force icon visibility with explicit colors as fallback */
.btn-outline .material-icons {
    color: var(--icon-primary, #374151);
}

[data-theme="dark"] .btn-outline .material-icons,
.dark-mode .btn-outline .material-icons {
    color: var(--icon-primary, #e5e7eb);
}

/* Additional fallback for browsers that don't support CSS variables */
.btn-outline .material-icons {
    color: #374151;
}

.dark-mode .btn-outline .material-icons {
    color: #e5e7eb;
}

/* ========================================
   ACCESSIBILITY AND CONTRAST
   ======================================== */

/* Ensure sufficient contrast ratio (4.5:1 minimum) */
.btn-outline {
    /* Light mode: #374151 on white = 8.5:1 contrast ratio */
    /* Dark mode: #e5e7eb on dark = 12.6:1 contrast ratio */
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .btn-outline {
        border-width: 2px;
    }
    
    .btn-outline .material-icons {
        color: #000000;
    }
    
    .dark-mode .btn-outline .material-icons {
        color: #ffffff;
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .btn-outline {
        transition: none;
    }
    
    .btn-outline:hover {
        transform: none;
    }
}

/* ========================================
   RESPONSIVE ICON SIZING
   ======================================== */

/* Mobile-friendly icon sizes */
@media (max-width: 640px) {
    .user-count .btn-outline .material-icons {
        font-size: 1.5rem; /* +0.2rem bigger on mobile too */
    }
    
    .action-buttons .btn-outline .material-icons {
        font-size: 1.4rem; /* +0.2rem bigger on mobile too */
    }
}

/* ========================================
   ICON STATES AND INTERACTIONS
   ======================================== */

/* Active state */
.btn-outline:active {
    transform: translateY(0);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* Disabled state */
.btn-outline:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

.btn-outline:disabled .material-icons {
    opacity: 0.5;
}

/* ========================================
   SPECIFIC THEME OVERRIDES
   ======================================== */

/* Blue theme */
[data-theme="blue"] .btn-outline:hover {
    border-color: #3f51b5;
    color: #1e40af;
}

/* Green theme */
[data-theme="green"] .btn-outline:hover {
    border-color: #22c55e;
    color: #15803d;
}

/* Purple theme */
[data-theme="purple"] .btn-outline:hover {
    border-color: #8b5cf6;
    color: #6d28d9;
}

/* ========================================
   UTILITY CLASSES
   ======================================== */

/* Icon visibility utilities */
.icon-visible {
    opacity: 1 ;
    color: var(--icon-primary) ;
}

.icon-hidden {
    opacity: 0.3;
}

/* Force icon color */
.icon-primary {
    color: var(--icon-primary) ;
}

.icon-secondary {
    color: var(--icon-secondary) ;
}

.icon-muted {
    color: var(--icon-muted) ;
}