/* Dark Mode Styles - Blue Theme */
.dark,
[data-theme="dark"] {
    --tw-bg-opacity: 1;
    background-color: rgb(30 41 59 / var(--tw-bg-opacity)); /* Blue-gray background */
}
.dark body,
[data-theme="dark"] body {
    background-color: #1e293b; /* Dark blue-gray */
    color: #e0f2fe; /* Light blue-white text */
}
.dark .bg-white,
[data-theme="dark"] .bg-white {
    background-color: #334155 !important; /* Medium blue-gray */
}
.dark .bg-gray-50,
[data-theme="dark"] .bg-gray-50 {
    background-color: #1e293b !important; /* Dark blue-gray */
}
.dark .bg-gray-100,
[data-theme="dark"] .bg-gray-100 {
    background-color: #334155 !important; /* Medium blue-gray */
}
.dark .bg-gray-200,
[data-theme="dark"] .bg-gray-200 {
    background-color: #475569 !important; /* Light blue-gray */
}
.dark .bg-gray-300,
[data-theme="dark"] .bg-gray-300 {
    background-color: #64748b !important; /* Lighter blue-gray */
}
.dark .bg-gray-400,
[data-theme="dark"] .bg-gray-400 {
    background-color: #94a3b8 !important; /* Even lighter blue-gray */
}
.dark .bg-gray-500,
[data-theme="dark"] .bg-gray-500 {
    background-color: #cbd5e1 !important; /* Very light blue-gray */
}
.dark .bg-gray-600,
[data-theme="dark"] .bg-gray-600 {
    background-color: #e2e8f0 !important; /* Almost white blue */
}
.dark .bg-gray-700,
[data-theme="dark"] .bg-gray-700 {
    background-color: #f1f5f9 !important; /* Very light blue */
}
.dark .bg-gray-800,
[data-theme="dark"] .bg-gray-800 {
    background-color: #334155 !important; /* Medium blue-gray */
}
.dark .bg-gray-900,
[data-theme="dark"] .bg-gray-900 {
    background-color: #1e293b !important; /* Dark blue-gray */
}

/* Dark mode text colors - Blue Theme */
.dark .text-primary,
[data-theme="dark"] .text-primary {
    color: #60a5fa !important; /* Light blue for primary text */
}
.dark .text-secondary,
[data-theme="dark"] .text-secondary {
    color: #a78bfa !important; /* Light purple for secondary text */
}
.dark .text-gray-800,
.dark .text-gray-700,
.dark .text-gray-600,
[data-theme="dark"] .text-gray-800,
[data-theme="dark"] .text-gray-700,
[data-theme="dark"] .text-gray-600 {
    color: #e0f2fe !important; /* Light blue-white text */
}
.dark .text-gray-500,
.dark .text-gray-400,
[data-theme="dark"] .text-gray-500,
[data-theme="dark"] .text-gray-400 {
    color: #bae6fd !important; /* Medium light blue text */
}
.dark .text-gray-300,
[data-theme="dark"] .text-gray-300 {
    color: #e0f2fe !important; /* Light blue-white text */
}
.dark .text-gray-200,
[data-theme="dark"] .text-gray-200 {
    color: #f0f9ff !important; /* Very light blue text */
}
.dark .text-gray-100,
[data-theme="dark"] .text-gray-100 {
    color: #f8fafc !important; /* Almost white blue */
}
.dark .text-white,
[data-theme="dark"] .text-white {
    color: #ffffff !important;
}

/* Dark mode borders - Blue Theme */
.dark .border-gray-300,
[data-theme="dark"] .border-gray-300 {
    border-color: #64748b !important; /* Blue-gray border */
}
.dark .border-gray-600,
[data-theme="dark"] .border-gray-600 {
    border-color: #475569 !important; /* Darker blue-gray border */
}
.dark .border-white\/20,
[data-theme="dark"] .border-white\/20 {
    border-color: rgba(224, 242, 254, 0.2) !important; /* Light blue-white with opacity */
}

/* Dark mode form inputs - Blue Theme */
.dark input,
.dark textarea,
.dark select,
[data-theme="dark"] input,
[data-theme="dark"] textarea,
[data-theme="dark"] select {
    background-color: #475569 !important; /* Blue-gray background */
    color: #e0f2fe !important; /* Light blue-white text */
    border: none !important;
    outline: none !important;
}
.dark input::placeholder,
.dark textarea::placeholder,
[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder {
    color: #94a3b8 !important; /* Medium blue-gray placeholder */
}

/* Dark mode cards and shadows - Blue Theme */
.dark .card,
[data-theme="dark"] .card {
    background-color: #334155 !important; /* Blue-gray card background */
}
.dark .card:hover,
[data-theme="dark"] .card:hover {
    box-shadow: 0 10px 25px -5px rgba(30, 41, 59, 0.4), 0 10px 10px -5px rgba(30, 41, 59, 0.2);
}
.dark .shadow-md,
[data-theme="dark"] .shadow-md {
    box-shadow: 0 4px 6px -1px rgba(30, 41, 59, 0.4), 0 2px 4px -2px rgba(30, 41, 59, 0.3) !important;
}
.dark .shadow-lg,
[data-theme="dark"] .shadow-lg {
    box-shadow: 0 10px 15px -3px rgba(30, 41, 59, 0.4), 0 4px 6px -4px rgba(30, 41, 59, 0.3) !important;
}
.dark .shadow-xl,
[data-theme="dark"] .shadow-xl {
    box-shadow: 0 20px 25px -5px rgba(30, 41, 59, 0.4), 0 8px 10px -6px rgba(30, 41, 59, 0.3) !important;
}

/* Dark mode timeline */
.dark .timeline-line {
    display: none; /* COMPLETELY HIDDEN: Garis timeline sepenuhnya dihilangkan untuk dark mode */
    /* background-color: transparent;
    background-color: #374151; */
}
.dark .timeline-item::before {
    border-color: #1e293b;
    background-color: #c8102e;
}

/* Dark mode buttons */
.dark .bg-primary\/10 {
    background-color: rgba(147, 197, 253, 0.1) !important;
}
.dark .bg-primary\/10 > i {
    color: #93c5fd !important;
}

/* Dark mode hover states */
.dark .hover\:bg-gray-100:hover {
    background-color: #334155 !important;
}
.dark .hover\:bg-gray-200:hover {
    background-color: #475569 !important;
}
.dark .hover\:text-gray-200:hover {
    color: #e5e7eb !important;
}
.dark .hover\:bg-white\/10:hover {
    background-color: rgba(255, 255, 255, 0.1) !important;
}
.dark .hover\:bg-white\/20:hover {
    background-color: rgba(255, 255, 255, 0.2) !important;
}

/* Fix untuk CTA Buttons - Hanya untuk button, bukan navigation menu */
.dark .hero-section a[href="inventory.php"],
.dark .group a[href="inventory.php"] {
    background-color: #ffffff !important;
    color: #1f2937 !important;
}
.dark .hero-section a[href="inventory.php"]:hover,
.dark .group a[href="inventory.php"]:hover {
    background-color: #f3f4f6 !important;
    color: #dc2626 !important;
}
.dark .hero-section a[href="inventory.php"] i,
.dark .group a[href="inventory.php"] i {
    color: #1f2937 !important;
}
.dark .hero-section a[href="inventory.php"]:hover i,
.dark .group a[href="inventory.php"]:hover i {
    color: #dc2626 !important;
}
.dark .hero-section a[href="inventory.php"] span,
.dark .group a[href="inventory.php"] span {
    color: #1f2937 !important;
}
.dark .hero-section a[href="inventory.php"]:hover span,
.dark .group a[href="inventory.php"]:hover span {
    color: #dc2626 !important;
}

/* Dark mode specific elements */
.dark .bg-green-100 {
    background-color: #065f46 !important;
}
.dark .text-green-800 {
    color: #86efac !important;
}
.dark .bg-yellow-100 {
    background-color: #713f12 !important;
}
.dark .text-yellow-800 {
    color: #fde047 !important;
}
.dark .bg-red-100 {
    background-color: #7f1d1d !important;
}
.dark .text-red-800 {
    color: #fca5a5 !important;
}

/* =============================================== */
/* NEWSLETTER INPUT STYLING - COMPREHENSIVE FIX */
/* =============================================== */

/* Light Mode - Default styling untuk newsletter input */
input[type="email"][placeholder="Your email address"] {
    background-color: #ffffff !important;
    color: #1f2937 !important;
    border: none !important;
    border-radius: 0.5rem 0 0 0.5rem !important;
    outline: none !important;
}
input[type="email"][placeholder="Your email address"]::placeholder {
    color: #6b7280 !important;
}
input[type="email"][placeholder="Your email address"]:focus {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}

/* Newsletter Subscribe Button - Light Mode */
button:has-text("Subscribe"), 
.newsletter-subscribe-btn,
.flex input[type="email"] + button {
    background-color: #dc2626 !important;
    color: #ffffff !important;
    border-radius: 0 0.5rem 0.5rem 0 !important;
    transition: all 0.3s ease !important;
    border: none !important;
}
button:has-text("Subscribe"):hover,
.newsletter-subscribe-btn:hover,
.flex input[type="email"] + button:hover {
    background-color: #b91c1c !important;
    border: none !important;
}

/* Dark Mode - Newsletter input styling - FIXED DOUBLE BORDER */
.dark input[type="email"][placeholder="Your email address"] {
    background-color: #374151 !important;
    color: #f9fafb !important;
    border: none !important;
    border-radius: 0.5rem 0 0 0.5rem !important;
    outline: none !important;
}
.dark input[type="email"][placeholder="Your email address"]::placeholder {
    color: #9ca3af !important;
}
.dark input[type="email"][placeholder="Your email address"]:focus {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}

/* Dark Mode - Newsletter Subscribe Button */
.dark button:has-text("Subscribe"),
.dark .newsletter-subscribe-btn,
.dark .flex input[type="email"] + button {
    background-color: #dc2626 !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 0 0.5rem 0.5rem 0 !important;
}
.dark button:has-text("Subscribe"):hover,
.dark .newsletter-subscribe-btn:hover,
.dark .flex input[type="email"] + button:hover {
    background-color: #b91c1c !important;
    border: none !important;
}

/* Newsletter Subscribe Button - Konsisten styling */
button:has-text("Subscribe"), 
.newsletter-subscribe-btn,
.flex input[type="email"] + button {
    background-color: #dc2626 !important;
    color: #ffffff !important;
    border-radius: 0 0.5rem 0.5rem 0 !important;
    transition: all 0.3s ease !important;
    border: none !important;
}
button:has-text("Subscribe"):hover,
.newsletter-subscribe-btn:hover,
.flex input[type="email"] + button:hover {
    background-color: #b91c1c !important;
    border: none !important;
}

/* Dark mode untuk subscribe button tetap sama */
.dark button:has-text("Subscribe"),
.dark .newsletter-subscribe-btn,
.dark .flex input[type="email"] + button {
    background-color: #dc2626 !important;
    color: #ffffff !important;
    border: none !important;
}
.dark button:has-text("Subscribe"):hover,
.dark .newsletter-subscribe-btn:hover,
.dark .flex input[type="email"] + button:hover {
    background-color: #b91c1c !important;
    border: none !important;
}

/* Navigation Menu Styling untuk Dark Mode */
.dark nav a {
    color: #f1f5f9 !important;
}
.dark nav a:hover {
    color: #e2e8f0 !important;
}
.dark nav a.text-white {
    color: #ffffff !important;
}
.dark nav a.text-white:hover {
    color: #e5e7eb !important;
}

/* Pastikan semua link inventory terlihat dengan baik di dark mode */
.dark a[href="inventory.php"].text-white {
    color: #ffffff !important;
}
.dark a[href="inventory.php"].text-white:hover {
    color: #e5e7eb !important;
}

/* =============================================== */
/* FIXED: CATEGORY BUTTONS HOVER UNTUK DARK MODE */
/* =============================================== */

/* Category buttons hover fix - Target semua button putih di inventory section */
.dark button.bg-white {
    background-color: #ffffff !important;
    color: #374151 !important;
    border: 1px solid #e5e7eb !important;
}
.dark button.bg-white:hover {
    background-color: #dc2626 !important;
    color: #ffffff !important;
    border-color: #dc2626 !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(220, 38, 38, 0.3) !important;
}

/* Alternative selector untuk category buttons */
.dark .flex.flex-wrap button:not(.bg-primary) {
    background-color: #ffffff !important;
    color: #374151 !important;
}
.dark .flex.flex-wrap button:not(.bg-primary):hover {
    background-color: #dc2626 !important;
    color: #ffffff !important;
}

/* =============================================== */
/* FIXED: THEME TOGGLE BUTTON - HAPUS KOTAK MERAH */
/* =============================================== */

/* Remove focus outline dan kotak merah pada theme toggle */
.dark #theme-toggle-desktop:focus,
.dark #theme-toggle-mobile:focus,
#theme-toggle-desktop:focus,
#theme-toggle-mobile:focus {
    outline: none !important;
    box-shadow: none !important;
    border: none !important;
    background-color: transparent !important;
}

/* Theme toggle button styling yang konsisten */
#theme-toggle-desktop,
#theme-toggle-mobile {
    background: transparent !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}
#theme-toggle-desktop:hover,
#theme-toggle-mobile:hover {
    background-color: rgba(255, 255, 255, 0.1) !important;
    border-radius: 0.5rem !important;
}

/* =============================================== */
/* FIXED: QUICK LINKS - HAPUS KOTAK YANG MUNCUL */
/* =============================================== */

/* Remove focus states yang menyebabkan kotak pada links */
.dark footer a:focus,
footer a:focus {
    outline: none !important;
    box-shadow: none !important;
    text-decoration: underline !important;
}

/* FIXED: Navigation menu focus - hapus kotak saat diklik */
.dark nav a:focus,
nav a:focus,
.dark .nav-link:focus,
.nav-link:focus {
    outline: none !important;
    box-shadow: none !important;
    text-decoration: none !important;
}

/* Mobile menu links focus fix */
.dark #mobile-menu a:focus,
#mobile-menu a:focus {
    outline: none !important;
    box-shadow: none !important;
    text-decoration: none !important;
}

/* Specific fix untuk header navigation links - semua browser */
.dark nav a[href="inventory.php"]:focus,
nav a[href="inventory.php"]:focus,
.dark nav a[href="#company-section"]:focus,
nav a[href="#company-section"]:focus,
.dark nav a[href="#why-us"]:focus,
nav a[href="#why-us"]:focus,
.dark nav a[href="#innovation"]:focus,
nav a[href="#innovation"]:focus,
.dark nav a[href="#contact"]:focus,
nav a[href="#contact"]:focus {
    outline: none !important;
    box-shadow: none !important;
    border: none !important;
    text-decoration: none !important;
}

/* Footer links styling yang konsisten */
.dark footer a {
    color: #d1d5db !important;
    transition: color 0.3s ease !important;
}
.dark footer a:hover {
    color: #ffffff !important;
    text-decoration: none !important;
}

/* =============================================== */
/* FIXED: MOBILE MENU - HAPUS KOTAK MERAH */
/* =============================================== */

/* Mobile menu button focus fix */
#mobile-menu-button:focus,
.dark #mobile-menu-button:focus {
    outline: none !important;
    box-shadow: none !important;
    border: none !important;
    background-color: transparent !important;
}

/* Mobile menu button override focus - STRONGEST SELECTOR */
button#mobile-menu-button:focus,
button#mobile-menu-button:focus-visible,
button#mobile-menu-button:active,
.dark button#mobile-menu-button:focus,
.dark button#mobile-menu-button:focus-visible,
.dark button#mobile-menu-button:active {
    outline: none !important;
    box-shadow: none !important;
    border: none !important;
    background-color: transparent !important;
}

/* Mobile menu button styling */
#mobile-menu-button {
    background: transparent !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}
#mobile-menu-button:hover {
    background-color: transparent !important;
    opacity: 0.8 !important;
    transition: opacity 0.3s ease !important;
}

/* Mobile menu links focus fix */
#mobile-menu a:focus,
.dark #mobile-menu a:focus {
    outline: none !important;
    box-shadow: none !important;
}

/* Mobile menu container styling */
#mobile-menu {
    border: none !important;
    outline: none !important;
}

/* =============================================== */
/* CONTACT FORM DARK MODE STYLING */
/* =============================================== */

/* Contact form dark mode styling */
.dark #contactForm {
    background-color: #1e293b !important;
}
.dark #contactForm input,
.dark #contactForm textarea,
.dark #contactForm select {
    background-color: #334155 !important;
    color: #f1f5f9 !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}
.dark #contactForm input:focus,
.dark #contactForm textarea:focus,
.dark #contactForm select:focus {
    background-color: #475569 !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}
.dark #contactForm input::placeholder,
.dark #contactForm textarea::placeholder {
    color: #94a3b8 !important;
}
.dark #contactForm label {
    color: #e2e8f0 !important;
}

/* Custom Anti-Spam Verification Dark Mode */
.dark #contactForm .bg-gray-50 {
    background-color: #1e293b !important;
    border-color: #475569 !important;
}
.dark #contactForm .bg-gray-200 {
    background-color: #334155 !important;
}
.dark #contactForm .bg-primary {
    background-color: #dc2626 !important;
}
.dark #contactForm .bg-red-600 {
    background-color: #dc2626 !important;
}
.dark #contactForm .bg-red-50 {
    background-color: rgba(220, 38, 38, 0.1) !important;
}
.dark #contactForm .bg-primary\/5 {
    background-color: rgba(220, 38, 38, 0.05) !important;
}
.dark #contactForm #dragHandle {
    background-color: #f8fafc !important;
    border-color: rgba(220, 38, 38, 0.3) !important;
}
.dark #contactForm #dragHandle:hover {
    border-color: rgba(220, 38, 38, 0.5) !important;
}
.dark #contactForm #targetZone {
    border-color: rgba(220, 38, 38, 0.3) !important;
    background-color: rgba(220, 38, 38, 0.05) !important;
}
.dark #contactForm #targetZone.border-red-600 {
    border-color: #dc2626 !important;
    background-color: rgba(220, 38, 38, 0.1) !important;
}
.dark #contactForm .text-primary {
    color: #dc2626 !important;
}
.dark #contactForm .text-primary\/60 {
    color: rgba(220, 38, 38, 0.6) !important;
}
.dark #contactForm .border-primary\/30 {
    border-color: rgba(220, 38, 38, 0.3) !important;
}
.dark #contactForm .text-gray-600 {
    color: #9ca3af !important;
}

/* Trail Lines Dark Mode */
.dark #contactForm #trailLines .bg-primary\/60 {
    background-color: rgba(220, 38, 38, 0.6) !important;
}
.dark #contactForm #trailLines .bg-primary\/40 {
    background-color: rgba(220, 38, 38, 0.4) !important;
}
.dark #contactForm #trailLines .bg-primary\/20 {
    background-color: rgba(220, 38, 38, 0.2) !important;
}

/* Success and Error Alerts Dark Mode */
.dark #successAlert {
    background-color: #064e3b !important;
    border-color: #065f46 !important;
    color: #d1fae5 !important;
}
.dark #successAlert i {
    color: #10b981 !important;
}

.dark #errorAlert {
    background-color: #7f1d1d !important;
    border-color: #991b1b !important;
    color: #fecaca !important;
}
.dark #errorAlert i {
    color: #ef4444 !important;
}