/* Global UI Enhancements */
/* Base component styles */
.glass-input {
  background: rgba(42, 52, 71, 1);
  border: 1px solid rgba(59, 74, 107, 1);
  border-radius: 0.5rem;
  color: #f8fafc;
  outline: none;
  transition: all 0.2s ease;
}
.glass-input:focus {
  border-color: #60a5fa;
  box-shadow: 0 0 0 1px #60a5fa;
}
.custom-select-wrapper {
  position: relative;
  -webkit-user-select: none;
  user-select: none;
}
.custom-select {
  position: relative;
  width: 100%;
}
.custom-select-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1rem;
  background: rgba(42, 52, 71, 1);
  border: 1px solid rgba(59, 74, 107, 1);
  border-radius: 0.5rem;
  color: #f8fafc;
  cursor: pointer;
  transition: all 0.2s ease;
}
.custom-select.open .custom-select-trigger {
  border-color: #60a5fa;
}
.custom-options {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: rgba(42, 52, 71, 1);
  border: 1px solid rgba(59, 74, 107, 1);
  border-radius: 0.5rem;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: all 0.2s ease;
  z-index: 50;
  max-height: 300px;
  overflow-y: auto;
  box-shadow: 0 10px 15px -3px rgba(0,0,0,0.3);
}
.custom-select.open .custom-options {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.custom-option {
  padding: 0.5rem 1rem;
  cursor: pointer;
  color: #f8fafc;
  display: flex;
  align-items: center;
  transition: background-color 0.2s;
}
.custom-option:hover {
  background: rgba(59, 74, 107, 1);
}
/* Animations */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes blob {
  0% { transform: translate(0px, 0px) scale(1); }
  33% { transform: translate(30px, -50px) scale(1.1); }
  66% { transform: translate(-20px, 20px) scale(0.9); }
  100% { transform: translate(0px, 0px) scale(1); }
}

.animate-fade-in {
  animation: fadeIn 0.4s ease-out forwards;
  opacity: 0;
}

/* Staggered children animation */
.stagger-1 { animation-delay: 0.1s; }
.stagger-2 { animation-delay: 0.2s; }
.stagger-3 { animation-delay: 0.3s; }

/* Animated Background Blobs */
.bg-blobs {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  overflow: hidden;
  z-index: -1;
  background-color: #D7DFF4; /* brand-cream */
}

.blob {
  position: absolute;
  filter: blur(80px);
  border-radius: 50%;
  animation: blob 15s infinite alternate;
  opacity: 0.6;
}

.blob-1 {
  top: -10%; left: -10%;
  width: 500px; height: 500px;
  background: #FFFFFF; /* cloud-like blob */
  animation-delay: 0s;
}

.blob-2 {
  bottom: -20%; right: -10%;
  width: 600px; height: 600px;
  background: #E3E4E8; /* brand-silver */
  animation-delay: 2s;
}

.blob-3 {
  top: 40%; left: 40%;
  width: 400px; height: 400px;
  background: #93A4C2; /* brand-steel */
  opacity: 0.3;
  animation-delay: 4s;
}

/* Custom Scrollbars applied globally */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #93A4C2; border-radius: 4px; }

/* Hide scrollbar completely but allow scrolling */
.hide-scrollbar::-webkit-scrollbar {
  display: none;
}
.hide-scrollbar {
  -ms-overflow-style: none;
  /* scrollbar-width: none; */
}

/* Smooth transitions */
.transition-all {
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
}



/* LIGHT THEME VISIBILITY FIXES */
html:not(.dark-theme) .text-gray-400,
html:not(.dark-theme) .text-gray-300,
html:not(.dark-theme) .text-\[\#aaa\],
html:not(.dark-theme) .text-\[\#bbb\],
html:not(.dark-theme) .text-\[\#ccc\] {
    color: #4b5563 !important; /* gray-600 */
}
html:not(.dark-theme) .text-gray-500,
html:not(.dark-theme) .text-gray-200 {
    color: #374151 !important; /* gray-700 */
}
html:not(.dark-theme) .text-gray-100 {
    color: #111827 !important; /* gray-900 */
}
html:not(.dark-theme) .text-white.opacity-70 {
    color: #4b5563 !important; 
}
html:not(.dark-theme) .sidebar .text-white {
    color: #191F2B !important; /* navy */
}
html:not(.dark-theme) .sidebar .hover\:text-white:hover {
    color: #191F2B !important;
}
html:not(.dark-theme) .sidebar .hover\:bg-\[\#1a1a1a\]:hover {
    background-color: #E3E4E8 !important; /* brand-silver */
}
html:not(.dark-theme) .bg-\[\#111\],
html:not(.dark-theme) .bg-\[\#151515\],
html:not(.dark-theme) .bg-\[\#1a1a1a\],
html:not(.dark-theme) .bg-\[\#222\],
html:not(.dark-theme) .bg-\[\#333\],
html:not(.dark-theme) .bg-\[\#444\] {
    background-color: #f3f4f6 !important; /* gray-100 */
    color: #111827 !important; /* gray-900 */
    border-color: #d1d5db !important; /* gray-300 */
}
html:not(.dark-theme) .hover\:bg-\[\#111\]:hover,
html:not(.dark-theme) .hover\:bg-\[\#151515\]:hover,
html:not(.dark-theme) .hover\:bg-\[\#1a1a1a\]:hover,
html:not(.dark-theme) .hover\:bg-\[\#222\]:hover,
html:not(.dark-theme) .hover\:bg-\[\#333\]:hover,
html:not(.dark-theme) .hover\:bg-\[\#444\]:hover {
    background-color: #e5e7eb !important; /* gray-200 */
}
html:not(.dark-theme) .border-\[\#111\],
html:not(.dark-theme) .border-\[\#1a1a1a\],
html:not(.dark-theme) .border-\[\#222\],
html:not(.dark-theme) .border-\[\#333\],
html:not(.dark-theme) .border-\[\#444\] {
    border-color: #e5e7eb !important;
}
html:not(.dark-theme) .divide-\[\#222\] > :not([hidden]) ~ :not([hidden]) {
    border-color: #e5e7eb !important;
}
html:not(.dark-theme) .bg-black\/50 {
    background-color: rgba(0,0,0,0.2) !important;
}
html:not(.dark-theme) .text-\[\#999\] {
    color: #4b5563 !important; 
}

/* Light Mode Overrides for Hardcoded Components */
html:not(.dark-theme) .glass-card,
html:not(.dark-theme) .glass-panel,
html:not(.dark-theme) .kanban-column,
html:not(.dark-theme) .kanban-header,
html:not(.dark-theme) .lead-card {
    background-color: #ffffff !important;
    border-color: #e5e7eb !important; /* gray-200 */
    color: #111827 !important;
}

/* Specific for analytics cards inside glass-card */
html:not(.dark-theme) .glass-card .text-gray-400 {
    color: #6b7280 !important; /* gray-500 */
}

/* Filter selects */
html:not(.dark-theme) .filter-select {
    background-color: #ffffff !important;
    border-color: #d1d5db !important;
    color: #111827 !important;
}
html:not(.dark-theme) .filter-select option {
    background-color: #ffffff !important;
    color: #111827 !important;
}

/* Table headers inside glass-card that might not use bg-[#1a1a1a] */
html:not(.dark-theme) .glass-card thead {
    background-color: #f9fafb !important;
    color: #4b5563 !important;
}

/* Fix text-white inside glass-cards for light mode (excluding buttons that have their own bg) */
html:not(.dark-theme) .glass-card .text-white:not(button),
html:not(.dark-theme) .glass-panel .text-white:not(button),
html:not(.dark-theme) .kanban-column .text-white:not(button),
html:not(.dark-theme) .lead-card .text-white:not(button) {
    color: #111827 !important;
}

/* Fix glass-input and custom selects in light mode */
html:not(.dark-theme) .glass-input,
html:not(.dark-theme) .custom-select-trigger,
html:not(.dark-theme) .custom-options,
html:not(.dark-theme) .custom-option {
    background: #ffffff !important;
    border-color: #d1d5db !important;
    color: #111827 !important;
}
html:not(.dark-theme) .glass-input:focus {
    border-color: #9ca3af !important;
}
html:not(.dark-theme) .glass-input::placeholder {
    color: #6b7280 !important;
}
html:not(.dark-theme) .custom-option:hover {
    background-color: #f3f4f6 !important;
}
html:not(.dark-theme) .\[color-scheme\:dark\] {
    color-scheme: light !important;
}

/* Fix text-white for main page headers */
html:not(.dark-theme) h1.text-white,
html:not(.dark-theme) h2.text-white,
html:not(.dark-theme) h3.text-white,
html:not(.dark-theme) p.text-white {
    color: #111827 !important;
}

/* Fix kanban cards and specific elements inside them */
html:not(.dark-theme) .kanban-card {
    background-color: #ffffff !important;
    border-color: #e5e7eb !important;
    color: #111827 !important;
}
html:not(.dark-theme) .kanban-card:hover {
    border-color: #d1d5db !important;
}
html:not(.dark-theme) .kanban-card .text-white,
html:not(.dark-theme) .kanban-header .text-white {
    color: #111827 !important;
}
html:not(.dark-theme) .kanban-card .text-gray-400,
html:not(.dark-theme) .kanban-card .text-gray-500 {
    color: #4b5563 !important;
}

/* Generalize dark tags bg-[#222] for light mode */
html:not(.dark-theme) .bg-\[\#222\] {
    background-color: #e5e7eb !important;
    color: #4b5563 !important;
}
html:not(.dark-theme) .bg-\[\#222\] .text-white {
    color: #4b5563 !important;
}

/* Fix lead.html specific text colors for light mode */
html:not(.dark-theme) #leadTitle,
html:not(.dark-theme) #breadcrumbCurrent {
    color: #111827 !important;
}
html:not(.dark-theme) main .text-white:not(button):not(a):not(.bg-blue-600):not(.bg-green-500):not(.bg-red-500):not(.badge) {
    color: #111827 !important;
}
html:not(.dark-theme) main h3.text-white,
html:not(.dark-theme) main div.text-white:not(button):not(.bg-blue-600):not(.bg-green-500):not(.bg-red-500),
html:not(.dark-theme) main span.text-white:not(button):not(.bg-blue-600):not(.bg-green-500):not(.bg-red-500) {
    color: #111827 !important;
}
html:not(.dark-theme) main .text-gray-400:not(button),
html:not(.dark-theme) main .text-gray-500:not(button),
html:not(.dark-theme) main .text-gray-300:not(button) {
    color: #4b5563 !important;
}

/* Fix buttons that are white-on-dark in dark mode, making them dark-on-light */
html:not(.dark-theme) button.bg-white.text-black,
html:not(.dark-theme) button.bg-\[\#151515\],
html:not(.dark-theme) button.bg-\[\#1a1a1a\],
html:not(.dark-theme) button.bg-\[\#222\],
html:not(.dark-theme) button.bg-brand-navy {
    background-color: #111827 !important;
    color: #ffffff !important;
    border-color: #111827 !important;
}
html:not(.dark-theme) button.bg-white.text-black:hover,
html:not(.dark-theme) button.bg-\[\#151515\]:hover,
html:not(.dark-theme) button.bg-\[\#1a1a1a\]:hover,
html:not(.dark-theme) button.bg-\[\#222\]:hover {
    background-color: #374151 !important;
    border-color: #374151 !important;
}

/* Fix transparent buttons with white text */
html:not(.dark-theme) button.bg-transparent.text-white {
    color: #111827 !important;
    border-color: #d1d5db !important;
}
html:not(.dark-theme) button.bg-transparent.text-white:hover {
    background-color: #f3f4f6 !important;
    color: #000000 !important;
}

/* Fix tabs in light mode */
html:not(.dark-theme) .tab-btn.active.text-white,
html:not(.dark-theme) .tab-btn.active {
    color: #111827 !important;
    border-bottom-color: #111827 !important;
}
html:not(.dark-theme) .tab-btn:hover {
    color: #111827 !important;
}



/* Injected from ui.js */
    /* Base Sidebar Styles (Injected globally) */
    .nav-item {
      display: flex;
      align-items: center;
      padding: 12px 16px;
      margin-bottom: 6px;
      border-radius: 12px;
      color: #93A4C2; 
      font-weight: 500;
      transition: all 0.2s ease;
      cursor: pointer;
    }
    .nav-item:hover {
      background: #D7DFF4;
      color: #191F2B;
    }
    .nav-item.active {
      background: #D7DFF4;
      color: #191F2B;
      box-shadow: inset 3px 0 0 0 #191F2B;
    }
    
    /* Dark Theme Overrides */
    .dark-theme {
      background-color: #0a0a0a !important;
      color: #f8fafc !important;
    }
    /* Panels and layout elements */
    .dark-theme .glass-card, .dark-theme .glass-panel, .dark-theme .kanban-column, .dark-theme .kanban-header, .dark-theme .lead-card, .dark-theme .lead-row, .dark-theme .sidebar, .dark-theme header, 
    .dark-theme .bg-white, .dark-theme .bg-white\/60, .dark-theme .bg-white\/80, .dark-theme .bg-white\/90, .dark-theme .bg-brand-cream, .dark-theme .bg-brand-cream\/50 { 
      background-color: #111111 !important; border-color: #333333 !important; color: #f8fafc !important; 
    }
    
    .dark-theme .lead-row:hover {
      background: #2A3447 !important;
      border-color: #3b4a6b !important;
    }
    
    /* Inputs, Selects, and Interactive Elements */
    .dark-theme .input-field, .dark-theme select, .dark-theme input, .dark-theme textarea, .dark-theme .bg-brand-mist\/30, .dark-theme .filter-input { 
      background: #2A3447 !important; border-color: #3b4a6b !important; color: #f8fafc !important; 
    }
    
    /* Animated Blobs */
    .dark-theme .bg-blobs { background-color: #10141C !important; }
    .dark-theme .blob-1 { background: #191F2B !important; }
    .dark-theme .blob-2 { background: #2A3447 !important; }
    .dark-theme .blob-3 { background: #3b4a6b !important; opacity: 0.15 !important; }
    
    /* Typography */
    .dark-theme h1, .dark-theme h2, .dark-theme h3, .dark-theme h4, .dark-theme p, .dark-theme span, .dark-theme td, .dark-theme th, .dark-theme div {
      color: inherit;
    }
    .dark-theme .text-brand-navy, .dark-theme .text-gray-900, .dark-theme .text-gray-800, .dark-theme .text-gray-700 { 
      color: #f8fafc !important; 
    }
    .dark-theme .text-brand-steel, .dark-theme .text-gray-500, .dark-theme .text-gray-400, .dark-theme .text-brand-warm { 
      color: #94a3b8 !important; 
    }
    .dark-theme .text-green-600, .dark-theme .text-green-700 { color: #4ade80 !important; }
    .dark-theme .text-red-600, .dark-theme .text-red-500, .dark-theme .text-red-700 { color: #f87171 !important; }
    .dark-theme .text-blue-600 { color: #60a5fa !important; }
    .dark-theme .text-orange-500, .dark-theme .text-orange-600 { color: #fb923c !important; }

    /* Buttons */
    .dark-theme .bg-brand-navy { background-color: #2563eb !important; color: #ffffff !important; }
    .dark-theme .bg-brand-navy:hover { background-color: #1d4ed8 !important; }
    
    /* Badges & Soft Backgrounds */
    .dark-theme .bg-green-50, .dark-theme .bg-green-100 { background-color: rgba(74, 222, 128, 0.15) !important; color: #4ade80 !important; }
    .dark-theme .bg-red-50, .dark-theme .bg-red-100 { background-color: rgba(248, 113, 113, 0.15) !important; color: #f87171 !important; }
    .dark-theme .bg-blue-50, .dark-theme .bg-blue-100 { background-color: rgba(96, 165, 250, 0.15) !important; color: #60a5fa !important; }
    .dark-theme .bg-yellow-50, .dark-theme .bg-yellow-100 { background-color: rgba(250, 204, 21, 0.15) !important; color: #facc15 !important; }
    .dark-theme .bg-orange-50, .dark-theme .bg-orange-100 { background-color: rgba(251, 146, 60, 0.15) !important; color: #fb923c !important; }
    .dark-theme .bg-purple-50, .dark-theme .bg-purple-100 { background-color: rgba(192, 132, 252, 0.15) !important; color: #c084fc !important; }
    .dark-theme .bg-gray-50, .dark-theme .bg-gray-100 { background-color: rgba(148, 163, 184, 0.15) !important; color: #cbd5e1 !important; }
    .dark-theme .bg-brand-mist, .dark-theme .bg-brand-silver { background-color: #2A3447 !important; color: #f8fafc !important; }

    /* Navigation & Hovers */
    .dark-theme .nav-item { color: #94a3b8 !important; }
    .dark-theme .nav-item:hover, .dark-theme .hover\:bg-gray-50:hover, .dark-theme .hover\:bg-brand-mist\/50:hover { background: #2A3447 !important; }
    .dark-theme .nav-item.active { background: #3b4a6b !important; color: #fff !important; }

    /* Borders */
    .dark-theme .border-brand-silver, .dark-theme .border-gray-200, .dark-theme .border-gray-100, .dark-theme .divide-y > * { 
      border-color: #2A3447 !important; 
    }

    /* Shadows */
    .dark-theme .shadow-lg, .dark-theme .shadow-md, .dark-theme .shadow-sm {
      box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -2px rgba(0, 0, 0, 0.3) !important;
    }

/* Header User Profile Styles */
#headerUserProfile {
  -webkit-user-select: none;
  user-select: none;
}
.dark-theme #headerUserProfile .text-slate-900 {
  color: #FFFFFF !important;
}
.dark-theme #headerUserProfile .text-slate-500 {
  color: #94A3B8 !important;
}

/* ============================================================
   ANTI-FOUC INSTANT ROLE SIDEBAR FILTERING
   ============================================================ */
html.role-marketing .sidebar a[href*="dashboard"],
html.role-marketing .sidebar a[href*="analytics"],
html.role-marketing .sidebar a[href*="performance"],
html.role-marketing .sidebar a[href*="kpi"],
html.role-marketing .sidebar a[href*="roles"],
html.role-marketing .sidebar a[href*="settings"],
html.role-marketing .sidebar a[href*="stages"],
html.role-marketing .sidebar a[href*="system-settings"],
html.role-marketing .sidebar a[href*="payments"],
html.role-marketing .sidebar a[href*="activity-log"],
html.role-director .sidebar a[href*="activity-log"] {
  display: none !important;
}

html.role-manager .sidebar a[href*="dashboard"],
html.role-manager .sidebar a[href*="analytics"],
html.role-manager .sidebar a[href*="kpi"],
html.role-manager .sidebar a[href*="roles"],
html.role-manager .sidebar a[href*="settings"],
html.role-manager .sidebar a[href*="stages"],
html.role-manager .sidebar a[href*="system-settings"],
html.role-manager .sidebar a[href*="payments"],
html.role-manager .sidebar a[href*="net-profit"],
html.role-manager .sidebar a[href*="net-income"],
html.role-manager .sidebar a[href*="cms"],
html.role-manager .sidebar a[href*="target-forms"],
html.role-manager .sidebar a[href*="activity-log"],
html.role-sales .sidebar a[href*="dashboard"],
html.role-sales .sidebar a[href*="analytics"],
html.role-sales .sidebar a[href*="kpi"],
html.role-sales .sidebar a[href*="roles"],
html.role-sales .sidebar a[href*="settings"],
html.role-sales .sidebar a[href*="stages"],
html.role-sales .sidebar a[href*="system-settings"],
html.role-sales .sidebar a[href*="payments"],
html.role-sales .sidebar a[href*="net-profit"],
html.role-sales .sidebar a[href*="net-income"],
html.role-sales .sidebar a[href*="cms"],
html.role-sales .sidebar a[href*="target-forms"],
html.role-sales .sidebar a[href*="activity-log"] {
  display: none !important;
}