/* 
   Mohammad Amin Audio Tools - Dark Mode
   Version: 3.0
*/

/* Dark mode variables */
.dark-mode {
    /* Primary Colors */
    --primary-color: #818cf8;      /* Lighter violet-blue for better contrast */
    --primary-dark: #6366f1;       /* Original violet-blue becomes dark */
    --primary-light: #a5b4fc;      /* Light violet-blue */
    
    /* Neutral Colors - Inverted */
    --dark: #f8fafc;               /* Light becomes dark text */
    --gray-dark: #e2e8f0;          /* Light gray for secondary text */
    --gray-medium: #64748b;        /* Darker gray for borders */
    --gray-light: #0f172a;         /* Very dark for backgrounds */
    --white: #1e293b;              /* Dark slate for card backgrounds */
    
    /* Glass Effect */
    --glass-background: rgba(15, 23, 42, 0.75);
    --glass-border: 1px solid rgba(30, 41, 59, 0.7);
    
    /* Shadows for dark mode */
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 8px 16px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.4), 0 10px 10px -5px rgba(0, 0, 0, 0.3);
    --shadow-xl: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    
    /* Neumorphic Shadows for dark mode */
    --neo-shadow: 6px 6px 12px #131c32, -6px -6px 12px #1e293b;
    
    /* Gradients */
    --gradient-dark: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
    --gradient-light: linear-gradient(135deg, rgba(30, 41, 59, 0.9) 0%, rgba(15, 23, 42, 0.9) 100%);
}

/* Body and general styles */
.dark-mode body {
    background-color: var(--gray-light);
    color: var(--dark);
}

/* Links */
.dark-mode a {
    color: var(--primary-color);
}

.dark-mode a:hover {
    color: var(--primary-light);
}

/* Buttons */
.dark-mode .btn-primary {
    background: var(--gradient-primary);
    color: var(--dark);
}

.dark-mode .btn-outline-primary {
    border-color: var(--primary-color);
    color: var(--primary-color);
}

.dark-mode .btn-outline-primary:hover {
    background-color: var(--primary-color);
    color: var(--dark);
}

.dark-mode .btn-outline-dark {
    border-color: var(--dark);
    color: var(--dark);
}

.dark-mode .btn-outline-dark:hover {
    background-color: var(--dark);
    color: var(--gray-light);
}

.dark-mode .btn-glass {
    background: var(--glass-background);
    color: var(--dark);
}

/* Cards */
.dark-mode .card {
    background-color: var(--white);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.dark-mode .card-body {
    color: var(--dark);
}

.dark-mode .card-footer {
    background-color: rgba(15, 23, 42, 0.3) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.05) !important;
}

.dark-mode .card::before {
    background: linear-gradient(145deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0) 100%);
}

/* Glassmorphism Card */
.dark-mode .card-glass {
    background: var(--glass-background);
    backdrop-filter: var(--glass-backdrop-filter);
    -webkit-backdrop-filter: var(--glass-backdrop-filter);
    border: var(--glass-border);
}

/* Neumorphic Card */
.dark-mode .card-neo {
    background: var(--white);
    box-shadow: var(--neo-shadow);
}

/* Header & Navbar */
.dark-mode .navbar {
    background: var(--glass-background);
    border-bottom: var(--glass-border);
}

.dark-mode .navbar-brand {
    color: var(--dark);
}

.dark-mode .navbar .nav-link {
    color: var(--gray-dark);
}

.dark-mode .navbar .nav-link:hover, 
.dark-mode .navbar .nav-link.active {
    color: var(--white);
}

.dark-mode .navbar .dropdown-menu {
    background: var(--glass-background);
    border: var(--glass-border);
}

.dark-mode .navbar .dropdown-item {
    color: var(--gray-dark);
}

.dark-mode .navbar .dropdown-item:hover {
    background: rgba(99, 102, 241, 0.2);
    color: var(--primary-light);
}

/* Hero Section */
.dark-mode .hero-section {
    background: var(--gradient-dark);
}

.dark-mode .hero-section .lead {
    color: var(--gray-dark);
}

.dark-mode .hero-image {
    box-shadow: var(--shadow-xl);
}

/* Featured Products */
.dark-mode .featured-products {
    background-color: var(--gray-light);
}

.dark-mode .product-price {
    color: var(--primary-color);
}

/* Product tags */
.dark-mode .tag-new {
    background: linear-gradient(to right, var(--primary-color), var(--primary-dark));
}

.dark-mode .tag-sale {
    background: linear-gradient(to right, var(--accent-color), var(--accent-dark));
}

.dark-mode .tag-featured {
    background: linear-gradient(to right, var(--secondary-color), var(--secondary-dark));
}

.dark-mode .wishlist-btn {
    background: var(--white);
    border: 1px solid rgba(255, 255, 255, 0.05);
    color: var(--gray-dark);
}

/* About Section */
.dark-mode .about-section {
    background-color: var(--gray-light);
}

.dark-mode .section-badge {
    background: rgba(99, 102, 241, 0.2);
}

.dark-mode .experience-badge {
    background: rgba(30, 41, 59, 0.9);
    color: var(--dark);
}

.dark-mode .feature-item i {
    color: var(--primary-color);
}

.dark-mode .feature-item span {
    color: var(--gray-dark);
}

/* Testimonials */
.dark-mode .testimonial-card {
    background-color: rgba(30, 41, 59, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.dark-mode .testimonial-text {
    color: var(--gray-dark);
}

.dark-mode .testimonial-name {
    color: var(--dark);
}

.dark-mode .testimonial-position {
    color: var(--primary-color);
}

/* Newsletter */
.dark-mode .newsletter {
    background-color: var(--gray-light);
}

.dark-mode .newsletter-container {
    background: var(--white);
}

.dark-mode .newsletter-title {
    color: var(--dark);
}

.dark-mode .newsletter-text {
    color: var(--gray-dark);
}

.dark-mode .newsletter-input-group {
    background: rgba(15, 23, 42, 0.5);
}

.dark-mode .newsletter-input {
    color: var(--dark);
}

.dark-mode .newsletter-input::placeholder {
    color: var(--gray-medium);
}

.dark-mode .benefit-item {
    color: var(--gray-dark);
}

.dark-mode .newsletter-privacy {
    color: var(--gray-medium);
}

/* Footer */
.dark-mode footer {
    background-color: #0f172a;
}

.dark-mode footer .social-icon {
    background-color: rgba(255, 255, 255, 0.05);
}

/* Modal */
.dark-mode .modal-content {
    background-color: var(--white);
    color: var(--dark);
}

.dark-mode .modal-header {
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.dark-mode .modal-footer {
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

/* Forms */
.dark-mode .form-control {
    background-color: rgba(15, 23, 42, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--dark);
}

.dark-mode .form-control:focus {
    background-color: rgba(15, 23, 42, 0.7);
    border-color: var(--primary-color);
}

.dark-mode .form-control::placeholder {
    color: var(--gray-medium);
}

/* Alerts */
.dark-mode .alert {
    background-color: var(--white);
    color: var(--dark);
}

.dark-mode .alert-success {
    background-color: rgba(16, 185, 129, 0.2);
    border: 1px solid rgba(16, 185, 129, 0.3);
}

.dark-mode .alert-danger {
    background-color: rgba(239, 68, 68, 0.2);
    border: 1px solid rgba(239, 68, 68, 0.3);
}

.dark-mode .alert-warning {
    background-color: rgba(245, 158, 11, 0.2);
    border: 1px solid rgba(245, 158, 11, 0.3);
}

.dark-mode .alert-info {
    background-color: rgba(59, 130, 246, 0.2);
    border: 1px solid rgba(59, 130, 246, 0.3);
}

/* Dark Mode Toggle Button */
.dark-mode-toggle {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: transparent;
    border: none;
    color: var(--gray-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--transition-smooth);
    margin-left: 10px;
}

.dark-mode-toggle:hover {
    color: var(--primary-color);
    transform: rotate(15deg);
}

.dark-mode .dark-mode-toggle {
    color: var(--dark);
}

/* Extra adjustments for specific components */
.dark-mode .back-to-top {
    background: var(--primary-color);
}

.dark-mode .back-to-top:hover {
    background: var(--primary-light);
}

/* Dark Mode Headers */
.dark-mode h1, 
.dark-mode h2, 
.dark-mode h3, 
.dark-mode h4, 
.dark-mode h5, 
.dark-mode h6 {
    color: var(--dark);
}

/* Dark Mode Navigation */
.dark-mode .top-bar {
    background-color: rgba(0, 0, 0, 0.2);
}

.dark-mode .navbar {
    background-color: var(--white);
    box-shadow: var(--shadow-md);
}

.dark-mode .navbar .nav-link {
    color: var(--gray-dark);
}

.dark-mode .navbar .nav-link:hover, 
.dark-mode .navbar .nav-link.active {
    color: var(--primary-color);
}

/* Dark Mode Cards */
.dark-mode .card {
    background-color: var(--secondary-color);
    box-shadow: var(--shadow-sm);
}

.dark-mode .card-footer {
    background-color: rgba(0, 0, 0, 0.1);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* Dark Mode Buttons */
.dark-mode .btn-outline-secondary {
    border-color: var(--gray-medium);
    color: var(--gray-medium);
}

.dark-mode .btn-outline-secondary:hover {
    background-color: var(--gray-medium);
    color: var(--white);
}

/* Dark Mode List Groups */
.dark-mode .list-group-item {
    background-color: var(--secondary-color);
    border-color: rgba(255, 255, 255, 0.1);
    color: var(--dark);
}

/* Dark Mode Modals */
.dark-mode .modal-content {
    background-color: var(--secondary-color);
    border-color: rgba(255, 255, 255, 0.1);
}

.dark-mode .modal-header {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.dark-mode .modal-footer {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.dark-mode .close {
    color: var(--dark);
}

/* Dark Mode Tables */
.dark-mode .table {
    color: var(--dark);
}

.dark-mode .table-bordered {
    border-color: rgba(255, 255, 255, 0.1);
}

.dark-mode .table-striped tbody tr:nth-of-type(odd) {
    background-color: rgba(255, 255, 255, 0.05);
}

.dark-mode .table-hover tbody tr:hover {
    background-color: rgba(255, 255, 255, 0.075);
}

/* Dark Mode Backgrounds */
.dark-mode .bg-light {
    background-color: var(--secondary-color) !important;
}

.dark-mode .bg-white {
    background-color: var(--white) !important;
}

.dark-mode .bg-dark {
    background-color: #000 !important;
}

/* Dark Mode Text Colors */
.dark-mode .text-dark {
    color: var(--dark) !important;
}

.dark-mode .text-muted {
    color: var(--gray-medium) !important;
}

/* Dark Mode Dropdowns */
.dark-mode .dropdown-menu {
    background-color: var(--secondary-color);
    border-color: rgba(255, 255, 255, 0.1);
}

.dark-mode .dropdown-item {
    color: var(--dark);
}

.dark-mode .dropdown-item:hover,
.dark-mode .dropdown-item:focus {
    background-color: rgba(255, 255, 255, 0.075);
    color: var(--primary-color);
}

/* Dark Mode Breadcrumbs */
.dark-mode .breadcrumb {
    background-color: rgba(255, 255, 255, 0.05);
}

.dark-mode .breadcrumb-item.active {
    color: var(--gray-dark);
}

/* Dark Mode Pagination */
.dark-mode .page-link {
    background-color: var(--secondary-color);
    border-color: rgba(255, 255, 255, 0.1);
    color: var(--primary-color);
}

.dark-mode .page-link:hover {
    background-color: rgba(255, 255, 255, 0.075);
    border-color: rgba(255, 255, 255, 0.1);
    color: var(--primary-light);
}

.dark-mode .page-item.active .page-link {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    color: var(--white);
}

.dark-mode .page-item.disabled .page-link {
    background-color: var(--secondary-color);
    border-color: rgba(255, 255, 255, 0.1);
    color: var(--gray-medium);
}

/* Dark Mode Alerts */
.dark-mode .alert {
    border-color: rgba(255, 255, 255, 0.1);
}

.dark-mode .alert-primary {
    background-color: rgba(79, 70, 229, 0.2);
    color: var(--primary-light);
}

.dark-mode .alert-secondary {
    background-color: rgba(100, 116, 139, 0.2);
    color: #cbd5e1;
}

/* Dark Mode Badges */
.dark-mode .badge.bg-light {
    background-color: rgba(255, 255, 255, 0.2) !important;
    color: var(--dark);
}

/* Dark Mode Footer */
.dark-mode footer {
    background-color: rgba(0, 0, 0, 0.2);
}

/* Dark Mode Special Sections */
.dark-mode .hero-section {
    background-color: var(--white);
}

.dark-mode .featured-products {
    background-color: var(--gray-light);
}

.dark-mode .testimonials {
    background-color: var(--white);
}

.dark-mode .newsletter {
    background-color: rgba(0, 0, 0, 0.3);
}

/* Dark Mode Product Elements */
.dark-mode .product-specs dt {
    color: var(--gray-dark);
}

.dark-mode .product-specs dd {
    color: var(--dark);
}

.dark-mode .filter-button {
    border-color: var(--gray-medium);
    color: var(--gray-dark);
}

.dark-mode .filter-button.active {
    background-color: var(--primary-color);
    color: var(--white);
    border-color: var(--primary-color);
}

/* Dark Mode Toggle Button */
.dark-mode-toggle {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: transparent;
    border: none;
    color: var(--gray-medium);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    bottom: 100px;
    right: 20px;
    z-index: 1000;
    box-shadow: var(--shadow-md);
    transition: var(--transition-base);
}

.dark-mode .dark-mode-toggle {
    color: var(--gray-dark);
}

.dark-mode-toggle:hover {
    transform: rotate(30deg);
}

/* Dark Mode Back to Top Button */
.back-to-top {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: var(--primary-color);
    color: var(--white);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 1000;
    box-shadow: var(--shadow-md);
    opacity: 0;
    visibility: hidden;
    transition: var(--transition-base);
}

.back-to-top.show {
    opacity: 1;
    visibility: visible;
}

.back-to-top:hover {
    background-color: var(--primary-dark);
    transform: translateY(-5px);
}

.dark-mode .back-to-top {
    background-color: var(--primary-color);
}

/* Dark Mode Scroll Bar */
.dark-mode::-webkit-scrollbar {
    width: 14px;
}

.dark-mode::-webkit-scrollbar-track {
    background-color: var(--white);
}

.dark-mode::-webkit-scrollbar-thumb {
    background-color: var(--gray-medium);
    border-radius: 7px;
    border: 3px solid var(--white);
}

.dark-mode::-webkit-scrollbar-thumb:hover {
    background-color: var(--primary-color);
}