/* ============================================= */
/*      ULTIMATE FULL PAGE DARK MODE FIX         */
/*      Copy-Paste Kar Do → Pura Site Dark Hoga   */
/* ============================================= */

html[data-theme="dark"] {
    background-color: #0f0f0f !important;
    color: #e0e0e0 !important;
}

/* Body & All Backgrounds */
html[data-theme="dark"] body {
    background: #121212 !important;
    color: #e8e8e8 !important;
}

/* Cards, Containers, Modals */
html[data-theme="dark"] .card,
html[data-theme="dark"] .modal-content,
html[data-theme="dark"] .list-group-item,
html[data-theme="dark"] .dropdown-menu,
html[data-theme="dark"] .toast,
html[data-theme="dark"] .offcanvas {
    background-color: #1e1e1e !important;
    color: #e0e0e0 !important;
    border-color: #333 !important;
}

/* Text Colors */
html[data-theme="dark"] h1, 
html[data-theme="dark"] h2, 
html[data-theme="dark"] h3, 
html[data-theme="dark"] h4, 
html[data-theme="dark"] h5, 
html[data-theme="dark"] h6,
html[data-theme="dark"] .text-dark {
    color: #ffffff !important;
}

html[data-theme="dark"] .text-muted {
    color: #aaaaaa !important;
}

/* Forms & Inputs */
html[data-theme="dark"] .form-control,
html[data-theme="dark"] .form-select,
html[data-theme="dark"] textarea,
html[data-theme="dark"] input {
    background-color: #2d2d2d !important;
    color: #e0e0e0 !important;
    border-color: #444 !important;
}

html[data-theme="dark"] .form-control:focus,
html[data-theme="dark"] .form-select:focus {
    background-color: #333 !important;
    color: #fff !important;
    border-color: #ffd60a !important;
    box-shadow: 0 0 0 0.2rem rgba(255, 214, 10, 0.25) !important;
}

/* Tables */
html[data-theme="dark"] .table {
    background-color: #1e1e1e !important;
    color: #e0e0e0 !important;
}

html[data-theme="dark"] .table td,
html[data-theme="dark"] .table th {
    border-color: #444 !important;
}

html[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) {
    background-color: #252525 !important;
}

/* Buttons */
html[data-theme="dark"] .btn-light {
    background-color: #333 !important;
    color: #fff !important;
}

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

html[data-theme="dark"] .btn-outline-light:hover {
    background-color: #ffd60a !important;
    color: #000 !important;
}

/* Navbar Special (Tumhara navy blue theme dark mein bhi rich lage) */
html[data-theme="dark"] .main-navbar {
    background: linear-gradient(to right, #001529, #002b55) !important;
    border-bottom: 1px solid #334 !important;
}

/* Profile Cover & Cards */
html[data-theme="dark"] .profile-header,
html[data-theme="dark"] .cover-photo {
    background: linear-gradient(135deg, #1a1a2e, #16213e) !important;
}

/* Alerts & Badges */
html[data-theme="dark"] .alert,
html[data-theme="dark"] .badge {
    filter: brightness(1.3);
}

/* Scrollbar (Bonus Premium Touch) */
html[data-theme="dark"] ::-webkit-scrollbar {
    width: 8px;
}
html[data-theme="dark"] ::-webkit-scrollbar-track {
    background: #1e1e1e;
}
html[data-theme="dark"] ::-webkit-scrollbar-thumb {
    background: #555;
    border-radius: 4px;
}
html[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
    background: #777;
}
/* Sabse Powerful Fix – Inline background-image ko bhi control karega */
html[data-theme="dark"] .cover-photo {
    filter: brightness(0.9) contrast(1.15) saturate(1.2) !important;
    background-blend-mode: normal !important;
}
/* UNIVERSAL CHAT DARK MODE – KISI BHI ID/CLASS PE KAAM KAREGA */
html[data-theme="dark"] [id*="chat"],
html[data-theme="dark"] [class*="chat"],
html[data-theme="dark"] .modal-content,
html[data-theme="dark"] .offcanvas {
    background: #121212 !important;
    color: #e0e0e0 !important;
}
/* CHATBOX HEADER – NAME & ONLINE STATUS 100% VISIBLE (DARK MODE) */
html[data-theme="dark"] .chat-header,
html[data-theme="dark"] #chatHeader,
html[data-theme="dark"] .chatbox-header {
    background: linear-gradient(135deg, #001f3f, #003366) !important;
    border-bottom: 1px solid #334 !important;
    padding: 12px 16px !important;
}

html[data-theme="dark"] #chatUserName,
html[data-theme="dark"] .chat-header * {
    color: #ffffff !important;
}

/* Online / Last seen status – Green & Clear */
html[data-theme="dark"] #userStatus,
html[data-theme="dark"] .chat-header small,
html[data-theme="dark"] .online-status {
    color: #00ff88 !important;           /* Bright green */
    font-weight: 600 !important;
    text-shadow: 0 0 6px rgba(0, 255, 136, 0.6) !important;
    font-size: 0.85rem !important;
}

/* Offline status bhi dikhna chahiye */
html[data-theme="dark"] #userStatus.text-muted {
    color: #ff6b6b !important;           /* Red for offline */
    text-shadow: 0 0 6px rgba(255, 107, 107, 0.5) !important;
}

/* Typing indicator bhi clear */
html[data-theme="dark"] #typing-indicator {
    color: #ffd60a !important;
    font-style: italic;
    font-weight: 600;
}
/* SEARCH.PHP CARDS – FULL DARK MODE FIX (Copy-Paste Kar Do) */
html[data-theme="dark"] .profile-card,
html[data-theme="dark"] .card,
html[data-theme="dark"] .card-body,
html[data-theme="dark"] .bg-white,
html[data-theme="dark"] [class*="bg-light"] {
    background-color: #1a1a1a !important;
    background: #1e1e1e !important;
    border: 1px solid #333 !important;
    color: #e0e0e0 !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.6) !important;
}

/* Card text – name, age, city etc. */
html[data-theme="dark"] .profile-card h5,
html[data-theme="dark"] .profile-card h6,
html[data-theme="dark"] .profile-card .text-dark,
html[data-theme="dark"] .card-title,
html[data-theme="dark"] .card-text {
    color: #ffffff !important;
}

/* Muted text (location, caste etc.) */
html[data-theme="dark"] .text-muted,
html[data-theme="dark"] .profile-card small {
    color: #bbbbbb !important;
}

/* Buttons inside card (Interest, Message, Favorite) */
html[data-theme="dark"] .profile-card .btn {
    background: rgba(255, 214, 10, 0.15) !important;
    border: 1px solid #ffd60a !important;
    color: #ffd60a !important;
}

html[data-theme="dark"] .profile-card .btn:hover {
    background: #ffd60a !important;
    color: #000 !important;
    transform: translateY(-2px);
}

/* Interest sent / Favorite icon */
html[data-theme="dark"] .fa-heart.text-danger,
html[data-theme="dark"] .fa-star.text-warning {
    filter: brightness(1.3) drop-shadow(0 0 8px currentColor);
}

/* Profile image border glow */
html[data-theme="dark"] .profile-card img.rounded-circle,
html[data-theme="dark"] .profile-image {
    border: 3px solid #ffd60a !important;
    box-shadow: 0 0 20px rgba(255, 214, 10, 0.5) !important;
}

/* Badge (Verified, Premium etc.) */
html[data-theme="dark"] .badge {
    background: linear-gradient(135deg, #ffd60a, #ffb800) !important;
    color: #000 !important;
    text-shadow: none !important;
}
html[data-theme="dark"] [style*="background: white"],
html[data-theme="dark"] [style*="background-color: white"] {
    background-color: #1e1e1e !important;
}
       /* MESSAGES HEADER – DARK MODE 100% FIXED */
html[data-theme="dark"] .messages-header,
html[data-theme="dark"] [class*="header"],
html[data-theme="dark"] .bg-white,
html[data-theme="dark"] header {
    background: linear-gradient(135deg, #001529, #002b55) !important;
    color: #fff !important;
}

html[data-theme="dark"] h5,
html[data-theme="dark"] .messages-title {
    color: #ffffff !important;
    text-shadow: 0 2px 8px rgba(0,0,0,0.8) !important;
}

html[data-theme="dark"] .setting-icon,
html[data-theme="dark"] .fa-cog,
html[data-theme="dark"] i {
    color: #ffd60a !important;
}
/* SEARCH BOX – DARK MODE FULL FIX */
html[data-theme="dark"] input,
html[data-theme="dark"] .form-control,
html[data-theme="dark"] #search {
    color: #ffffff !important;
    background-color: #2a2a2a !important;
    border-color: #555 !important;
}

html[data-theme="dark"] input::placeholder {
    color: #aaa !important;
}
/* ================ NOTIFICATIONS PAGE - FULL DARK MODE FIX ================ */

html[data-theme="dark"] .notification-card {
    background-color: #1e1e1e !important;
    border: 1px solid #333 !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.6) !important;
    color: #e0e0e0 !important;
}

html[data-theme="dark"] .notification-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.8) !important;
    background-color: #252525 !important;
}

/* Unread notification highlight */
html[data-theme="dark"] .notification-card.unread {
    background-color: #162e44 !important;        /* Deep blue shade */
    border-left: 5px solid #ffd60a !important;   /* Golden accent instead of primary blue */
}

/* Text colors inside notification */
html[data-theme="dark"] .sender-name {
    color: #ffffff !important;
    font-weight: bold;
}

html[data-theme="dark"] .member-id-text {
    color: #bbbbbb !important;
}

html[data-theme="dark"] .notification-message {
    color: #dddddd !important;
}

html[data-theme="dark"] .datetime-text {
    color: #aaaaaa !important;
}

/* Type icon (big faint icon in background) */
html[data-theme="dark"] .type-icon {
    opacity: 0.15 !important;
    color: #ffd60a !important;
}

/* Delete trash icon */
html[data-theme="dark"] .delete-btn {
    color: #ff6b6b !important;
}

html[data-theme="dark"] .delete-btn:hover {
    color: #ff4444 !important;
}

/* No notifications box */
html[data-theme="dark"] .no-notifications {
    background-color: #1e1e1e !important;
    color: #aaaaaa !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.6) !important;
}

html[data-theme="dark"] .no-notifications i {
    color: #555 !important;
}

html[data-theme="dark"] .no-notifications h4 {
    color: #cccccc !important;
}

/* Buttons (Mark All Read, Delete All) */
html[data-theme="dark"] .btn-primary {
    background-color: #ffd60a !important;
    border-color: #ffd60a !important;
    color: #000 !important;
}

html[data-theme="dark"] .btn-primary:hover {
    background-color: #ffea80 !important;
    border-color: #ffea80 !important;
}

html[data-theme="dark"] .btn-danger {
    background-color: #dc3545 !important;
    border-color: #dc3545 !important;
}

html[data-theme="dark"] .btn-danger:hover {
    background-color: #c82333 !important;
}

/* Pagination */
html[data-theme="dark"] .pagination .page-link {
    background-color: #2d2d2d !important;
    border-color: #444 !important;
    color: #e0e0e0 !important;
}

html[data-theme="dark"] .pagination .page-item.active .page-link {
    background-color: #ffd60a !important;
    border-color: #ffd60a !important;
    color: #000 !important;
}

html[data-theme="dark"] .pagination .page-item.disabled .page-link {
    background-color: #1e1e1e !important;
    color: #666 !important;
}

/* ============================================= */
/* TRACKING DASHBOARD & ANALYTICS DARK FIX      */
/* ============================================= */

html[data-theme="dark"] {
    --dt-bg: #1e293b;
    --dt-text: #f1f5f9;
    --dt-border: #334155;
}

/* 1. Main Content & Section Fix */
html[data-theme="dark"] .main-content {
    background-color: #0f172a !important;
}

/* 2. Stat Cards (Weekly/Monthly/Total Hits) */
html[data-theme="dark"] .stat-card {
    background: #1e293b !important;
    border-color: #334155 !important;
    color: #f1f5f9 !important;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.4) !important;
}

html[data-theme="dark"] .stat-card h3 {
    color: #ffffff !important;
}

/* 3. DataTable Full Fix (The most important part) */
html[data-theme="dark"] .dataTables_wrapper {
    color: #f1f5f9 !important;
}

html[data-theme="dark"] table.dataTable {
    background-color: #1e293b !important;
    border-color: #334155 !important;
}

html[data-theme="dark"] table.dataTable tbody tr {
    background-color: #1e293b !important;
    color: #cbd5e1 !important;
}

html[data-theme="dark"] table.dataTable tbody tr:hover {
    background-color: #334155 !important;
}

html[data-theme="dark"] .dataTables_filter input,
html[data-theme="dark"] .dataTables_length select {
    background-color: #0f172a !important;
    border: 1px solid #475569 !important;
    color: white !important;
    border-radius: 8px;
    padding: 4px 10px;
}

/* Pagination Buttons */
html[data-theme="dark"] .dataTables_paginate .paginate_button {
    background: #334155 !important;
    color: white !important;
    border-radius: 6px !important;
    border: none !important;
}

html[data-theme="dark"] .dataTables_paginate .paginate_button.current {
    background: #4f46e5 !important;
    color: white !important;
}

/* 4. Badges and Small Text */
html[data-theme="dark"] .location-badge {
    background: #312e81 !important; /* Deep Indigo */
    color: #c7d2fe !important;
}

html[data-theme="dark"] .bg-gray-50, 
html[data-theme="dark"] .bg-indigo-50,
html[data-theme="dark"] .bg-green-50 {
    background-color: rgba(255, 255, 255, 0.05) !important;
    color: #ffffff !important;
}

/* 5. Graph/Chart Container Fix */
html[data-theme="dark"] canvas#trafficChart {
    filter: saturate(1.5) brightness(1.2); /* Graph colors ko bright karne ke liye */
}

/* 6. Text Specifics */
html[data-theme="dark"] .text-gray-800, 
html[data-theme="dark"] .text-gray-700 {
    color: #f8fafc !important;
}

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

/* ============================================= */
/* PAYMENT SUMMARY & LOGS DARK MODE FIX         */
/* ============================================= */

html[data-theme="dark"] {
    --bg-dark-box: #1e293b;
    --border-dark: #334155;
    --text-white: #f8fafc;
}

/* 1. Payment Summary Boxes (Top 4 Cards) */
html[data-theme="dark"] .grid .bg-white,
html[data-theme="dark"] .grid .glass-card,
html[data-theme="dark"] .summary-card {
    background-color: var(--bg-dark-box) !important;
    border: 1px solid var(--border-dark) !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4) !important;
}

/* 2. Text Colors inside Summary Boxes */
html[data-theme="dark"] .grid .text-gray-500,
html[data-theme="dark"] .grid .text-sm {
    color: #94a3b8 !important; /* Muted text */
}

html[data-theme="dark"] .grid .text-2xl,
html[data-theme="dark"] .grid .font-bold {
    color: var(--text-white) !important; /* Main amounts/titles */
}

/* 3. Transaction Table Fix */
html[data-theme="dark"] .overflow-x-auto,
html[data-theme="dark"] table {
    background-color: var(--bg-dark-box) !important;
    color: var(--text-white) !important;
}

html[data-theme="dark"] thead tr {
    background-color: #0f172a !important; /* Darker header */
}

html[data-theme="dark"] th {
    color: #cbd5e1 !important;
    border-bottom: 1px solid var(--border-dark) !important;
}

html[data-theme="dark"] td {
    border-bottom: 1px solid var(--border-dark) !important;
    color: #e2e8f0 !important;
}

/* 4. Filter & Search Section */
html[data-theme="dark"] .flex.flex-wrap.gap-4,
html[data-theme="dark"] form#filterForm {
    background-color: var(--bg-dark-box) !important;
    padding: 15px;
    border-radius: 12px;
}

html[data-theme="dark"] select,
html[data-theme="dark"] input[type="date"],
html[data-theme="dark"] input[type="text"] {
    background-color: #0f172a !important;
    border: 1px solid var(--border-dark) !important;
    color: white !important;
}

/* 5. Status Badges (Success/Failed) */
html[data-theme="dark"] .bg-green-100 {
    background-color: rgba(34, 197, 94, 0.2) !important;
    color: #4ade80 !important;
}

html[data-theme="dark"] .bg-red-100 {
    background-color: rgba(239, 68, 68, 0.2) !important;
    color: #f87171 !important;
}

/* 6. Refund Modal Fix */
html[data-theme="dark"] #refundModal .bg-white {
    background-color: #1e293b !important;
    color: white !important;
    border: 1px solid var(--border-dark) !important;
}

/* ============================================= */
/*          FORM DARK MODE – FULL FIX            */
/*   Contact Us + All Forms (Floating Labels)    */
/* ============================================= */

/* Form Background & Text */
html[data-theme="dark"] form,
html[data-theme="dark"] .form-floating,
html[data-theme="dark"] .contact-form-card,
html[data-theme="dark"] .form-contact,
html[data-theme="dark"] .card,
html[data-theme="dark"] .glass-card {
    background-color: #1e1e1e !important;
    color: #e0e0e0 !important;
    border: 1px solid #333 !important;
}

/* Floating Labels (Bootstrap 5 form-floating) */
html[data-theme="dark"] .form-floating > label {
    color: #aaaaaa !important;
    opacity: 0.8;
}

html[data-theme="dark"] .form-floating > .form-control:not(:placeholder-shown) ~ label,
html[data-theme="dark"] .form-floating > .form-control:focus ~ label {
    color: #ffd60a !important;
    font-weight: 500;
    transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem);
}

/* Input, Textarea, Select – Main Styling */
html[data-theme="dark"] .form-control,
html[data-theme="dark"] .form-select,
html[data-theme="dark"] textarea.form-control,
html[data-theme="dark"] input[type="text"],
html[data-theme="dark"] input[type="email"],
html[data-theme="dark"] input[type="tel"],
html[data-theme="dark"] input[type="password"],
html[data-theme="dark"] input[type="date"] {
    background-color: #2a2a2a !important;
    color: #ffffff !important;
    border: 1.5px solid #444 !important;
    border-radius: 12px !important;
    padding: 1rem 0.75rem !important;
    transition: all 0.3s ease;
}

html[data-theme="dark"] .form-control::placeholder,
html[data-theme="dark"] textarea::placeholder {
    color: #888 !important;
    opacity: 1;
}

/* Focus State – Golden Glow (Premium Feel) */
html[data-theme="dark"] .form-control:focus,
html[data-theme="dark"] .form-select:focus,
html[data-theme="dark"] textarea:focus {
    background-color: #333333 !important;
    color: #ffffff !important;
    border-color: #ffd60a !important;
    box-shadow: 0 0 0 0.25rem rgba(255, 214, 10, 0.3) !important;
    outline: none !important;
}

/* Form Checkboxes & Radios */
html[data-theme="dark"] .form-check-input {
    background-color: #2a2a2a !important;
    border-color: #666 !important;
}

html[data-theme="dark"] .form-check-input:checked {
    background-color: #ffd60a !important;
    border-color: #ffd60a !important;
}

html[data-theme="dark"] .form-check-label {
    color: #e0e0e0 !important;
}

/* Submit Button – Contact Form Special */
html[data-theme="dark"] .btn-submit,
html[data-theme="dark"] button[type="submit"],
html[data-theme="dark"] .btn-primary {
    background: linear-gradient(135deg, #e63946, #f4a261) !important;
    border: none !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    transition: all 0.4s ease;
}

html[data-theme="dark"] .btn-submit:hover,
html[data-theme="dark"] button[type="submit"]:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 12px 30px rgba(230, 57, 70, 0.5) !important;
    background: linear-gradient(135deg, #f4a261, #e63946) !important;
}

/* Alerts inside Form (Success/Error) */
html[data-theme="dark"] .alert-success {
    background-color: rgba(34, 197, 94, 0.2) !important;
    border-color: #34d399 !important;
    color: #86efac !important;
}

html[data-theme="dark"] .alert-danger {
    background-color: rgba(239, 68, 68, 0.2) !important;
    border-color: #f87171 !important;
    color: #fca5a5 !important;
}

html[data-theme="dark"] .alert {
    border-radius: 12px !important;
    border: none !important;
}

/* Hero Section Form Card (Contact Us Special) */
html[data-theme="dark"] .contact-form-card {
    background: rgba(30, 30, 30, 0.95) !important;
    backdrop-filter: blur(15px) !important;
    border: 1px solid #444 !important;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6) !important;
}

html[data-theme="dark"] .contact-form-card h3 {
    color: #ffffff !important;
    text-shadow: 0 2px 10px rgba(0,0,0,0.5);
}

/* Quick Contact Info Text (Left Side) */
html[data-theme="dark"] .hero-content,
html[data-theme="dark"] .info-item,
html[data-theme="dark"] .contact-info-quick {
    color: #f0f0f0 !important;
}

html[data-theme="dark"] .info-item a {
    color: #ffd60a !important;
    text-decoration: underline;
    font-weight: 500;
}

html[data-theme="dark"] .info-item i {
    color: #ffd60a !important;
}

/* Quote Section at Bottom */
html[data-theme="dark"] .quote-box {
    background: linear-gradient(135deg, #1a1a2e, #16213e) !important;
    border: 1px solid #334 !important;
}

html[data-theme="dark"] .quote-box h3,
html[data-theme="dark"] .quote-box p {
    color: #ffffff !important;
    text-shadow: 0 2px 8px rgba(0,0,0,0.6);
}
/* ====================== SEARCH FILTERS SIDEBAR - DARK MODE FIX ====================== */
html[data-theme="dark"] .sidebar {
    background: linear-gradient(135deg, #1a1a2e, #16213e) !important;
    border: 1px solid #334155 !important;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.7) !important;
    color: #e0e0e0 !important;
    border-radius: 12px !important;
}

html[data-theme="dark"] .sidebar h4 {
    color: #ffd60a !important;
    font-weight: 700;
    text-shadow: 0 2px 6px rgba(255, 214, 10, 0.4);
}

html[data-theme="dark"] .sidebar .text-muted {
    color: #bbbbbb !important;
}

html[data-theme="dark"] .sidebar .form-label,
html[data-theme="dark"] .sidebar label {
    color: #ffffff !important;
    font-weight: 500;
}

html[data-theme="dark"] .sidebar .form-control,
html[data-theme="dark"] .sidebar .form-select,
html[data-theme="dark"] .sidebar input,
html[data-theme="dark"] .sidebar select {
    background-color: #2a2a2a !important;
    border: 1.5px solid #444 !important;
    color: #ffffff !important;
    border-radius: 10px !important;
}

html[data-theme="dark"] .sidebar .form-control::placeholder {
    color: #aaaaaa !important;
}

html[data-theme="dark"] .sidebar .form-control:focus,
html[data-theme="dark"] .sidebar .form-select:focus {
    background-color: #333333 !important;
    border-color: #ffd60a !important;
    box-shadow: 0 0 0 0.25rem rgba(255, 214, 10, 0.3) !important;
    color: #ffffff !important;
}

html[data-theme="dark"] .sidebar .btn-outline-info,
html[data-theme="dark"] .sidebar .btn {
    background-color: rgba(255, 214, 10, 0.15) !important;
    border-color: #ffd60a !important;
    color: #ffd60a !important;
    font-weight: 600;
}

html[data-theme="dark"] .sidebar .btn-outline-info:hover,
html[data-theme="dark"] .sidebar .btn:hover {
    background-color: #ffd60a !important;
    color: #000000 !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(255, 214, 10, 0.4);
}

/* Profile count text */
html[data-theme="dark"] .sidebar p strong {
    color: #ffd60a !important;
    font-size: 1.1rem;
}

/* ==================== MY_PROFILE.PHP - DARK MODE ONLY ==================== */
/* Ye CSS body.dark-mode class ke saath kaam karega */

body.dark-mode {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #16213e 100%) !important;
    color: #e0e0e0 !important;
}

/* Section Cards (Personal, Family, Preferences etc.) */
body.dark-mode .section-card {
    background: rgba(30, 41, 59, 0.9) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6) !important;
}

body.dark-mode .section-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.8) !important;
}

body.dark-mode .section-card h4 {
    color: #ffd60a !important; /* Golden heading */
}

body.dark-mode .section-card h4::after {
    background: linear-gradient(90deg, #ed8936, #c44569) !important;
}

/* Profile Header & Image */
body.dark-mode .profile-header {
    background: transparent !important;
}

body.dark-mode .profile-img {
    border: 6px solid #1e293b !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.7) !important;
}

body.dark-mode .upload-icon {
    background: linear-gradient(45deg, #ed8936, #c44569) !important;
    box-shadow: 0 5px 15px rgba(237, 137, 54, 0.5) !important;
}

/* Sidebar (Left Fixed Menu) */
body.dark-mode .sidebar {
    background: linear-gradient(180deg, #0f172a 0%, #1e293b 100%) !important;
    border-right: 1px solid rgba(255, 255, 255, 0.08);
}

body.dark-mode .sidebar .user-info {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}

body.dark-mode .sidebar .user-info img {
    border: 5px solid #ed8936 !important;
    box-shadow: 0 0 30px rgba(237, 137, 54, 0.7) !important;
}

body.dark-mode .sidebar .nav-link {
    color: #e2d4f0 !important;
}

body.dark-mode .sidebar .nav-link:hover,
body.dark-mode .sidebar .nav-link.active {
    background: rgba(237, 137, 54, 0.3) !important;
    color: #ffffff !important;
    box-shadow: 0 5px 15px rgba(237, 137, 54, 0.3) !important;
}

/* Forms & Inputs */
body.dark-mode .form-control,
body.dark-mode .form-select {
    background: rgba(45, 57, 82, 0.7) !important;
    border: 1.5px solid #334155 !important;
    color: #e0e0e0 !important;
}

body.dark-mode .form-control:focus,
body.dark-mode .form-select:focus {
    background: #1e293b !important;
    border-color: #ed8936 !important;
    box-shadow: 0 0 0 4px rgba(237, 137, 54, 0.2) !important;
    color: #ffffff !important;
}

body.dark-mode .form-control::placeholder {
    color: #888 !important;
}

/* Buttons */
body.dark-mode .btn-primary {
    background: linear-gradient(45deg, #ed8936, #c44569) !important;
    border: none !important;
    box-shadow: 0 8px 20px rgba(237, 137, 54, 0.4) !important;
}

body.dark-mode .btn-primary:hover {
    box-shadow: 0 15px 30px rgba(237, 137, 54, 0.6) !important;
    transform: translateY(-4px);
}

/* Gallery Images */
body.dark-mode #galleryCarousel .carousel-item img,
body.dark-mode #gallery img {
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.6) !important;
    border: 2px solid #334155;
}

body.dark-mode #galleryCarousel .carousel-item img:hover,
body.dark-mode #gallery img:hover {
    transform: scale(1.05);
}

/* Navbar (Top Fixed) */
body.dark-mode .navbar,
body.dark-mode navbar,
body.dark-mode header,
body.dark-mode .topbar {
    background: rgba(15, 23, 42, 0.95) !important;
    backdrop-filter: blur(10px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4) !important;
}

/* Mobile Sidebar Toggle Button */
body.dark-mode .sidebar-toggle {
    background: linear-gradient(45deg, #ed8936, #c44569) !important;
    box-shadow: 0 8px 25px rgba(237, 137, 54, 0.5) !important;
}

body.dark-mode .sidebar-overlay.active {
    background: rgba(0, 0, 0, 0.8) !important;
}

/* Text Colors */
body.dark-mode .text-muted {
    color: #aaaaaa !important;
}

body.dark-mode h1, body.dark-mode h2, body.dark-mode h3,
body.dark-mode h4, body.dark-mode h5, body.dark-mode h6 {
    color: #ffffff !important;
}

/* Modals */
body.dark-mode .modal-content {
    background: #1e293b !important;
    color: #e0e0e0 !important;
    border: 1px solid #334155;
}

body.dark-mode .modal-header,
body.dark-mode .modal-footer {
    border-color: #334155 !important;
}

/* Alerts inside modals */
body.dark-mode .alert-success {
    background: rgba(34, 197, 94, 0.2) !important;
    color: #86efac !important;
    border: none;
}

body.dark-mode .alert-danger {
    background: rgba(239, 68, 68, 0.2) !important;
    color: #fca5a5 !important;
    border: none;
}

/* Loading Spinner */
body.dark-mode .loading-spinner {
    border: 6px solid #ed8936 !important;
    border-top-color: transparent !important;
}

/* Final Touch - Scrollbar */
body.dark-mode ::-webkit-scrollbar {
    width: 8px;
}
body.dark-mode ::-webkit-scrollbar-track {
    background: #1e1e1e;
}
body.dark-mode ::-webkit-scrollbar-thumb {
    background: #555;
    border-radius: 4px;
}
body.dark-mode ::-webkit-scrollbar-thumb:hover {
    background: #777;
}