/**
 * DARK MODE COLOR FIX
 * Ensures all text and elements are visible in both light and dark modes
 */

/* ========================================
   BASE DARK MODE STYLES
   ======================================== */

[data-theme="dark"] body {
    background: #111827 !important;
    color: #f9fafb !important;
}

/* ========================================
   TEXT COLORS - DARK MODE
   ======================================== */

/* Headings */
[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4,
[data-theme="dark"] h5,
[data-theme="dark"] h6 {
    color: #f9fafb !important;
}

/* Paragraphs and body text */
[data-theme="dark"] p,
[data-theme="dark"] span:not(.hero-word-blue):not(.hero-word-pink):not(.hero-word-yellow),
[data-theme="dark"] div,
[data-theme="dark"] li {
    color: #e5e7eb !important;
}

/* ========================================
   PRESERVE HERO HEADING COLORS IN DARK MODE
   ULTRA-HIGH SPECIFICITY to override all other rules
   ======================================== */
/* Light mode colors */
h1 .hero-word-blue,
span.hero-word-blue {
    color: #3b82f6 !important; /* Blue for ONE */
}

h1 .hero-word-pink,
span.hero-word-pink {
    color: #ec4899 !important; /* Pink for STOP */
}

h1 .hero-word-yellow,
span.hero-word-yellow {
    color: #fbbf24 !important; /* Yellow for FOR */
}

/* Dark mode - MUST override the general span rule */
[data-theme="dark"] h1 span.hero-word-blue,
[data-theme="dark"] span.hero-word-blue {
    color: #3b82f6 !important;
}

[data-theme="dark"] h1 span.hero-word-pink,
[data-theme="dark"] span.hero-word-pink {
    color: #ec4899 !important;
}

[data-theme="dark"] h1 span.hero-word-yellow,
[data-theme="dark"] span.hero-word-yellow {
    color: #fbbf24 !important;
}

/* Strong and bold text */
[data-theme="dark"] strong,
[data-theme="dark"] b {
    color: #f9fafb !important;
}

/* Links (exclude buttons so they can keep their own colors) */
[data-theme="dark"] a:not(.btn):not(.btn-primary):not(.btn-outline):not(.btn-secondary) {
    color: #93c5fd !important;
}

[data-theme="dark"] a:not(.btn):not(.btn-primary):not(.btn-outline):not(.btn-secondary):hover {
    color: #bfdbfe !important;
}

/* ========================================
   SPECIFIC TEXT CLASSES - DARK MODE
   ======================================== */

[data-theme="dark"] .text-gray-900,
[data-theme="dark"] .text-gray-800,
[data-theme="dark"] .text-gray-700 {
    color: #f9fafb !important;
}

[data-theme="dark"] .text-gray-600,
[data-theme="dark"] .text-gray-500 {
    color: #d1d5db !important;
}

[data-theme="dark"] .text-gray-400 {
    color: #9ca3af !important;
}

[data-theme="dark"] .text-gray-300 {
    color: #d1d5db !important;
}

/* Primary color text */
[data-theme="dark"] .text-primary {
    color: #a5b4fc !important; /* Indigo-light accent in dark mode */
}

/* ========================================
   CARDS - DARK MODE
   ======================================== */

[data-theme="dark"] .card {
    background: #1f2937 !important;
    border-color: #374151 !important;
    color: #f9fafb !important;
}

[data-theme="dark"] .card h1,
[data-theme="dark"] .card h2,
[data-theme="dark"] .card h3,
[data-theme="dark"] .card h4,
[data-theme="dark"] .card h5,
[data-theme="dark"] .card h6 {
    color: #f9fafb !important;
}

[data-theme="dark"] .card p,
[data-theme="dark"] .card span,
[data-theme="dark"] .card div {
    color: #e5e7eb !important;
}

/* ========================================
   FORMS - DARK MODE
   ======================================== */

[data-theme="dark"] input,
[data-theme="dark"] textarea,
[data-theme="dark"] select {
    background: #374151 !important;
    color: #f9fafb !important;
    border-color: #4b5563 !important;
}

[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder {
    color: #9ca3af !important;
}

[data-theme="dark"] label {
    color: #f9fafb !important;
}

/* ========================================
   SECTIONS - DARK MODE
   ======================================== */

[data-theme="dark"] section {
    background: #111827 !important;
    color: #f9fafb !important;
}

[data-theme="dark"] .bg-gray-50,
[data-theme="dark"] .bg-gray-100 {
    background: #1f2937 !important;
}

[data-theme="dark"] .bg-white {
    background: #1f2937 !important;
}

/* Clients grid tiles: remove visible tile background and shadows in dark mode */
[data-theme="dark"] #clientsGrid .bg-white {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border-color: transparent !important;
}

[data-theme="dark"] #clientsGrid .shadow-sm,
[data-theme="dark"] #clientsGrid .hover\:shadow-md:hover,
[data-theme="dark"] #clientsGrid [class*="shadow"] {
    box-shadow: none !important;
}

/* Purple/Pink background sections */
[data-theme="dark"] .from-purple-50,
[data-theme="dark"] .to-pink-50,
[data-theme="dark"] .bg-purple-50,
[data-theme="dark"] .bg-pink-50 {
    background: #1f2937 !important;
}

/* ========================================
   GRADIENTS - DARK MODE
   ======================================== */

[data-theme="dark"] .hero-section {
    background: linear-gradient(135deg, #1e3a8a 0%, #1e40af 100%) !important;
}

/* Custom Design Section - Purple/Pink gradient */
[data-theme="dark"] .bg-gradient-to-br.from-purple-50,
[data-theme="dark"] section.bg-gradient-to-br {
    background: linear-gradient(135deg, #1f2937 0%, #111827 100%) !important;
}

/* Other gradients */
[data-theme="dark"] .bg-gradient-to-br {
    background: linear-gradient(135deg, #1f2937 0%, #111827 100%) !important;
}

[data-theme="dark"] .text-gradient {
    background: none !important;
    -webkit-background-clip: unset !important;
    background-clip: unset !important;
    -webkit-text-fill-color: #93c5fd !important;
    color: #93c5fd !important;
}

/* Specifically target bg-clip-text elements */
[data-theme="dark"] .text-transparent,
[data-theme="dark"] [class*="bg-clip-text"] {
    background: none !important;
    -webkit-background-clip: unset !important;
    background-clip: unset !important;
    -webkit-text-fill-color: #a5b4fc !important;
    color: #a5b4fc !important;
}

/* Purple/Pink gradient text in dark mode - Remove gradient, use solid color */
[data-theme="dark"] .bg-gradient-to-r.from-purple-600.bg-clip-text,
[data-theme="dark"] .bg-gradient-to-r.from-purple-600.to-pink-600.bg-clip-text {
    background: none !important;
    -webkit-background-clip: unset !important;
    background-clip: unset !important;
    -webkit-text-fill-color: #93c5fd !important;
    color: #93c5fd !important;
}

/* Purple/Pink badge in dark mode */
[data-theme="dark"] .bg-gradient-to-r.from-purple-500 {
    background: linear-gradient(135deg, #8b5cf6 0%, #ec4899 100%) !important;
}

/* ========================================
   BUTTONS - DARK MODE
   ======================================== */

[data-theme="dark"] .btn-primary {
    color: #111827 !important;
}

[data-theme="dark"] .btn-outline {
    color: #93c5fd !important;
    border-color: #93c5fd !important;
}

[data-theme="dark"] .btn-outline:hover {
    background: #2575FC !important;
    color: #111827 !important;
}

/* Purple gradient buttons */
[data-theme="dark"] .from-purple-600.to-pink-600,
[data-theme="dark"] .bg-gradient-to-r.from-purple-600 {
    background: linear-gradient(135deg, #8b5cf6 0%, #ec4899 100%) !important;
}

[data-theme="dark"] .from-purple-600.to-pink-600:hover,
[data-theme="dark"] .bg-gradient-to-r.from-purple-600:hover {
    background: linear-gradient(135deg, #7c3aed 0%, #db2777 100%) !important;
}

/* Purple border buttons */
[data-theme="dark"] .border-purple-600 {
    border-color: #a78bfa !important;
    color: #a78bfa !important;
}

[data-theme="dark"] .border-purple-600:hover {
    background: rgba(167, 139, 250, 0.1) !important;
    border-color: #c4b5fd !important;
    color: #c4b5fd !important;
}

[data-theme="dark"] .text-purple-600 {
    color: #a78bfa !important;
}

/* ========================================
   BADGES - DARK MODE
   ======================================== */

[data-theme="dark"] .bg-green-100 {
    background: #065f46 !important;
}

[data-theme="dark"] .text-green-800 {
    color: #6ee7b7 !important;
}

[data-theme="dark"] .bg-blue-100 {
    background: #1e3a8a !important;
}

[data-theme="dark"] .text-blue-800 {
    color: #93c5fd !important;
}

[data-theme="dark"] .bg-red-100 {
    background: #7f1d1d !important;
}

[data-theme="dark"] .text-red-800 {
    color: #fca5a5 !important;
}

[data-theme="dark"] .bg-yellow-100 {
    background: #78350f !important;
}

[data-theme="dark"] .text-yellow-800 {
    color: #fde047 !important;
}

/* ========================================
   BORDERS - DARK MODE
   ======================================== */

[data-theme="dark"] .border-gray-200,
[data-theme="dark"] .border-gray-300 {
    border-color: #4b5563 !important;
}

[data-theme="dark"] .border {
    border-color: #374151 !important;
}

/* ========================================
   PRODUCT CARDS - DARK MODE
   ======================================== */

[data-theme="dark"] .product-item,
[data-theme="dark"] .portfolio-item {
    background: #1f2937 !important;
}

[data-theme="dark"] .product-item h3,
[data-theme="dark"] .portfolio-item h3 {
    color: #f9fafb !important;
}

[data-theme="dark"] .product-item p,
[data-theme="dark"] .portfolio-item p {
    color: #d1d5db !important;
}

[data-theme="dark"] .product-item .text-primary,
[data-theme="dark"] .portfolio-item .text-primary {
    color: #93c5fd !important;
}

/* ========================================
   SERVICE CARDS - DARK MODE
   ======================================== */

[data-theme="dark"] .service-card {
    background: #1f2937 !important;
    border-color: #374151 !important;
}

[data-theme="dark"] .service-card h3,
[data-theme="dark"] .service-card h4 {
    color: #f9fafb !important;
}

[data-theme="dark"] .service-card p {
    color: #d1d5db !important;
}

/* ========================================
   FOOTER - DARK MODE
   ======================================== */

[data-theme="dark"] footer {
    background: #0f172a !important;
    color: #e5e7eb !important;
    border-top-color: #1e293b !important;
}

[data-theme="dark"] footer h3,
[data-theme="dark"] footer h4 {
    color: #f9fafb !important;
}

[data-theme="dark"] footer p,
[data-theme="dark"] footer span,
[data-theme="dark"] footer li {
    color: #d1d5db !important;
}

[data-theme="dark"] footer a {
    color: #d1d5db !important;
}

[data-theme="dark"] footer a:hover {
    color: #93c5fd !important;
}

/* ========================================
   NAVIGATION - DARK MODE
   ======================================== */

[data-theme="dark"] .nav-link {
    color: #d1d5db !important;
}

[data-theme="dark"] .nav-link:hover,
[data-theme="dark"] .nav-link.active {
    color: #93c5fd !important;
    background: rgba(37, 117, 252, 0.15) !important;
}

/* ========================================
   TABLES - DARK MODE
   ======================================== */

[data-theme="dark"] table {
    background: #1f2937 !important;
    color: #f9fafb !important;
}

[data-theme="dark"] th {
    background: #374151 !important;
    color: #f9fafb !important;
}

[data-theme="dark"] td {
    border-color: #4b5563 !important;
    color: #e5e7eb !important;
}

[data-theme="dark"] tr:hover {
    background: #374151 !important;
}

/* ========================================
   ALERTS & MESSAGES - DARK MODE
   ======================================== */

[data-theme="dark"] .alert {
    background: #1f2937 !important;
    color: #f9fafb !important;
    border-color: #374151 !important;
}

[data-theme="dark"] .alert-success {
    background: #064e3b !important;
    border-color: #065f46 !important;
    color: #6ee7b7 !important;
}

[data-theme="dark"] .alert-error {
    background: #7f1d1d !important;
    border-color: #991b1b !important;
    color: #fca5a5 !important;
}

[data-theme="dark"] .alert-warning {
    background: #78350f !important;
    border-color: #92400e !important;
    color: #fde047 !important;
}

[data-theme="dark"] .alert-info {
    background: #1e3a8a !important;
    border-color: #1e40af !important;
    color: #93c5fd !important;
}

/* ========================================
   CART QUANTITY BUTTONS - DARK MODE
   Ensure + / − controls remain clearly visible
   ======================================== */

[data-theme="dark"] .qty-btn,
[data-theme="dark"] button.qty-btn {
    background: #f9fafb !important;   /* light button on dark background */
    color: #111827 !important;        /* dark symbol text */
    border: 1px solid #4b5563 !important;
    box-shadow: none !important;
}

/* ========================================
   CUSTOM DESIGN PAGE - DARK MODE
   ======================================== */

[data-theme="dark"] .border-dashed {
    background: #111827 !important;
    border-color: #4b5563 !important;
}

[data-theme="dark"] .border-dashed:hover {
    background: #1f2937 !important;
    border-color: #93c5fd !important;
}

[data-theme="dark"] .border-dashed .text-lg,
[data-theme="dark"] .border-dashed p,
[data-theme="dark"] .border-dashed span {
    color: #e5e7eb !important;
}

/* ========================================
   HOVER STATES - DARK MODE
   ======================================== */

[data-theme="dark"] .hover\\:bg-gray-50:hover {
    background: #374151 !important;
}

[data-theme="dark"] .hover\\:text-primary:hover {
    color: #93c5fd !important;
}

/* ========================================
   BREADCRUMBS - DARK MODE
   ======================================== */

[data-theme="dark"] .breadcrumb {
    color: #d1d5db !important;
}

[data-theme="dark"] .breadcrumb a {
    color: #9ca3af !important;
}

[data-theme="dark"] .breadcrumb a:hover {
    color: #93c5fd !important;
}

/* ========================================
   PRICING - DARK MODE
   ======================================== */

[data-theme="dark"] .price {
    color: #93c5fd !important;
}

[data-theme="dark"] .text-2xl,
[data-theme="dark"] .text-3xl {
    color: #f9fafb !important;
}

/* ========================================
   MODALS - DARK MODE
   ======================================== */

[data-theme="dark"] .modal {
    background: #1f2937 !important;
    color: #f9fafb !important;
}

[data-theme="dark"] .modal-header {
    border-bottom-color: #374151 !important;
}

[data-theme="dark"] .modal-footer {
    border-top-color: #374151 !important;
}

/* ========================================
   DROPDOWN - DARK MODE
   ======================================== */

[data-theme="dark"] .dropdown-menu {
    background: #1f2937 !important;
    border-color: #374151 !important;
}

[data-theme="dark"] .dropdown-item {
    color: #e5e7eb !important;
}

[data-theme="dark"] .dropdown-item:hover {
    background: #374151 !important;
    color: #5eead4 !important;
}

/* ========================================
   SCROLLBAR - DARK MODE
   ======================================== */

[data-theme="dark"] ::-webkit-scrollbar {
    background: #1f2937 !important;
}

[data-theme="dark"] ::-webkit-scrollbar-thumb {
    background: #4b5563 !important;
}

[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
    background: #6b7280 !important;
}

/* ========================================
   SELECTION - DARK MODE
   ======================================== */

[data-theme="dark"] ::selection {
    background: #2575FC !important;
    color: #111827 !important;
}

/* ========================================
   DISABLED STATES - DARK MODE
   ======================================== */

[data-theme="dark"] :disabled,
[data-theme="dark"] .disabled {
    opacity: 0.5 !important;
    color: #6b7280 !important;
}

/* ========================================
   FOCUS STATES - DARK MODE
   ======================================== */

[data-theme="dark"] *:focus {
    outline-color: #2575FC !important;
}

[data-theme="dark"] input:focus,
[data-theme="dark"] textarea:focus,
[data-theme="dark"] select:focus {
    border-color: #2575FC !important;
    box-shadow: 0 0 0 3px rgba(37, 117, 252, 0.25) !important;
}

/* ========================================
   LOADING STATES - DARK MODE
   ======================================== */

[data-theme="dark"] .spinner {
    border-color: #4b5563 !important;
    border-top-color: #93c5fd !important;
}

/* ========================================
   CODE BLOCKS - DARK MODE
   ======================================== */

[data-theme="dark"] code,
[data-theme="dark"] pre {
    background: #0f172a !important;
    color: #e5e7eb !important;
    border-color: #374151 !important;
}

/* ========================================
   ENSURE NO BLACK TEXT
   ======================================== */

[data-theme="dark"] [style*="color: #000"],
[data-theme="dark"] [style*="color: black"],
[data-theme="dark"] [style*="color: rgb(0, 0, 0)"],
[data-theme="dark"] [style*="color:#000"],
[data-theme="dark"] [style*="color:#1a1a1a"],
[data-theme="dark"] [style*="color: #1a1a1a"] {
    color: #f9fafb !important;
}

/* Ensure all text elements have light color in dark mode */
[data-theme="dark"] .text-black {
    color: #f9fafb !important;
}