/* =====================================================
   Theme Toggle Button
   ===================================================== */

.theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: inherit;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease, transform 0.15s ease;
    position: relative;
    overflow: hidden;
}

.theme-toggle:hover {
    background-color: rgba(128, 128, 128, 0.15);
}

.theme-toggle:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

.theme-toggle__icon {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    transition: opacity 0.25s ease, transform 0.25s ease;
}

.theme-toggle__icon--light {
    opacity: 1;
    transform: rotate(0deg) scale(1);
}

.theme-toggle__icon--dark {
    opacity: 0;
    transform: rotate(90deg) scale(0.5);
}

[data-theme="dark"] .theme-toggle__icon--light {
    opacity: 0;
    transform: rotate(-90deg) scale(0.5);
}

[data-theme="dark"] .theme-toggle__icon--dark {
    opacity: 1;
    transform: rotate(0deg) scale(1);
}

.theme-toggle__sr {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Backend header placement */
.theme-toggle--backend {
    color: rgba(255, 255, 255, 0.8);
}

.theme-toggle--backend:hover {
    background-color: rgba(255, 255, 255, 0.1);
    color: #fff;
}

/* Frontend header placement */
.theme-toggle--frontend {
    color: var(--text-color, #1f2937);
}

.theme-toggle--frontend:hover {
    background-color: rgba(0, 0, 0, 0.06);
}

/* =====================================================
   Frontend Dark Mode Overrides
   ===================================================== */

[data-theme="dark"],
[data-theme="dark"] body {
    --text-color: #e5e7eb;
    --heading-color: #f9fafb;
    --body-bg: #0f172a;
    --section-bg: #111827;
    --card-bg: #1f2937;
    --border-color: #374151;
    --muted-text: #9ca3af;
    --link-color: #60a5fa;
    --link-hover: #93c5fd;
    --input-bg: #1f2937;
    --input-border: #4b5563;
    --input-color: #e5e7eb;
    --btn-primary-bg: #2563eb;
    --btn-primary-text: #fff;
}

[data-theme="dark"] body {
    background-color: var(--body-bg);
    color: var(--text-color);
}

[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4,
[data-theme="dark"] h5,
[data-theme="dark"] h6,
[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: var(--heading-color);
}

[data-theme="dark"] a:not(.btn):not(.theme-btn):not(.nav-link):not(.dropdown-item) {
    color: var(--link-color);
}

[data-theme="dark"] a:not(.btn):not(.theme-btn):not(.nav-link):not(.dropdown-item):hover {
    color: var(--link-hover);
}

[data-theme="dark"] .header-top-section,
[data-theme="dark"] .header-1,
[data-theme="dark"] .header-2,
[data-theme="dark"] .main-menu,
[data-theme="dark"] .navbar {
    background-color: var(--section-bg) !important;
    border-color: var(--border-color) !important;
}

[data-theme="dark"] .header-top-section a,
[data-theme="dark"] .header-1 a,
[data-theme="dark"] .header-1 .main-menu nav ul li a,
[data-theme="dark"] .main-menu nav ul li a {
    color: var(--text-color) !important;
}

[data-theme="dark"] .header-top-section a:hover,
[data-theme="dark"] .header-1 a:hover,
[data-theme="dark"] .header-1 .main-menu nav ul li a:hover,
[data-theme="dark"] .main-menu nav ul li a:hover {
    color: var(--link-hover) !important;
}

[data-theme="dark"] .card,
[data-theme="dark"] .service-box,
[data-theme="dark"] .feature-box,
[data-theme="dark"] .pricing-box,
[data-theme="dark"] .blog-box,
[data-theme="dark"] .testimonial-box,
[data-theme="dark"] .team-box,
[data-theme="dark"] .faq-box,
[data-theme="dark"] .contact-box,
[data-theme="dark"] .about-box,
[data-theme="dark"] .cta-box,
[data-theme="dark"] .form-box,
[data-theme="dark"] .login-section,
[data-theme="dark"] .register-section,
[data-theme="dark"] .dashboard-card,
[data-theme="dark"] .profile-card,
[data-theme="dark"] .single-section,
[data-theme="dark"] .section-bg,
[data-theme="dark"] .hero-section,
[data-theme="dark"] .breadcrumb-section,
[data-theme="dark"] .footer-section,
[data-theme="dark"] .widget-area,
[data-theme="dark"] .sidebar-widget {
    background-color: var(--card-bg) !important;
    color: var(--text-color) !important;
}

[data-theme="dark"] .footer-section,
[data-theme="dark"] .footer-section p,
[data-theme="dark"] .footer-section a,
[data-theme="dark"] .footer-section li,
[data-theme="dark"] .footer-section h1,
[data-theme="dark"] .footer-section h2,
[data-theme="dark"] .footer-section h3,
[data-theme="dark"] .footer-section h4,
[data-theme="dark"] .footer-section h5,
[data-theme="dark"] .footer-section h6 {
    background-color: var(--section-bg) !important;
    color: var(--text-color) !important;
}

[data-theme="dark"] input:not([type="submit"]):not([type="button"]):not([type="reset"]),
[data-theme="dark"] textarea,
[data-theme="dark"] select,
[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select {
    background-color: var(--input-bg) !important;
    border-color: var(--input-border) !important;
    color: var(--input-color) !important;
}

[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder,
[data-theme="dark"] select::placeholder {
    color: var(--muted-text) !important;
}

[data-theme="dark"] .theme-btn.style-border {
    border-color: var(--border-color) !important;
    color: var(--text-color) !important;
}

[data-theme="dark"] .theme-btn.style-border:hover {
    background-color: var(--card-bg) !important;
    color: var(--heading-color) !important;
}

[data-theme="dark"] .dropdown-menu,
[data-theme="dark"] .nice-select .list,
[data-theme="dark"] .select2-dropdown {
    background-color: var(--card-bg) !important;
    border-color: var(--border-color) !important;
}

[data-theme="dark"] .dropdown-item,
[data-theme="dark"] .nice-select .option,
[data-theme="dark"] .select2-results__option {
    color: var(--text-color) !important;
}

[data-theme="dark"] .dropdown-item:hover,
[data-theme="dark"] .dropdown-item:focus,
[data-theme="dark"] .nice-select .option:hover,
[data-theme="dark"] .select2-results__option:hover,
[data-theme="dark"] .select2-results__option--highlighted {
    background-color: rgba(255, 255, 255, 0.06) !important;
    color: var(--heading-color) !important;
}

[data-theme="dark"] .table,
[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd),
[data-theme="dark"] .table-hover > tbody > tr:hover {
    --bs-table-bg: transparent;
    --bs-table-color: var(--text-color);
    --bs-table-border-color: var(--border-color);
    color: var(--text-color) !important;
    border-color: var(--border-color) !important;
}

[data-theme="dark"] .modal-content,
[data-theme="dark"] .modal-header,
[data-theme="dark"] .modal-footer,
[data-theme="dark"] .offcanvas {
    background-color: var(--card-bg) !important;
    color: var(--text-color) !important;
    border-color: var(--border-color) !important;
}

[data-theme="dark"] .breadcrumb-item.active,
[data-theme="dark"] .text-muted,
[data-theme="dark"] .text-secondary,
[data-theme="dark"] small,
[data-theme="dark"] .small {
    color: var(--muted-text) !important;
}

[data-theme="dark"] .border,
[data-theme="dark"] .border-top,
[data-theme="dark"] .border-bottom,
[data-theme="dark"] .border-start,
[data-theme="dark"] .border-end {
    border-color: var(--border-color) !important;
}

[data-theme="dark"] hr {
    border-color: var(--border-color) !important;
}

[data-theme="dark"] .bg-white,
[data-theme="dark"] .bg-light {
    background-color: var(--card-bg) !important;
}

[data-theme="dark"] .bg-dark {
    background-color: var(--section-bg) !important;
}

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

/* Dashboard / user area specific overrides */
[data-theme="dark"] .dashboard-sidebar,
[data-theme="dark"] .user-sidebar,
[data-theme="dark"] .mobile-app-footer,
[data-theme="dark"] .dashboard-nav {
    background-color: var(--section-bg) !important;
    border-color: var(--border-color) !important;
}

[data-theme="dark"] .dashboard-sidebar a,
[data-theme="dark"] .user-sidebar a,
[data-theme="dark"] .dashboard-nav a,
[data-theme="dark"] .mobile-app-footer a {
    color: var(--text-color) !important;
}

[data-theme="dark"] .dashboard-sidebar a:hover,
[data-theme="dark"] .user-sidebar a:hover,
[data-theme="dark"] .dashboard-nav a:hover,
[data-theme="dark"] .mobile-app-footer a:hover {
    color: var(--link-hover) !important;
}

[data-theme="dark"] .dashboard-card .card-header,
[data-theme="dark"] .widget-card .card-header {
    background-color: rgba(255, 255, 255, 0.03) !important;
    border-color: var(--border-color) !important;
}

/* Reduce harsh shadows */
[data-theme="dark"] .shadow,
[data-theme="dark"] .shadow-sm,
[data-theme="dark"] .shadow-lg,
[data-theme="dark"] .box-shadow {
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.3) !important;
}

/* Toast / notify */
[data-theme="dark"] .toast,
[data-theme="dark"] .alert {
    background-color: var(--card-bg) !important;
    color: var(--text-color) !important;
    border-color: var(--border-color) !important;
}

/* Frontend auth pages */
[data-theme="dark"] .auth-wrapper,
[data-theme="dark"] .login-form,
[data-theme="dark"] .register-form,
[data-theme="dark"] .verification-form,
[data-theme="dark"] .forgot-form {
    background-color: var(--body-bg) !important;
    color: var(--text-color) !important;
}