/* Original Mailu admin styles */
.mailu-logo{opacity:.8}.bg-mailu-logo{background-color:#2980b9!important}.div-circle{background-color:#fff;border-radius:50%;height:2.1rem;opacity:.8;position:relative;width:2.1rem}.div-circle>i{display:block;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%)}.pre-config{word-wrap:anywhere;border-radius:4px;margin:0;padding:9px;white-space:pre-wrap}legend{font-size:inherit}fieldset:disabled :not(legend) label{opacity:.5}fieldset:disabled .form-control:disabled{color:gray}.sidebar .nav-link p i{transition:margin-left .3s linear,opacity .3s ease,visibility .3s ease}.select2-container--default .select2-selection--multiple .select2-selection__choice{color:#000}.input-group-text{margin-right:1em}.mailu-version{font-size:60%;line-height:0}

/* AI Civic Solutions Custom Branding */
/* Import Manrope and Inter fonts to match AICivicSolutions branding */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;500;600;700&family=Inter:wght@300;400;500;600;700&display=swap');

/* CSS Variables for AI Civic Solutions branding */
:root {
  --primary-blue: #4338CA;
  --light-blue: #E0E7FF;
  --background-blue: #F0F4F8;
  --text-dark: #1E293B;
  --text-medium: #475569;
  --text-light: #64748B;
  --white: #FFFFFF;
  --border-light: #E2E8F0;
  --success-green: #10B981;
  --warning-yellow: #F59E0B;
  --error-red: #EF4444;
}

/* Global font override to match AICivicSolutions */
* {
  font-family: 'Manrope', 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}

/* Body and main layout */
body {
  background-color: var(--background-blue) !important;
  color: var(--text-dark) !important;
}

/* Header styling - Override Mailu's default header */
body .navbar,
body .main-header,
html body .navbar,
html body .main-header {
  background: linear-gradient(135deg, var(--primary-blue) 0%, #5B46E5 100%) !important;
  border: none !important;
  box-shadow: 0 2px 4px rgba(67, 56, 202, 0.2) !important;
}

.navbar-brand,
.navbar .nav-link,
.main-header .nav-link {
  color: var(--white) !important;
  font-weight: 500 !important;
}

.navbar .nav-link:hover,
.main-header .nav-link:hover {
  color: var(--light-blue) !important;
  background-color: rgba(255, 255, 255, 0.1) !important;
  border-radius: 6px !important;
}

/* Override Mailu logo background */
.bg-mailu-logo {
  background: linear-gradient(135deg, var(--primary-blue) 0%, #5B46E5 100%) !important;
}

/* Brand text styling */
.brand-text {
  color: var(--white) !important;
  font-weight: 600 !important;
}

/* Sidebar styling */
.main-sidebar {
  background-color: var(--white) !important;
  border-radius: 0 8px 8px 0 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
}

.sidebar .nav-link {
  color: var(--text-medium) !important;
  font-weight: 400 !important;
  border-radius: 6px !important;
  margin: 4px 8px !important;
  padding: 12px 16px !important;
}

.sidebar .nav-link:hover {
  background-color: var(--light-blue) !important;
  color: var(--primary-blue) !important;
  font-weight: 500 !important;
}

.sidebar .nav-link.active {
  background-color: var(--primary-blue) !important;
  color: var(--white) !important;
  font-weight: 600 !important;
}

/* Content wrapper */
.content-wrapper {
  background-color: var(--background-blue) !important;
}

/* Cards and main content */
.card,
.box {
  background-color: var(--white) !important;
  border-radius: 8px !important;
  border: 1px solid var(--border-light) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
  margin: 16px !important;
}

.card-header,
.box-header {
  background-color: var(--background-blue) !important;
  border-bottom: 1px solid var(--border-light) !important;
  border-radius: 8px 8px 0 0 !important;
  color: var(--text-dark) !important;
  font-weight: 600 !important;
  padding: 16px 24px !important;
}

.card-body,
.box-body {
  padding: 24px !important;
}

/* Form styling */
.form-control {
  border: 1px solid var(--border-light) !important;
  border-radius: 6px !important;
  font-size: 14px !important;
  padding: 12px 16px !important;
  color: var(--text-dark) !important;
}

.form-control:focus {
  border-color: var(--primary-blue) !important;
  box-shadow: 0 0 0 3px rgba(67, 56, 202, 0.1) !important;
}

.form-label,
label {
  color: var(--text-dark) !important;
  font-weight: 500 !important;
  margin-bottom: 8px !important;
}

/* Button styling */
.btn-primary {
  background-color: var(--primary-blue) !important;
  border-color: var(--primary-blue) !important;
  color: var(--white) !important;
  font-weight: 500 !important;
  border-radius: 6px !important;
  padding: 10px 20px !important;
}

.btn-primary:hover {
  background-color: #3730A3 !important;
  border-color: #3730A3 !important;
  transform: translateY(-1px) !important;
}

.btn-secondary {
  background-color: transparent !important;
  border: 1px solid var(--primary-blue) !important;
  color: var(--primary-blue) !important;
  font-weight: 500 !important;
  border-radius: 6px !important;
}

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

.btn-success {
  background-color: var(--success-green) !important;
  border-color: var(--success-green) !important;
}

.btn-warning {
  background-color: var(--warning-yellow) !important;
  border-color: var(--warning-yellow) !important;
}

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

/* Table styling */
.table {
  color: var(--text-dark) !important;
}

.table th {
  background-color: var(--background-blue) !important;
  color: var(--text-dark) !important;
  font-weight: 600 !important;
  border-bottom: 1px solid var(--border-light) !important;
  padding: 16px !important;
}

.table td {
  border-bottom: 1px solid var(--border-light) !important;
  padding: 12px 16px !important;
  color: var(--text-medium) !important;
}

.table-striped tbody tr:nth-of-type(odd) {
  background-color: var(--background-blue) !important;
}

.table-hover tbody tr:hover {
  background-color: var(--light-blue) !important;
}

/* Alert styling */
.alert {
  border-radius: 6px !important;
  border: none !important;
  font-weight: 500 !important;
}

.alert-success {
  background-color: var(--success-green) !important;
  color: var(--white) !important;
}

.alert-warning {
  background-color: var(--warning-yellow) !important;
  color: var(--white) !important;
}

.alert-danger {
  background-color: var(--error-red) !important;
  color: var(--white) !important;
}

.alert-info {
  background-color: var(--primary-blue) !important;
  color: var(--white) !important;
}

/* Footer styling */
.main-footer {
  background-color: var(--white) !important;
  border-top: 1px solid var(--border-light) !important;
  padding: 16px 24px !important;
  text-align: center !important;
  color: var(--text-medium) !important;
}

.main-footer a {
  color: var(--primary-blue) !important;
  text-decoration: none !important;
  font-weight: 500 !important;
}

.main-footer a:hover {
  color: #3730A3 !important;
}

/* Typography improvements */
h1, h2, h3, h4, h5, h6 {
  color: var(--text-dark) !important;
  font-weight: 600 !important;
}

p {
  color: var(--text-medium) !important;
  line-height: 1.6 !important;
}

.text-muted {
  color: var(--text-light) !important;
}

/* Login page specific styling */
body .login-box,
html body .login-box {
  background-color: var(--white) !important;
  border-radius: 8px !important;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1) !important;
  border: 1px solid var(--border-light) !important;
}

/* Force background color change for testing */
body {
  background: #4338CA !important;
}

/* Force visible branding test - very specific selectors */
html body .login-logo a,
html body .brand-text,
html body .navbar-brand {
  color: #FFFFFF !important;
  font-weight: 700 !important;
  background: #4338CA !important;
  padding: 5px 10px !important;
  border-radius: 4px !important;
}

/* Make it impossible to miss */
html body .login-box {
  border: 5px solid #4338CA !important;
  background: #E0E7FF !important;
}

/* Test to make sure CSS is loading */
html body::before {
  content: "AI CIVIC SOLUTIONS CSS LOADED" !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  background: #4338CA !important;
  color: white !important;
  padding: 10px !important;
  z-index: 99999 !important;
  font-weight: bold !important;
}

/* BRANDING CSS - HIGHEST PRIORITY - LOADED AFTER ADMINLTE */
/* Override AdminLTE with extreme specificity */

body.hold-transition.sidebar-mini.layout-fixed {
  background-color: #F0F4F8 !important;
  font-family: 'Manrope', 'Inter', system-ui, sans-serif !important;
}

nav.main-header.navbar.navbar-expand.navbar-white.navbar-light {
  background: linear-gradient(135deg, #4338CA 0%, #5B46E5 100%) !important;
  border: none !important;
  box-shadow: 0 2px 4px rgba(67, 56, 202, 0.2) !important;
}

.main-header .navbar-nav .nav-link {
  color: #FFFFFF !important;
}

.main-header .navbar-nav .nav-link:hover {
  color: #E0E7FF !important;
  background-color: rgba(255, 255, 255, 0.1) !important;
}

aside.main-sidebar.sidebar-dark-primary.nav-compact.elevation-4 {
  background-color: #FFFFFF !important;
}

.main-sidebar .nav-sidebar .nav-link {
  color: #475569 !important;
}

.main-sidebar .nav-sidebar .nav-link:hover {
  background-color: #E0E7FF !important;
  color: #4338CA !important;
}

.login-card-body {
  background-color: var(--white) !important;
  padding: 32px !important;
}

.login-logo {
  margin-bottom: 24px !important;
}

.login-logo a {
  color: var(--primary-blue) !important;
  font-weight: 600 !important;
  text-decoration: none !important;
}

/* Override AdminLTE dark styles */
.sidebar-dark-primary .nav-sidebar > .nav-item > .nav-link {
  color: var(--text-medium) !important;
}

.sidebar-dark-primary .nav-sidebar > .nav-item > .nav-link:hover {
  background-color: var(--light-blue) !important;
  color: var(--primary-blue) !important;
}

/* Dropdown styling */
.dropdown-menu {
  border: 1px solid var(--border-light) !important;
  border-radius: 6px !important;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1) !important;
}

.dropdown-item {
  color: var(--text-medium) !important;
  font-weight: 400 !important;
}

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

/* Smooth transitions */
* {
  transition: all 0.2s ease !important;
}

/* Custom scrollbars */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

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

::-webkit-scrollbar-thumb {
  background: var(--primary-blue);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #3730A3;
}

/* Font Awesome Icon Fixes */
/* Ensure Font Awesome is loaded */
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css');

/* Fix icon display and alignment */
i.fa,
i.fas,
i.far,
i.fab {
  display: inline-block !important;
  font-style: normal !important;
  font-variant: normal !important;
  text-rendering: auto !important;
  -webkit-font-smoothing: antialiased !important;
  font-size: 16px !important;
  line-height: 1 !important;
  vertical-align: middle !important;
}

/* Icon in buttons */
.btn i.fa,
.btn i.fas,
.btn i.far {
  margin-right: 6px !important;
  font-size: 14px !important;
}

/* Standalone action icons */
a > i.fa,
a > i.fas,
a > i.far {
  font-size: 18px !important;
  padding: 4px !important;
  margin: 0 4px !important;
  color: var(--text-medium) !important;
  transition: all 0.2s ease !important;
}

a:hover > i.fa,
a:hover > i.fas,
a:hover > i.far {
  color: var(--primary-blue) !important;
  transform: scale(1.1) !important;
}

/* Delete icon - red color */
a > i.fa-trash,
a > i.fas.fa-trash {
  color: var(--error-red) !important;
}

a:hover > i.fa-trash,
a:hover > i.fas.fa-trash {
  color: #DC2626 !important;
}

/* Edit icon - blue color */
a > i.fa-pencil-alt,
a > i.fas.fa-pencil-alt {
  color: var(--primary-blue) !important;
}

a:hover > i.fa-pencil-alt,
a:hover > i.fas.fa-pencil-alt {
  color: #3730A3 !important;
}

/* List/Details icon */
a > i.fa-list,
a > i.fas.fa-list {
  color: var(--text-medium) !important;
}

/* Success/Error status icons */
i.fa-check-circle.text-success {
  color: var(--success-green) !important;
  font-size: 18px !important;
}

i.fa-exclamation-circle.text-danger {
  color: var(--error-red) !important;
  font-size: 18px !important;
}

/* Navigation icons in sidebar */
.nav-icon {
  font-size: 18px !important;
  margin-right: 8px !important;
  width: 24px !important;
  text-align: center !important;
  color: inherit !important;
}

/* Icon containers with background */
.icon-circle {
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background-color: var(--light-blue) !important;
  color: var(--primary-blue) !important;
  margin-right: 8px !important;
}

.icon-circle i {
  font-size: 16px !important;
  margin: 0 !important;
}

/* Table action icons */
td a > i.fa,
td a > i.fas,
td a > i.far {
  width: 24px !important;
  height: 24px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 4px !important;
  transition: all 0.15s ease !important;
}

td a:hover > i.fa,
td a:hover > i.fas,
td a:hover > i.far {
  background-color: var(--background-blue) !important;
}

/* ENHANCED SIDEBAR ICON STYLING */

/* Fix icon spacing in nav */
.sidebar .nav-link i {
  margin-right: 12px !important;
  width: 22px !important;
  text-align: center !important;
  font-size: 18px !important;
  line-height: 1 !important;
  vertical-align: middle !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.2s ease !important;
}

/* Enhanced sidebar navigation icons */
.sidebar .nav-link {
  display: flex !important;
  align-items: center !important;
  min-height: 44px !important;
  padding: 12px 20px !important;
  margin: 2px 8px !important;
  border-radius: 8px !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
  position: relative !important;
}

/* Icon container for better alignment */
.sidebar .nav-link i {
  flex-shrink: 0 !important;
  width: 24px !important;
  height: 24px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-right: 12px !important;
  font-size: 16px !important;
  color: var(--text-medium) !important;
  transition: all 0.2s ease !important;
}

/* Enhanced hover states for sidebar icons */
.sidebar .nav-link:hover i {
  color: var(--primary-blue) !important;
  transform: scale(1.1) !important;
}

/* Active state for sidebar icons */
.sidebar .nav-link.active i {
  color: var(--white) !important;
  transform: scale(1.05) !important;
}

/* Icon-specific colors for better UX */
.sidebar .nav-link i.fa-tachometer-alt,
.sidebar .nav-link i.fa-dashboard {
  color: #4338CA !important; /* Dashboard - Primary blue */
}

.sidebar .nav-link i.fa-users,
.sidebar .nav-link i.fa-user-circle {
  color: #10B981 !important; /* Users - Green */
}

.sidebar .nav-link i.fa-envelope,
.sidebar .nav-link i.fa-at {
  color: #3B82F6 !important; /* Mail - Blue */
}

.sidebar .nav-link i.fa-shield-alt,
.sidebar .nav-link i.fa-security {
  color: #F59E0B !important; /* Security - Yellow */
}

.sidebar .nav-link i.fa-cog,
.sidebar .nav-link i.fa-settings {
  color: #6B7280 !important; /* Settings - Gray */
}

.sidebar .nav-link i.fa-exclamation-triangle,
.sidebar .nav-link i.fa-ban {
  color: #EF4444 !important; /* Warnings/Blocks - Red */
}

/* Maintain icon colors on hover */
.sidebar .nav-link:hover i.fa-tachometer-alt,
.sidebar .nav-link:hover i.fa-dashboard {
  color: #3730A3 !important;
}

.sidebar .nav-link:hover i.fa-users,
.sidebar .nav-link:hover i.fa-user-circle {
  color: #059669 !important;
}

.sidebar .nav-link:hover i.fa-envelope,
.sidebar .nav-link:hover i.fa-at {
  color: #2563EB !important;
}

.sidebar .nav-link:hover i.fa-shield-alt,
.sidebar .nav-link:hover i.fa-security {
  color: #D97706 !important;
}

.sidebar .nav-link:hover i.fa-cog,
.sidebar .nav-link:hover i.fa-settings {
  color: #4B5563 !important;
}

/* Icon badges for notifications */
.sidebar .nav-link .icon-badge {
  position: absolute !important;
  top: 8px !important;
  left: 28px !important;
  background-color: var(--error-red) !important;
  color: white !important;
  border-radius: 50% !important;
  width: 16px !important;
  height: 16px !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 10 !important;
}

/* Loading state for sidebar icons */
.sidebar .nav-link.loading i {
  opacity: 0.5 !important;
  animation: pulse 1.5s ease-in-out infinite !important;
}

@keyframes pulse {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}

/* Icon focus states for accessibility */
.sidebar .nav-link:focus i,
.sidebar .nav-link:focus-within i {
  outline: 2px solid var(--primary-blue) !important;
  outline-offset: 2px !important;
  border-radius: 4px !important;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .sidebar .nav-link i {
    filter: contrast(2) !important;
  }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .sidebar .nav-link i {
    transition: none !important;
  }
  
  .sidebar .nav-link:hover i {
    transform: none !important;
  }
}

/* Dropdown menu icons */
.dropdown-item i {
  margin-right: 8px !important;
  width: 16px !important;
  text-align: center !important;
  color: inherit !important;
}

/* Loading/spinner icons */
i.fa-spinner,
i.fas.fa-spinner {
  animation: spin 1s linear infinite !important;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* MODERN ICON PATTERN ALTERNATIVES */

/* Outlined icon style variant */
.sidebar .nav-link.icon-outlined i {
  border: 2px solid currentColor !important;
  border-radius: 4px !important;
  padding: 2px !important;
  background-color: transparent !important;
}

.sidebar .nav-link.icon-outlined:hover i {
  background-color: currentColor !important;
  color: var(--white) !important;
}

/* Filled icon background variant */
.sidebar .nav-link.icon-filled i {
  background-color: var(--light-blue) !important;
  border-radius: 6px !important;
  padding: 4px !important;
  color: var(--primary-blue) !important;
}

.sidebar .nav-link.icon-filled:hover i {
  background-color: var(--primary-blue) !important;
  color: var(--white) !important;
}

/* Icon with dot indicator */
.sidebar .nav-link.has-notification::before {
  content: '' !important;
  position: absolute !important;
  top: 10px !important;
  left: 26px !important;
  width: 8px !important;
  height: 8px !important;
  background-color: var(--error-red) !important;
  border-radius: 50% !important;
  border: 2px solid var(--white) !important;
  z-index: 10 !important;
}

/* Modern icon + text combination with better spacing */
.sidebar .nav-link.icon-modern {
  padding: 16px 20px !important;
}

.sidebar .nav-link.icon-modern i {
  width: 28px !important;
  height: 28px !important;
  font-size: 16px !important;
  background: linear-gradient(135deg, var(--light-blue), rgba(67, 56, 202, 0.1)) !important;
  border-radius: 8px !important;
  margin-right: 16px !important;
}

.sidebar .nav-link.icon-modern:hover i {
  background: linear-gradient(135deg, var(--primary-blue), #5B46E5) !important;
  color: var(--white) !important;
  box-shadow: 0 4px 8px rgba(67, 56, 202, 0.3) !important;
}

/* Compact icon style for collapsed sidebar */
.sidebar-collapsed .nav-link {
  justify-content: center !important;
  padding: 12px !important;
}

.sidebar-collapsed .nav-link i {
  margin-right: 0 !important;
  width: 24px !important;
  height: 24px !important;
}

.sidebar-collapsed .nav-link .nav-text {
  display: none !important;
}

/* Icon-only navigation pills */
.sidebar .nav-link.nav-pill {
  width: 44px !important;
  height: 44px !important;
  padding: 0 !important;
  justify-content: center !important;
  border-radius: 22px !important;
  margin: 4px auto !important;
}

.sidebar .nav-link.nav-pill i {
  margin: 0 !important;
  font-size: 18px !important;
}

/* Fix specific problematic icons */
/* Envelope icons */
i.fa-envelope,
i.far.fa-envelope {
  font-family: 'Font Awesome 6 Free' !important;
  font-weight: 400 !important;
}

/* At symbol */
i.fa-at {
  font-family: 'Font Awesome 6 Free' !important;
  font-weight: 900 !important;
}

/* Enhanced icon legibility */
.sidebar .nav-link i {
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  text-rendering: optimizeLegibility !important;
}

/* Dark mode icon adjustments */
@media (prefers-color-scheme: dark) {
  .sidebar .nav-link i {
    filter: brightness(1.2) !important;
  }
}

/* Icon animation on page load */
.sidebar .nav-link i {
  animation: slideInLeft 0.3s ease-out !important;
}

@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-10px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Staggered animation for multiple icons */
.sidebar .nav-link:nth-child(1) i { animation-delay: 0.1s !important; }
.sidebar .nav-link:nth-child(2) i { animation-delay: 0.2s !important; }
.sidebar .nav-link:nth-child(3) i { animation-delay: 0.3s !important; }
.sidebar .nav-link:nth-child(4) i { animation-delay: 0.4s !important; }
.sidebar .nav-link:nth-child(5) i { animation-delay: 0.5s !important; }
.sidebar .nav-link:nth-child(6) i { animation-delay: 0.6s !important; }

/* Dashboard icons */
.info-box-icon {
  font-size: 48px !important;
  line-height: 90px !important;
  color: rgba(255, 255, 255, 0.9) !important;
}

/* Small icon badges */
.badge i.fa,
.label i.fa {
  font-size: 12px !important;
  margin-right: 4px !important;
}

/* Icon buttons with rounded backgrounds */
.btn-icon-round {
  width: 40px !important;
  height: 40px !important;
  padding: 0 !important;
  border-radius: 50% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.btn-icon-round i {
  margin: 0 !important;
  font-size: 18px !important;
}

/* Fix icon vertical alignment in headers */
h1 i.fa,
h2 i.fa,
h3 i.fa,
h4 i.fa,
h5 i.fa,
h6 i.fa {
  vertical-align: baseline !important;
  margin-right: 8px !important;
}

/* ========================================= */
/* ENHANCED SIDEBAR ICON DESIGN SYSTEM     */
/* ========================================= */

/* CSS Custom Properties for Icon System */
:root {
  --icon-size-sm: 14px;
  --icon-size-md: 16px;
  --icon-size-lg: 18px;
  --icon-size-xl: 20px;
  --icon-container-size: 28px;
  --icon-radius: 6px;
  --icon-radius-round: 50%;
  --icon-transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  --icon-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  --icon-shadow-hover: 0 4px 12px rgba(67, 56, 202, 0.25);
}

/* Base Icon Container System */
.sidebar-icon-container {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--icon-container-size);
  height: var(--icon-container-size);
  margin-right: 12px;
  border-radius: var(--icon-radius);
  transition: var(--icon-transition);
  flex-shrink: 0;
}

/* Icon Style Variants */
/* Default/Clean Style */
.sidebar .nav-link.icon-style-clean i {
  color: var(--text-medium) !important;
  font-size: var(--icon-size-lg) !important;
  transition: var(--icon-transition) !important;
}

.sidebar .nav-link.icon-style-clean:hover i {
  color: var(--primary-blue) !important;
  transform: scale(1.1) !important;
}

/* Outlined Style */
.sidebar .nav-link.icon-style-outlined {
  position: relative;
}

.sidebar .nav-link.icon-style-outlined i {
  color: var(--text-medium) !important;
  font-size: var(--icon-size-md) !important;
  padding: 6px !important;
  border: 1.5px solid currentColor !important;
  border-radius: var(--icon-radius) !important;
  transition: var(--icon-transition) !important;
  background-color: transparent !important;
}

.sidebar .nav-link.icon-style-outlined:hover i {
  color: var(--white) !important;
  background-color: var(--primary-blue) !important;
  border-color: var(--primary-blue) !important;
  box-shadow: var(--icon-shadow-hover) !important;
}

/* Filled Style */
.sidebar .nav-link.icon-style-filled i {
  color: var(--primary-blue) !important;
  font-size: var(--icon-size-md) !important;
  padding: 6px !important;
  background-color: var(--light-blue) !important;
  border-radius: var(--icon-radius) !important;
  transition: var(--icon-transition) !important;
  box-shadow: var(--icon-shadow) !important;
}

.sidebar .nav-link.icon-style-filled:hover i {
  color: var(--white) !important;
  background-color: var(--primary-blue) !important;
  transform: translateY(-1px) !important;
  box-shadow: var(--icon-shadow-hover) !important;
}

/* Modern Gradient Style */
.sidebar .nav-link.icon-style-modern i {
  color: var(--white) !important;
  font-size: var(--icon-size-md) !important;
  padding: 6px !important;
  background: linear-gradient(135deg, var(--primary-blue) 0%, #5B46E5 100%) !important;
  border-radius: var(--icon-radius) !important;
  transition: var(--icon-transition) !important;
  box-shadow: var(--icon-shadow) !important;
}

.sidebar .nav-link.icon-style-modern:hover i {
  background: linear-gradient(135deg, #3730A3 0%, #4C1D95 100%) !important;
  transform: translateY(-2px) scale(1.05) !important;
  box-shadow: 0 8px 20px rgba(67, 56, 202, 0.4) !important;
}

/* Rounded/Pill Style */
.sidebar .nav-link.icon-style-rounded i {
  color: var(--primary-blue) !important;
  font-size: var(--icon-size-md) !important;
  padding: 6px !important;
  background-color: var(--light-blue) !important;
  border-radius: var(--icon-radius-round) !important;
  transition: var(--icon-transition) !important;
  box-shadow: var(--icon-shadow) !important;
}

.sidebar .nav-link.icon-style-rounded:hover i {
  color: var(--white) !important;
  background-color: var(--primary-blue) !important;
  transform: rotate(5deg) scale(1.1) !important;
  box-shadow: var(--icon-shadow-hover) !important;
}

/* Glass/Translucent Style */
.sidebar .nav-link.icon-style-glass i {
  color: var(--primary-blue) !important;
  font-size: var(--icon-size-md) !important;
  padding: 6px !important;
  background-color: rgba(67, 56, 202, 0.1) !important;
  border: 1px solid rgba(67, 56, 202, 0.2) !important;
  border-radius: var(--icon-radius) !important;
  backdrop-filter: blur(10px) !important;
  transition: var(--icon-transition) !important;
}

.sidebar .nav-link.icon-style-glass:hover i {
  color: var(--white) !important;
  background-color: rgba(67, 56, 202, 0.9) !important;
  border-color: var(--primary-blue) !important;
  box-shadow: var(--icon-shadow-hover) !important;
}

/* ========================================= */
/* ICON COLOR CODING BY FUNCTION           */
/* ========================================= */

/* Dashboard/Overview - Indigo */
.sidebar .nav-link i.fa-tachometer-alt,
.sidebar .nav-link i.fa-dashboard,
.sidebar .nav-link i.fa-chart-line {
  --icon-color: #4338CA;
  --icon-color-hover: #3730A3;
  --icon-bg: rgba(67, 56, 202, 0.1);
}

/* User Management - Emerald */
.sidebar .nav-link i.fa-users,
.sidebar .nav-link i.fa-user-circle,
.sidebar .nav-link i.fa-user-plus,
.sidebar .nav-link i.fa-user-cog {
  --icon-color: #10B981;
  --icon-color-hover: #059669;
  --icon-bg: rgba(16, 185, 129, 0.1);
}

/* Email/Communication - Blue */
.sidebar .nav-link i.fa-envelope,
.sidebar .nav-link i.fa-at,
.sidebar .nav-link i.fa-mail-bulk,
.sidebar .nav-link i.fa-inbox {
  --icon-color: #3B82F6;
  --icon-color-hover: #2563EB;
  --icon-bg: rgba(59, 130, 246, 0.1);
}

/* Security/Protection - Amber */
.sidebar .nav-link i.fa-shield-alt,
.sidebar .nav-link i.fa-lock,
.sidebar .nav-link i.fa-key,
.sidebar .nav-link i.fa-shield {
  --icon-color: #F59E0B;
  --icon-color-hover: #D97706;
  --icon-bg: rgba(245, 158, 11, 0.1);
}

/* Settings/Configuration - Slate */
.sidebar .nav-link i.fa-cog,
.sidebar .nav-link i.fa-settings,
.sidebar .nav-link i.fa-tools,
.sidebar .nav-link i.fa-sliders-h {
  --icon-color: #64748B;
  --icon-color-hover: #475569;
  --icon-bg: rgba(100, 116, 139, 0.1);
}

/* Warnings/Alerts - Red */
.sidebar .nav-link i.fa-exclamation-triangle,
.sidebar .nav-link i.fa-ban,
.sidebar .nav-link i.fa-times-circle,
.sidebar .nav-link i.fa-skull-crossbones {
  --icon-color: #EF4444;
  --icon-color-hover: #DC2626;
  --icon-bg: rgba(239, 68, 68, 0.1);
}

/* Logs/Reports - Purple */
.sidebar .nav-link i.fa-file-alt,
.sidebar .nav-link i.fa-list-ul,
.sidebar .nav-link i.fa-clipboard-list,
.sidebar .nav-link i.fa-history {
  --icon-color: #8B5CF6;
  --icon-color-hover: #7C3AED;
  --icon-bg: rgba(139, 92, 246, 0.1);
}

/* Network/Domains - Teal */
.sidebar .nav-link i.fa-globe,
.sidebar .nav-link i.fa-network-wired,
.sidebar .nav-link i.fa-server,
.sidebar .nav-link i.fa-dns {
  --icon-color: #14B8A6;
  --icon-color-hover: #0F766E;
  --icon-bg: rgba(20, 184, 166, 0.1);
}

/* Apply color variables to different styles */
.sidebar .nav-link.icon-style-clean i[class*="fa-"] {
  color: var(--icon-color, var(--text-medium)) !important;
}

.sidebar .nav-link.icon-style-clean:hover i[class*="fa-"] {
  color: var(--icon-color-hover, var(--primary-blue)) !important;
}

.sidebar .nav-link.icon-style-filled i[class*="fa-"] {
  color: var(--icon-color, var(--primary-blue)) !important;
  background-color: var(--icon-bg, var(--light-blue)) !important;
}

.sidebar .nav-link.icon-style-outlined i[class*="fa-"] {
  color: var(--icon-color, var(--text-medium)) !important;
  border-color: var(--icon-color, currentColor) !important;
}

.sidebar .nav-link.icon-style-outlined:hover i[class*="fa-"] {
  background-color: var(--icon-color, var(--primary-blue)) !important;
  border-color: var(--icon-color, var(--primary-blue)) !important;
}

/* ========================================= */
/* INTERACTIVE STATES & ANIMATIONS         */
/* ========================================= */

/* Hover animations */
.sidebar .nav-link:hover {
  background-color: var(--light-blue) !important;
  transform: translateX(3px) !important;
}

/* Active state enhancements */
.sidebar .nav-link.active {
  background: linear-gradient(135deg, var(--primary-blue) 0%, #5B46E5 100%) !important;
  color: var(--white) !important;
  box-shadow: 0 4px 12px rgba(67, 56, 202, 0.3) !important;
}

.sidebar .nav-link.active i {
  color: var(--white) !important;
  transform: scale(1.1) !important;
}

/* Focus states for accessibility */
.sidebar .nav-link:focus,
.sidebar .nav-link:focus-visible {
  outline: 2px solid var(--primary-blue) !important;
  outline-offset: 2px !important;
  border-radius: 8px !important;
}

/* Loading state */
.sidebar .nav-link.loading {
  pointer-events: none !important;
}

.sidebar .nav-link.loading i {
  opacity: 0.6 !important;
  animation: iconPulse 1.5s ease-in-out infinite !important;
}

@keyframes iconPulse {
  0%, 100% { opacity: 0.6; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.05); }
}

/* ========================================= */
/* NOTIFICATION BADGES & INDICATORS        */
/* ========================================= */

/* Badge/notification dot */
.sidebar .nav-link.has-badge::after {
  content: attr(data-badge) !important;
  position: absolute !important;
  top: 8px !important;
  right: 8px !important;
  background: linear-gradient(135deg, var(--error-red) 0%, #DC2626 100%) !important;
  color: var(--white) !important;
  border-radius: 10px !important;
  padding: 2px 6px !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  min-width: 16px !important;
  text-align: center !important;
  box-shadow: 0 2px 4px rgba(239, 68, 68, 0.3) !important;
  border: 2px solid var(--white) !important;
  z-index: 10 !important;
}

/* Simple notification dot */
.sidebar .nav-link.has-notification::before {
  content: '' !important;
  position: absolute !important;
  top: 10px !important;
  right: 10px !important;
  width: 8px !important;
  height: 8px !important;
  background: radial-gradient(circle, var(--error-red) 0%, #DC2626 100%) !important;
  border-radius: 50% !important;
  border: 2px solid var(--white) !important;
  z-index: 10 !important;
  animation: notificationPulse 2s ease-in-out infinite !important;
}

@keyframes notificationPulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.2); opacity: 0.8; }
}

/* Status indicators */
.sidebar .nav-link.status-online::after {
  background: linear-gradient(135deg, var(--success-green) 0%, #059669 100%) !important;
}

.sidebar .nav-link.status-warning::after {
  background: linear-gradient(135deg, var(--warning-yellow) 0%, #D97706 100%) !important;
}

.sidebar .nav-link.status-error::after {
  background: linear-gradient(135deg, var(--error-red) 0%, #DC2626 100%) !important;
}

/* ========================================= */
/* RESPONSIVE DESIGN & MOBILE              */
/* ========================================= */

/* Collapsed sidebar states */
.sidebar-collapsed .sidebar .nav-link {
  justify-content: center !important;
  padding: 12px !important;
  margin: 4px !important;
  width: 44px !important;
  height: 44px !important;
}

.sidebar-collapsed .sidebar .nav-link i {
  margin: 0 !important;
  font-size: var(--icon-size-lg) !important;
}

.sidebar-collapsed .sidebar .nav-link .nav-text {
  display: none !important;
}

/* Mobile optimizations */
@media (max-width: 768px) {
  .sidebar .nav-link {
    padding: 16px 12px !important;
    margin: 2px 4px !important;
  }
  
  .sidebar .nav-link i {
    font-size: var(--icon-size-xl) !important;
    margin-right: 16px !important;
  }
  
  /* Larger touch targets */
  .sidebar .nav-link {
    min-height: 48px !important;
  }
}

/* ========================================= */
/* ACCESSIBILITY ENHANCEMENTS              */
/* ========================================= */

/* High contrast mode */
@media (prefers-contrast: high) {
  .sidebar .nav-link i {
    filter: contrast(1.5) !important;
    border: 1px solid currentColor !important;
  }
  
  .sidebar .nav-link:hover i {
    background-color: var(--text-dark) !important;
    color: var(--white) !important;
  }
}

/* Reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
  .sidebar .nav-link,
  .sidebar .nav-link i,
  .sidebar .nav-link::before,
  .sidebar .nav-link::after {
    transition: none !important;
    animation: none !important;
  }
  
  .sidebar .nav-link:hover {
    transform: none !important;
  }
  
  .sidebar .nav-link:hover i {
    transform: none !important;
  }
}

/* Screen reader support */
.sidebar .nav-link .sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Focus visible for keyboard navigation */
.sidebar .nav-link:focus-visible {
  outline: 3px solid var(--primary-blue) !important;
  outline-offset: 2px !important;
  background-color: var(--light-blue) !important;
}

/* ========================================= */
/* DEBUGGING HELPERS                       */
/* ========================================= */

/* CSS loaded indicator */
body::after {
  content: "Mailu Enhanced Icon System v2.0 Loaded ✓" !important;
  position: fixed !important;
  bottom: 10px !important;
  right: 10px !important;
  background: rgba(67, 56, 202, 0.9) !important;
  color: white !important;
  padding: 8px 12px !important;
  border-radius: 6px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  z-index: 99999 !important;
  font-family: monospace !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
  opacity: 0.8 !important;
  pointer-events: none !important;
}

/* Debug mode - shows icon style classes */
.debug-icons .sidebar .nav-link::before {
  content: attr(class) !important;
  position: absolute !important;
  top: -20px !important;
  left: 0 !important;
  background: rgba(0, 0, 0, 0.8) !important;
  color: white !important;
  padding: 2px 6px !important;
  border-radius: 3px !important;
  font-size: 10px !important;
  font-family: monospace !important;
  white-space: nowrap !important;
  z-index: 1000 !important;
  opacity: 0 !important;
  transition: opacity 0.2s !important;
}

.debug-icons .sidebar .nav-link:hover::before {
  opacity: 1 !important;
}

/* Icon fallback for missing Font Awesome */
.sidebar .nav-link i.fa:empty::before {
  content: "⚠" !important;
  color: var(--warning-yellow) !important;
  font-size: 16px !important;
}

/* Console logging for icon system status */
html[data-icon-debug="true"] body::before {
  content: "🔍 Icon Debug Mode Active - Check Console" !important;
  position: fixed !important;
  top: 10px !important;
  right: 10px !important;
  background: var(--warning-yellow) !important;
  color: var(--text-dark) !important;
  padding: 8px 12px !important;
  border-radius: 6px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  z-index: 99998 !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
}

/* ========================================= */
/* ICON STYLE TOGGLE SYSTEM                */
/* ========================================= */

/* Style toggle buttons (can be added via JS) */
.icon-style-toggle {
  position: fixed !important;
  top: 60px !important;
  right: 10px !important;
  background: var(--white) !important;
  border: 1px solid var(--border-light) !important;
  border-radius: 6px !important;
  padding: 8px !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
  z-index: 9999 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}

.icon-style-toggle button {
  background: var(--background-blue) !important;
  border: 1px solid var(--border-light) !important;
  border-radius: 4px !important;
  padding: 6px 12px !important;
  font-size: 11px !important;
  color: var(--text-medium) !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

.icon-style-toggle button:hover {
  background: var(--primary-blue) !important;
  color: var(--white) !important;
}

.icon-style-toggle button.active {
  background: var(--primary-blue) !important;
  color: var(--white) !important;
  font-weight: 600 !important;
}

/* Toggle visibility based on data attributes */
body[data-icon-style="clean"] .sidebar .nav-link {
  /* Clean style is default, no additional classes needed */
}

body[data-icon-style="outlined"] .sidebar .nav-link {
  /* Apply outlined style to all nav links */
}

body[data-icon-style="filled"] .sidebar .nav-link {
  /* Apply filled style to all nav links */
}

body[data-icon-style="modern"] .sidebar .nav-link {
  /* Apply modern style to all nav links */
}

body[data-icon-style="rounded"] .sidebar .nav-link {
  /* Apply rounded style to all nav links */
}

body[data-icon-style="glass"] .sidebar .nav-link {
  /* Apply glass style to all nav links */
}

/* ========================================= */
/* PRINT STYLES                            */
/* ========================================= */

@media print {
  .sidebar .nav-link i {
    color: black !important;
    background: none !important;
    box-shadow: none !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }
  
  .sidebar .nav-link::before,
  .sidebar .nav-link::after,
  body::after,
  body::before {
    display: none !important;
  }
}