/**
 * Tailwind Theme Bridge
 * Maps Tailwind classes to our modern theme CSS variables
 * This allows existing React components using Tailwind to work with the new theme system
 * Updated for Azure Portal Style - Dark Professional Blues
 */

/* Background Colors */
.bg-white { background-color: var(--bg-secondary) !important; }
.bg-gray-50 { background-color: var(--bg-secondary) !important; }
.bg-gray-100 { background-color: var(--bg-secondary) !important; }
.bg-dark-500 { background-color: var(--bg-input) !important; }
.bg-dark-600 { background-color: var(--bg-tertiary) !important; }
.bg-dark-700 { background-color: var(--bg-secondary) !important; }
.bg-dark-800 { background-color: var(--bg-secondary) !important; }

/* Gray backgrounds for buttons */
.bg-gray-600 { background-color: #4B5563 !important; }
.bg-gray-700 { background-color: #374151 !important; }
.hover\:bg-gray-700:hover { background-color: #374151 !important; }
.hover\:bg-gray-600:hover { background-color: #4B5563 !important; }

[data-theme="light"] .bg-gray-600 { background-color: #6B7280 !important; }
[data-theme="light"] .bg-gray-700 { background-color: #4B5563 !important; }
[data-theme="light"] .hover\:bg-gray-700:hover { background-color: #4B5563 !important; }

/* Button Colors - Success, Purple, Error */
.bg-green-600 { background-color: var(--success) !important; }
.bg-green-700 { background-color: var(--accent-emerald-dark) !important; }
.hover\:bg-green-700:hover { background-color: var(--accent-emerald-dark) !important; }

.bg-purple-600 { background-color: #7C3AED !important; }
.bg-purple-700 { background-color: #6D28D9 !important; }
.hover\:bg-purple-700:hover { background-color: #6D28D9 !important; }

[data-theme="light"] .bg-purple-600 { background-color: var(--primary-blue) !important; }
[data-theme="light"] .bg-purple-700 { background-color: var(--primary-blue-dark) !important; }
[data-theme="light"] .hover\:bg-purple-700:hover { background-color: var(--primary-blue-dark) !important; }

.bg-red-600 { background-color: var(--error) !important; }
.bg-red-700 { background-color: #B91C1C !important; }
.hover\:bg-red-700:hover { background-color: #B91C1C !important; }

/* Gradients */
.bg-gradient-to-br { background-image: linear-gradient(to bottom right, var(--from-color), var(--to-color)); }
.from-dark-800 { --from-color: var(--bg-primary); }
.from-dark-600 { --from-color: var(--bg-tertiary); }
.to-dark-600 { --to-color: var(--bg-tertiary); }
.to-dark-800 { --to-color: var(--bg-primary); }

[data-theme="light"] .from-dark-800,
[data-theme="light"] .from-dark-600 { --from-color: var(--bg-secondary); }
[data-theme="light"] .to-dark-600,
[data-theme="light"] .to-dark-800 { --to-color: var(--bg-tertiary); }

/* Text Colors */
.text-white { color: var(--text-primary) !important; }
.text-gray-700 { color: var(--text-primary) !important; }
.text-gray-900 { color: var(--text-primary) !important; }
.text-gray-300 { color: var(--text-secondary) !important; }
.text-gray-400 { color: var(--text-tertiary) !important; }
.text-gray-600 { color: var(--text-secondary) !important; }
.text-gray-500 { color: var(--text-tertiary) !important; }

/* Brand Colors - Clean Professional Palette */
.bg-rmon-green-500, .bg-accent-emerald { background-color: var(--accent-emerald) !important; }
.bg-rmon-orange-500, .bg-accent-amber { background-color: var(--accent-amber) !important; }
.bg-primary-blue-500 { background-color: var(--primary-blue) !important; }
.bg-primary-purple-500 { background-color: var(--primary-blue) !important; } /* Map to blue */

/* Opacity variants for backgrounds */
.bg-primary-purple-500\/10 { background-color: rgba(0, 120, 212, 0.1) !important; }
.bg-primary-purple-500\/20 { background-color: rgba(0, 120, 212, 0.2) !important; }
.bg-primary-blue-500\/10 { background-color: rgba(0, 120, 212, 0.1) !important; }
.bg-primary-blue-500\/20 { background-color: rgba(0, 120, 212, 0.2) !important; }

[data-theme="dark"] .bg-primary-purple-500\/10 { background-color: rgba(124, 58, 237, 0.1) !important; }
[data-theme="dark"] .bg-primary-purple-500\/20 { background-color: rgba(124, 58, 237, 0.2) !important; }
[data-theme="dark"] .bg-primary-blue-500\/10 { background-color: rgba(0, 102, 255, 0.1) !important; }
[data-theme="dark"] .bg-primary-blue-500\/20 { background-color: rgba(0, 102, 255, 0.2) !important; }

.text-rmon-green-500, .text-accent-emerald { color: var(--accent-emerald) !important; }
.text-rmon-green-400 { color: var(--accent-emerald-light) !important; }
.text-rmon-orange-500, .text-accent-amber { color: var(--accent-amber) !important; }
.text-rmon-orange-400 { color: var(--accent-amber-light) !important; }
.text-primary-blue-400 { color: var(--primary-blue-light) !important; }
.text-primary-blue-500 { color: var(--primary-blue) !important; }
.text-primary-purple-400 { color: var(--primary-blue-light) !important; }
.text-primary-purple-500 { color: var(--primary-blue) !important; } /* Map to blue */
.text-primary-purple-200 { color: var(--primary-blue-light) !important; }

.border-rmon-green-500, .border-accent-emerald { border-color: var(--accent-emerald) !important; }
.border-rmon-orange-500, .border-accent-amber { border-color: var(--accent-amber) !important; }
.border-primary-blue-500 { border-color: var(--primary-blue) !important; }
.border-primary-purple-500 { border-color: var(--primary-blue) !important; } /* Map to blue */

/* Hover States */
.hover\:bg-dark-500:hover { background-color: var(--bg-input) !important; }
.hover\:bg-dark-600:hover { background-color: var(--bg-tertiary) !important; }
.hover\:text-white:hover { color: var(--text-primary) !important; }
.hover\:text-rmon-orange-400:hover, .hover\:text-accent-amber-light:hover { color: var(--accent-amber-light) !important; }
.hover\:text-rmon-orange-500:hover, .hover\:text-accent-amber:hover { color: var(--accent-amber) !important; }
.hover\:text-rmon-green-500:hover, .hover\:text-accent-emerald:hover { color: var(--accent-emerald) !important; }
.hover\:text-primary-blue-400:hover { color: var(--primary-blue-light) !important; }
.hover\:text-primary-blue-500:hover { color: var(--primary-blue) !important; }
.hover\:text-primary-purple-400:hover { color: var(--primary-blue-light) !important; }
.hover\:bg-primary-blue-600:hover { background-color: var(--primary-blue-dark) !important; }
.hover\:bg-primary-purple-600:hover { background-color: var(--primary-blue-dark) !important; } /* Map to blue */
.hover\:border-rmon-green-500:hover, .hover\:border-accent-emerald:hover { border-color: var(--accent-emerald) !important; }
.hover\:border-rmon-orange-500:hover, .hover\:border-accent-amber:hover { border-color: var(--accent-amber) !important; }

/* Legacy Button Class - map to new system */
.btn-green {
  background: var(--accent-emerald) !important;
  color: white !important;
  transition: all var(--transition-base);
}

.btn-green:hover {
  background: var(--accent-emerald-dark) !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(16, 137, 62, 0.3);
}

/* Card Orange - ensure proper theming */
.card-orange {
  border: 2px solid var(--accent-amber) !important;
  background: var(--bg-card) !important;
}

[data-theme="dark"] .card-orange,
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .card-orange {
    background: rgba(255, 185, 0, 0.05) !important;
  }
}

[data-theme="light"] .card-orange {
  background: rgba(255, 185, 0, 0.02) !important;
}

.card-orange:hover {
  border-color: var(--accent-amber-light) !important;
  box-shadow: 0 6px 16px rgba(255, 185, 0, 0.2) !important;
}

/* Override backgrounds in light mode for cards - use consistent grays, no white */
[data-theme="light"] .bg-white {
  background-color: #ECECEC !important; /* Light gray, not white */
}

[data-theme="light"] .bg-gray-50 {
  background-color: #ECECEC !important; /* Light gray, not white */
}

[data-theme="light"] .bg-gray-100 {
  background-color: #ECECEC !important; /* Light gray, not white */
}

[data-theme="light"] .bg-dark-500,
[data-theme="light"] .bg-dark-600,
[data-theme="light"] .bg-dark-700,
[data-theme="light"] .bg-dark-800 {
  background-color: #ECECEC !important; /* Light gray, not white */
}

/* Ensure text is readable in both themes */
[data-theme="light"] .text-white {
  color: var(--text-primary) !important;
}

[data-theme="light"] .text-gray-300,
[data-theme="light"] .text-gray-400 {
  color: var(--text-secondary) !important;
}

/* Shadow Effects - Base Shadows */
.shadow-sm {
  box-shadow: var(--shadow-sm) !important;
}
.shadow-md {
  box-shadow: var(--shadow-md) !important;
}
.shadow-lg {
  box-shadow: var(--shadow-lg) !important;
}

/* Shadow Effects with Brand Colors - Azure Style */
.shadow-rmon-green-500\/20, .shadow-accent-emerald\/20 {
  box-shadow: 0 6px 16px rgba(16, 137, 62, 0.2) !important;
}

.shadow-rmon-orange-500\/20, .shadow-accent-amber\/20 {
  box-shadow: 0 6px 16px rgba(255, 185, 0, 0.2) !important;
}

.shadow-primary-blue\/20 {
  box-shadow: 0 6px 16px rgba(0, 120, 212, 0.2) !important;
}

.shadow-primary-purple\/20 {
  box-shadow: 0 6px 16px rgba(0, 120, 212, 0.2) !important; /* Map to blue */
}

.hover\:shadow-2xl:hover {
  box-shadow: var(--shadow-xl) !important;
}

.hover\:shadow-rmon-green-500\/20:hover, .hover\:shadow-accent-emerald\/20:hover {
  box-shadow: 0 8px 20px rgba(16, 137, 62, 0.25) !important;
}

.hover\:shadow-rmon-orange-500\/20:hover, .hover\:shadow-accent-amber\/20:hover {
  box-shadow: 0 8px 20px rgba(255, 185, 0, 0.25) !important;
}

/* Border Colors */
.border-gray-200 { border-color: var(--border-color) !important; }
.border-gray-300 { border-color: var(--border-color) !important; }
.border-gray-600 { border-color: var(--border-color-dark) !important; }
.border-gray-700 { border-color: var(--border-color) !important; }
.border-blue-200 { border-color: rgba(0, 120, 212, 0.3) !important; }
.border-blue-500 { border-color: var(--info) !important; }
.border-blue-700 { border-color: var(--info) !important; }
.border-blue-800 { border-color: var(--info) !important; }
.border-red-500 { border-color: var(--error) !important; }
.border-yellow-200 { border-color: rgba(255, 185, 0, 0.3) !important; }
.border-yellow-800 { border-color: var(--warning) !important; }
.border-green-800 { border-color: var(--success) !important; }

[data-theme="dark"] .border-gray-200,
[data-theme="dark"] .border-gray-300 {
  border-color: var(--border-color) !important;
}

[data-theme="dark"] .border-blue-200 { border-color: rgba(0, 102, 255, 0.3) !important; }
[data-theme="dark"] .border-blue-700,
[data-theme="dark"] .border-blue-800 { border-color: rgba(0, 102, 255, 0.5) !important; }

/* Alert/Status Background Colors */
.bg-blue-50 {
  background-color: rgba(0, 120, 212, 0.08) !important;
}
.bg-blue-900\/20,
.bg-blue-900\/10 {
  background-color: rgba(0, 120, 212, 0.1) !important;
}

[data-theme="dark"] .bg-blue-50 {
  background-color: rgba(0, 102, 255, 0.12) !important;
}
[data-theme="dark"] .bg-blue-900\/20 {
  background-color: rgba(0, 102, 255, 0.15) !important;
}

.bg-yellow-50 {
  background-color: rgba(255, 185, 0, 0.08) !important;
}
[data-theme="dark"] .bg-yellow-50 {
  background-color: rgba(255, 185, 0, 0.12) !important;
}
[data-theme="dark"] .bg-yellow-900\/20 {
  background-color: rgba(255, 185, 0, 0.15) !important;
}

.bg-green-100 {
  background-color: rgba(16, 137, 62, 0.08) !important;
}
.bg-green-900 {
  background-color: rgba(16, 137, 62, 0.2) !important;
}
[data-theme="dark"] .bg-green-100 {
  background-color: rgba(16, 137, 62, 0.12) !important;
}
[data-theme="dark"] .bg-green-900 {
  background-color: rgba(16, 137, 62, 0.25) !important;
}

.bg-red-900\/20,
.bg-red-900\/10 {
  background-color: rgba(209, 52, 56, 0.1) !important;
}

[data-theme="dark"] .bg-red-900\/20 {
  background-color: rgba(209, 52, 56, 0.15) !important;
}

/* Status Text Colors */
.text-blue-200,
.text-blue-300 {
  color: var(--info) !important;
}

[data-theme="dark"] .text-blue-200,
[data-theme="dark"] .text-blue-300 {
  color: var(--primary-blue-light) !important;
}

.text-red-200,
.text-red-400 {
  color: var(--error) !important;
}

.text-green-800 {
  color: var(--success) !important;
}
.text-green-100 {
  color: var(--accent-emerald-light) !important;
}
[data-theme="dark"] .text-green-800 {
  color: var(--accent-emerald-light) !important;
}
[data-theme="dark"] .text-green-100 {
  color: var(--accent-emerald-light) !important;
}

.text-yellow-800 {
  color: var(--warning) !important;
}
[data-theme="dark"] .text-yellow-800 {
  color: var(--accent-amber-light) !important;
}

/* More Gradient Support */
.from-gray-900 { --from-color: #0a0a0a; }
.to-gray-800 { --to-color: #141414; }

/* Transform and Interaction */
.cursor-pointer { cursor: pointer; }
.transform { transform: translateZ(0); }
.hover\:scale-\[1\.02\]:hover {
  transform: scale(1.02);
}

/* Disabled States */
.disabled\:opacity-50:disabled,
.disabled\:cursor-not-allowed:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Rounded Corners */
.rounded-lg { border-radius: var(--radius-lg); }
.rounded-md { border-radius: var(--radius-md); }

/* Text Decoration */
a.block {
  text-decoration: none !important;
}

/* ==================== BUTTON TEXT COLOR FIX FOR DARK BACKGROUNDS ==================== */
/* Only apply white text to elements with dark backgrounds (gradients, solid dark colors) */

/* Badges with gradient backgrounds should have white text */
[data-theme="light"] .bg-gradient-to-r.text-primary-purple-400,
[data-theme="light"] .bg-gradient-to-r.text-primary-blue-400,
[data-theme="light"] .bg-gradient-to-r .text-primary-purple-400,
[data-theme="light"] .bg-gradient-to-r .text-primary-blue-400 {
  color: white !important;
}

/* Buttons with solid dark backgrounds */
[data-theme="light"] .bg-primary-blue-500:not(.bg-opacity-10):not(.bg-opacity-20),
[data-theme="light"] .bg-primary-purple-500:not(.bg-opacity-10):not(.bg-opacity-20),
[data-theme="light"] .bg-primary-blue-600,
[data-theme="light"] .bg-primary-purple-600 {
  color: white !important;
}

/* Gradient backgrounds always get white text */
[data-theme="light"] .bg-gradient-to-r,
[data-theme="light"] .bg-gradient-to-br {
  color: white !important;
}

/* ==================== TOGGLE SWITCH FIXES ==================== */
/* Fix toggle switch backgrounds - no white circles */
.after\:bg-white::after {
  background-color: var(--text-inverse) !important;
}

[data-theme="dark"] .after\:bg-white::after {
  background-color: #E0E0E0 !important; /* Light gray circle on dark background */
}

[data-theme="light"] .after\:bg-white::after {
  background-color: #4B5563 !important; /* Dark gray circle on light background */
}

/* ==================== ADDITIONAL BACKGROUND FIXES FOR SMB PAGE ==================== */
/* Fix hover states for folder mapping cards */
.hover\:bg-gray-600:hover {
  background-color: var(--bg-hover, rgba(75, 85, 99, 0.5)) !important;
}

.hover\:bg-gray-500:hover {
  background-color: var(--bg-hover, rgba(107, 114, 128, 0.5)) !important;
}

/* Dark mode specific overrides */
[data-theme="dark"] .bg-gray-600 {
  background-color: rgba(75, 85, 99, 0.3) !important;
}

[data-theme="dark"] .bg-gray-700 {
  background-color: rgba(55, 65, 81, 0.3) !important;
}

[data-theme="dark"] .hover\:bg-gray-600:hover {
  background-color: rgba(75, 85, 99, 0.5) !important;
}

[data-theme="dark"] .hover\:bg-gray-500:hover {
  background-color: rgba(107, 114, 128, 0.5) !important;
}

/* Light mode - keep the existing gray buttons visible */
[data-theme="light"] .bg-gray-600 {
  background-color: #6B7280 !important;
}

[data-theme="light"] .bg-gray-700 {
  background-color: #4B5563 !important;
}