/* =================================
   COMPREHENSIVE DARK MODE FIXES
   ================================= */

/* Fix form inputs and textareas in dark mode */
[data-theme="dark"] input,
[data-theme="dark"] textarea,
[data-theme="dark"] select,
[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select {
    background-color: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

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

[data-theme="dark"] input:focus,
[data-theme="dark"] textarea:focus,
[data-theme="dark"] select:focus,
[data-theme="dark"] .form-control:focus,
[data-theme="dark"] .form-select:focus {
    background-color: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
    border-color: var(--primary-color) !important;
    box-shadow: 0 0 0 0.25rem rgba(32, 201, 151, 0.25) !important;
}

/* Fix labels in dark mode */
[data-theme="dark"] label {
    color: var(--text-primary) !important;
}

/* Fix form elements without data-theme attribute but inside dark body */
.dark-mode input,
.dark-mode textarea,
.dark-mode select,
.dark-mode .form-control,
.dark-mode .form-select {
    background-color: var(--option-bg) !important;
    color: var(--text-color) !important;
    border-color: var(--border-color) !important;
}

.dark-mode input::placeholder,
.dark-mode textarea::placeholder {
    color: var(--secondary-text) !important;
}

.dark-mode input:focus,
.dark-mode textarea:focus,
.dark-mode select:focus,
.dark-mode .form-control:focus,
.dark-mode .form-select:focus {
    background-color: var(--option-bg) !important;
    color: var(--text-color) !important;
    border-color: var(--button-bg) !important;
    box-shadow: 0 0 0 0.25rem rgba(254, 114, 76, 0.25) !important;
}

.dark-mode label {
    color: var(--text-color) !important;
}

/* Fix search inputs specifically */
[data-theme="dark"] .search-input,
.dark-mode .search-input {
    background-color: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

[data-theme="dark"] .search-input:focus,
.dark-mode .search-input:focus {
    background-color: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
    border-color: var(--primary-color) !important;
}

/* Fix buttons in dark mode */
[data-theme="dark"] .btn,
[data-theme="dark"] button,
.dark-mode .btn,
.dark-mode button {
    background-color: var(--primary-color) !important;
    color: white !important;
    border-color: var(--primary-color) !important;
}

[data-theme="dark"] .btn:hover,
[data-theme="dark"] button:hover,
.dark-mode .btn:hover,
.dark-mode button:hover {
    background-color: var(--button-hover) !important;
    border-color: var(--button-hover) !important;
}

/* Fix secondary buttons */
[data-theme="dark"] .btn-secondary,
.dark-mode .btn-secondary {
    background-color: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

[data-theme="dark"] .btn-outline-primary,
.dark-mode .btn-outline-primary {
    color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
    background-color: transparent !important;
}

[data-theme="dark"] .btn-outline-primary:hover,
.dark-mode .btn-outline-primary:hover {
    background-color: var(--primary-color) !important;
    color: white !important;
}

/* Fix tables in dark mode */
[data-theme="dark"] table,
[data-theme="dark"] .table,
.dark-mode table,
.dark-mode .table {
    background-color: var(--bg-primary) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] table td,
[data-theme="dark"] table th,
[data-theme="dark"] .table td,
[data-theme="dark"] .table th,
.dark-mode table td,
.dark-mode table th,
.dark-mode .table td,
.dark-mode .table th {
    background-color: var(--bg-primary) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) > td,
[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) > th,
.dark-mode .table-striped > tbody > tr:nth-of-type(odd) > td,
.dark-mode .table-striped > tbody > tr:nth-of-type(odd) > th {
    background-color: var(--bg-secondary) !important;
}

/* Fix dropdowns and selects */
[data-theme="dark"] .dropdown-menu,
.dark-mode .dropdown-menu {
    background-color: var(--bg-primary) !important;
    border-color: var(--border-color) !important;
}

[data-theme="dark"] .dropdown-item,
.dark-mode .dropdown-item {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .dropdown-item:hover,
[data-theme="dark"] .dropdown-item:focus,
.dark-mode .dropdown-item:hover,
.dark-mode .dropdown-item:focus {
    background-color: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
}

/* Fix modals in dark mode */
[data-theme="dark"] .modal-content,
.dark-mode .modal-content {
    background-color: var(--bg-primary) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

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

[data-theme="dark"] .modal-title,
.dark-mode .modal-title {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .btn-close,
.dark-mode .btn-close {
    filter: invert(1) !important;
}

/* Fix alerts and notifications */
[data-theme="dark"] .alert,
.dark-mode .alert {
    background-color: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

[data-theme="dark"] .alert-success,
.dark-mode .alert-success {
    background-color: rgba(32, 201, 151, 0.1) !important;
    color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
}

[data-theme="dark"] .alert-danger,
.dark-mode .alert-danger {
    background-color: rgba(220, 53, 69, 0.1) !important;
    color: #dc3545 !important;
    border-color: #dc3545 !important;
}

[data-theme="dark"] .alert-warning,
.dark-mode .alert-warning {
    background-color: rgba(255, 193, 7, 0.1) !important;
    color: #ffc107 !important;
    border-color: #ffc107 !important;
}

[data-theme="dark"] .alert-info,
.dark-mode .alert-info {
    background-color: rgba(13, 202, 240, 0.1) !important;
    color: #0dcaf0 !important;
    border-color: #0dcaf0 !important;
}

/* Fix badges and pills */
[data-theme="dark"] .badge,
.dark-mode .badge {
    background-color: var(--primary-color) !important;
    color: white !important;
}

[data-theme="dark"] .badge-secondary,
.dark-mode .badge-secondary {
    background-color: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
}

/* Fix pagination */
[data-theme="dark"] .pagination .page-link,
.dark-mode .pagination .page-link {
    background-color: var(--bg-primary) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

[data-theme="dark"] .pagination .page-link:hover,
.dark-mode .pagination .page-link:hover {
    background-color: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

[data-theme="dark"] .pagination .page-item.active .page-link,
.dark-mode .pagination .page-item.active .page-link {
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
    color: white !important;
}

/* Fix breadcrumbs */
[data-theme="dark"] .breadcrumb,
.dark-mode .breadcrumb {
    background-color: var(--bg-secondary) !important;
}

[data-theme="dark"] .breadcrumb-item,
[data-theme="dark"] .breadcrumb-item a,
.dark-mode .breadcrumb-item,
.dark-mode .breadcrumb-item a {
    color: var(--text-primary) !important;
}

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

/* Fix list groups */
[data-theme="dark"] .list-group-item,
.dark-mode .list-group-item {
    background-color: var(--bg-primary) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

[data-theme="dark"] .list-group-item:hover,
.dark-mode .list-group-item:hover {
    background-color: var(--bg-secondary) !important;
}

[data-theme="dark"] .list-group-item.active,
.dark-mode .list-group-item.active {
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
    color: white !important;
}

/* Fix progress bars */
[data-theme="dark"] .progress,
.dark-mode .progress {
    background-color: var(--bg-secondary) !important;
}

[data-theme="dark"] .progress-bar,
.dark-mode .progress-bar {
    background-color: var(--primary-color) !important;
}

/* Fix tooltips and popovers */
[data-theme="dark"] .tooltip .tooltip-inner,
.dark-mode .tooltip .tooltip-inner {
    background-color: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] .popover,
.dark-mode .popover {
    background-color: var(--bg-primary) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

[data-theme="dark"] .popover-header,
.dark-mode .popover-header {
    background-color: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

/* Fix navbar in dark mode */
[data-theme="dark"] .navbar,
.dark-mode .navbar {
    background-color: var(--nav-bg) !important;
}

[data-theme="dark"] .navbar-nav .nav-link,
.dark-mode .navbar-nav .nav-link {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .navbar-nav .nav-link:hover,
[data-theme="dark"] .navbar-nav .nav-link:focus,
.dark-mode .navbar-nav .nav-link:hover,
.dark-mode .navbar-nav .nav-link:focus {
    color: var(--primary-color) !important;
}

[data-theme="dark"] .navbar-brand,
.dark-mode .navbar-brand {
    color: var(--text-primary) !important;
}

/* Fix text colors */
[data-theme="dark"] .text-muted,
.dark-mode .text-muted {
    color: var(--text-secondary) !important;
}

[data-theme="dark"] .text-dark,
.dark-mode .text-dark {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .text-light,
.dark-mode .text-light {
    color: var(--text-secondary) !important;
}

/* Fix specific form elements that might be missed */
[data-theme="dark"] input[type="text"],
[data-theme="dark"] input[type="email"],
[data-theme="dark"] input[type="password"],
[data-theme="dark"] input[type="number"],
[data-theme="dark"] input[type="tel"],
[data-theme="dark"] input[type="url"],
[data-theme="dark"] input[type="search"],
[data-theme="dark"] input[type="date"],
[data-theme="dark"] input[type="time"],
[data-theme="dark"] input[type="datetime-local"],
.dark-mode input[type="text"],
.dark-mode input[type="email"],
.dark-mode input[type="password"],
.dark-mode input[type="number"],
.dark-mode input[type="tel"],
.dark-mode input[type="url"],
.dark-mode input[type="search"],
.dark-mode input[type="date"],
.dark-mode input[type="time"],
.dark-mode input[type="datetime-local"] {
    background-color: var(--bg-secondary, var(--option-bg)) !important;
    color: var(--text-primary, var(--text-color)) !important;
    border-color: var(--border-color) !important;
}

/* Fix checkboxes and radio buttons */
[data-theme="dark"] input[type="checkbox"],
[data-theme="dark"] input[type="radio"],
.dark-mode input[type="checkbox"],
.dark-mode input[type="radio"] {
    background-color: var(--bg-secondary, var(--option-bg)) !important;
    border-color: var(--border-color) !important;
}

[data-theme="dark"] input[type="checkbox"]:checked,
[data-theme="dark"] input[type="radio"]:checked,
.dark-mode input[type="checkbox"]:checked,
.dark-mode input[type="radio"]:checked {
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
}

/* Fix file inputs */
[data-theme="dark"] input[type="file"],
.dark-mode input[type="file"] {
    background-color: var(--bg-secondary, var(--option-bg)) !important;
    color: var(--text-primary, var(--text-color)) !important;
    border-color: var(--border-color) !important;
}

[data-theme="dark"] input[type="file"]::file-selector-button,
.dark-mode input[type="file"]::file-selector-button {
    background-color: var(--primary-color) !important;
    color: white !important;
    border-color: var(--primary-color) !important;
}

/* Fix range inputs */
[data-theme="dark"] input[type="range"],
.dark-mode input[type="range"] {
    background-color: var(--bg-secondary, var(--option-bg)) !important;
}

[data-theme="dark"] input[type="range"]::-webkit-slider-thumb,
.dark-mode input[type="range"]::-webkit-slider-thumb {
    background-color: var(--primary-color) !important;
}

[data-theme="dark"] input[type="range"]::-moz-range-thumb,
.dark-mode input[type="range"]::-moz-range-thumb {
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
}

/* Fix CAPTCHA styles in dark mode */
[data-theme="dark"] .alctha-captcha,
.dark-mode .alctha-captcha {
    background: var(--bg-secondary, var(--option-bg)) !important;
    color: var(--text-primary, var(--text-color)) !important;
    border: 1px dashed var(--border-color) !important;
}

/* Fix calendar styles in dark mode */
[data-theme="dark"] .calendar-day,
.dark-mode .calendar-day {
    background-color: var(--bg-primary, var(--card-bg)) !important;
    color: var(--text-primary, var(--text-color)) !important;
    border-color: var(--border-color) !important;
}

[data-theme="dark"] .calendar-day:hover,
.dark-mode .calendar-day:hover {
    background-color: var(--bg-secondary, var(--option-bg)) !important;
}

[data-theme="dark"] .calendar-day.selected,
.dark-mode .calendar-day.selected {
    background-color: var(--primary-color) !important;
    color: white !important;
    border-color: var(--primary-color) !important;
}

[data-theme="dark"] .calendar-day.selected:hover,
.dark-mode .calendar-day.selected:hover {
    background-color: var(--button-hover, var(--primary-color)) !important;
}

/* Fix any remaining white backgrounds */
[data-theme="dark"] *:not(.btn):not(.badge):not(.alert):not(.progress-bar) {
    background-color: inherit !important;
}

/* Ensure text is visible on all elements */
[data-theme="dark"] * {
    color: inherit !important;
}

/* Override any remaining white text on white background issues */
[data-theme="dark"] .white-text,
.dark-mode .white-text {
    color: var(--text-primary, var(--text-color)) !important;
}

/* Fix any form elements that might still have issues */
[data-theme="dark"] .form-floating > label,
.dark-mode .form-floating > label {
    color: var(--text-secondary, var(--secondary-text)) !important;
}

[data-theme="dark"] .form-floating > .form-control:focus ~ label,
[data-theme="dark"] .form-floating > .form-control:not(:placeholder-shown) ~ label,
.dark-mode .form-floating > .form-control:focus ~ label,
.dark-mode .form-floating > .form-control:not(:placeholder-shown) ~ label {
    color: var(--primary-color) !important;
}

/* Fix any remaining Bootstrap components */
[data-theme="dark"] .offcanvas,
.dark-mode .offcanvas {
    background-color: var(--bg-primary, var(--card-bg)) !important;
    color: var(--text-primary, var(--text-color)) !important;
}

[data-theme="dark"] .offcanvas-header,
.dark-mode .offcanvas-header {
    border-color: var(--border-color) !important;
}

[data-theme="dark"] .accordion-item,
.dark-mode .accordion-item {
    background-color: var(--bg-primary, var(--card-bg)) !important;
    border-color: var(--border-color) !important;
}

[data-theme="dark"] .accordion-button,
.dark-mode .accordion-button {
    background-color: var(--bg-secondary, var(--option-bg)) !important;
    color: var(--text-primary, var(--text-color)) !important;
}

[data-theme="dark"] .accordion-button:not(.collapsed),
.dark-mode .accordion-button:not(.collapsed) {
    background-color: var(--primary-color) !important;
    color: white !important;
}

/* Fix carousel controls */
[data-theme="dark"] .carousel-control-prev,
[data-theme="dark"] .carousel-control-next,
.dark-mode .carousel-control-prev,
.dark-mode .carousel-control-next {
    filter: invert(1) !important;
}

/* Fix carousel indicators */
[data-theme="dark"] .carousel-indicators [data-bs-target],
.dark-mode .carousel-indicators [data-bs-target] {
    background-color: var(--text-primary, var(--text-color)) !important;
}

/* Ensure proper contrast for all interactive elements */
[data-theme="dark"] a:not(.btn),
.dark-mode a:not(.btn) {
    color: var(--primary-color) !important;
}

[data-theme="dark"] a:not(.btn):hover,
[data-theme="dark"] a:not(.btn):focus,
.dark-mode a:not(.btn):hover,
.dark-mode a:not(.btn):focus {
    color: var(--button-hover, var(--primary-color)) !important;
}

/* FIX: Product modal dark mode background - Enhanced */
[data-theme="dark"] .product-modal,
[data-theme="dark"] .modal,
.dark-mode .product-modal,
.dark-mode .modal {
    background-color: rgba(0, 0, 0, 0.85) !important;
}

/* Enhanced modal backdrop fixes */
[data-theme="dark"] .product-modal:before,
[data-theme="dark"] .modal:before,
.dark-mode .product-modal:before,
.dark-mode .modal:before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8) !important;
    z-index: -1;
}

/* Fix product modal wrapper in dark mode */
[data-theme="dark"] .product-modal-wrapper,
.dark-mode .product-modal-wrapper {
    background-color: rgba(0, 0, 0, 0.85) !important;
}

/* Fix modal overlay in dark mode */
[data-theme="dark"] .modal-overlay,
.dark-mode .modal-overlay {
    background-color: rgba(0, 0, 0, 0.85) !important;
}

/* Additional product modal fixes for dark mode */
.dark-mode .product-modal {
    background-color: rgba(0, 0, 0, 0.8) !important;
}

.dark-mode .product-modal .modal-content {
    background-color: var(--card-bg, #2d3748) !important;
    color: var(--text-color, #e2e8f0) !important;
    border: 1px solid var(--border-color, #4a5568) !important;
}

.dark-mode .modal {
    background-color: rgba(0, 0, 0, 0.8) !important;
}

.dark-mode .modal .modal-content {
    background-color: var(--card-bg, #2d3748) !important;
    color: var(--text-color, #e2e8f0) !important;
    border: 1px solid var(--border-color, #4a5568) !important;
}

[data-theme="dark"] .product-modal .modal-content,
[data-theme="dark"] .modal .modal-content,
.dark-mode .product-modal .modal-content,
.dark-mode .modal .modal-content {
    background-color: var(--bg-primary, var(--card-bg)) !important;
    color: var(--text-primary, var(--text-color)) !important;
    border: 1px solid var(--border-color) !important;
}

[data-theme="dark"] .product-modal .modal-header,
[data-theme="dark"] .modal .modal-header,
.dark-mode .product-modal .modal-header,
.dark-mode .modal .modal-header {
    background-color: var(--bg-secondary, var(--option-bg)) !important;
    border-bottom: 1px solid var(--border-color) !important;
}

[data-theme="dark"] .product-modal .modal-body,
[data-theme="dark"] .modal .modal-body,
.dark-mode .product-modal .modal-body,
.dark-mode .modal .modal-body {
    background-color: var(--bg-primary, var(--card-bg)) !important;
    color: var(--text-primary, var(--text-color)) !important;
}

[data-theme="dark"] .product-modal .modal-footer,
[data-theme="dark"] .modal .modal-footer,
.dark-mode .product-modal .modal-footer,
.dark-mode .modal .modal-footer {
    background-color: var(--bg-secondary, var(--option-bg)) !important;
    border-top: 1px solid var(--border-color) !important;
}

[data-theme="dark"] .product-modal .slider-image,
[data-theme="dark"] .modal .slider-image,
.dark-mode .product-modal .slider-image,
.dark-mode .modal .slider-image {
    background-color: var(--bg-secondary, var(--option-bg)) !important;
    border: 1px solid var(--border-color) !important;
}

[data-theme="dark"] .product-modal .product-full-desc,
[data-theme="dark"] .modal .product-full-desc,
.dark-mode .product-modal .product-full-desc,
.dark-mode .modal .product-full-desc {
    background-color: var(--bg-secondary, var(--option-bg)) !important;
    color: var(--text-primary, var(--text-color)) !important;
    border: 1px solid var(--border-color) !important;
}

[data-theme="dark"] .product-modal .options-section,
[data-theme="dark"] .modal .options-section,
.dark-mode .product-modal .options-section,
.dark-mode .modal .options-section {
    background-color: var(--bg-primary, var(--card-bg)) !important;
}

[data-theme="dark"] .product-modal .option-item,
[data-theme="dark"] .modal .option-item,
.dark-mode .product-modal .option-item,
.dark-mode .modal .option-item {
    background-color: var(--bg-secondary, var(--option-bg)) !important;
    color: var(--text-primary, var(--text-color)) !important;
    border: 1px solid var(--border-color) !important;
}

[data-theme="dark"] .product-modal .option-add-btn,
[data-theme="dark"] .modal .option-add-btn,
.dark-mode .product-modal .option-add-btn,
.dark-mode .modal .option-add-btn {
    background-color: var(--primary-color) !important;
    color: white !important;
    border: 1px solid var(--primary-color) !important;
}

[data-theme="dark"] .product-modal .option-add-btn:hover,
[data-theme="dark"] .modal .option-add-btn:hover,
.dark-mode .product-modal .option-add-btn:hover,
.dark-mode .modal .option-add-btn:hover {
    background-color: var(--button-hover, var(--primary-color)) !important;
    border-color: var(--button-hover, var(--primary-color)) !important;
}

/* FIX: Profile modal dark mode fixes */
[data-theme="dark"] .profile-modal,
[data-theme="dark"] .profile-info-modal,
.dark-mode .profile-modal,
.dark-mode .profile-info-modal {
    background-color: rgba(0, 0, 0, 0.8) !important;
}

[data-theme="dark"] .profile-modal .profile-modal-content,
[data-theme="dark"] .profile-info-modal .profile-modal-content,
.dark-mode .profile-modal .profile-modal-content,
.dark-mode .profile-info-modal .profile-modal-content {
    background-color: var(--bg-primary, var(--card-bg)) !important;
    color: var(--text-primary, var(--text-color)) !important;
    border: 1px solid var(--border-color) !important;
}

[data-theme="dark"] .profile-modal .profile-info-card,
[data-theme="dark"] .profile-info-modal .profile-info-card,
.dark-mode .profile-modal .profile-info-card,
.dark-mode .profile-info-modal .profile-info-card {
    background-color: var(--bg-secondary, var(--option-bg)) !important;
    color: var(--text-primary, var(--text-color)) !important;
    border: 1px solid var(--border-color) !important;
}

/* Final catch-all for any remaining issues */
[data-theme="dark"] {
    color-scheme: dark !important;
}

.dark-mode {
    color-scheme: dark !important;
}