/* Enhanced Dark Mode Styles for Better Visual Integration */

/* Dark mode scrollbar styling */
[data-theme="dark"] ::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

[data-theme="dark"] ::-webkit-scrollbar-track {
    background: var(--bg-secondary);
    -webkit-box-shadow: inset 0 0 10px rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] ::-webkit-scrollbar-thumb {
    background: var(--bg-tertiary);
    -webkit-box-shadow: inset 0 0 10px rgba(255, 255, 255, 0.2);
    border-radius: 5px;
}

[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
    background: #555555;
}

/* Dark mode labels and form controls */
[data-theme="dark"] label,
[data-theme="dark"] .control-label,
[data-theme="dark"] .form-label {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .form-control:focus {
    background-color: var(--input-bg);
    border-color: var(--color-primary);
    color: var(--text-primary);
    box-shadow: 0 0 0 0.25rem rgba(1, 143, 212, 0.25);
}

[data-theme="dark"] .form-control[readonly] {
    background-color: var(--bg-tertiary);
    color: var(--text-secondary);
}

[data-theme="dark"] .form-check-label {
    color: var(--text-primary);
}

[data-theme="dark"] .form-select {
    background-color: var(--input-bg);
    color: var(--text-primary);
    border-color: var(--border-color);
}

[data-theme="dark"] .form-select:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 0.25rem rgba(1, 143, 212, 0.25);
}

/* Dark mode buttons */
[data-theme="dark"] .btn-primary {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
}

[data-theme="dark"] .btn-secondary {
    background-color: var(--bg-tertiary);
    border-color: var(--border-color);
    color: var(--text-primary);
}

[data-theme="dark"] .btn-outline-primary {
    color: var(--color-primary);
    border-color: var(--color-primary);
}

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

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

[data-theme="dark"] .page-link:hover {
    background-color: var(--bg-tertiary);
    border-color: var(--border-color);
    color: var(--text-primary);
}

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

/* Dark mode badges */
[data-theme="dark"] .badge {
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
}

/* Dark mode alerts */
[data-theme="dark"] .alert-primary {
    background-color: rgba(1, 143, 212, 0.2);
    border-color: rgba(1, 143, 212, 0.3);
    color: var(--text-primary);
}

[data-theme="dark"] .alert-success {
    background-color: rgba(25, 135, 84, 0.2);
    border-color: rgba(25, 135, 84, 0.3);
    color: var(--text-primary);
}

[data-theme="dark"] .alert-warning {
    background-color: rgba(255, 193, 7, 0.2);
    border-color: rgba(255, 193, 7, 0.3);
    color: var(--text-primary);
}

[data-theme="dark"] .alert-danger {
    background-color: rgba(220, 53, 69, 0.2);
    border-color: rgba(220, 53, 69, 0.3);
    color: var(--text-primary);
}

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

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

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

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

[data-theme="dark"] .list-group-item:hover {
    background-color: var(--bg-tertiary);
}

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

/* Dark mode progress bars */
[data-theme="dark"] .progress {
    background-color: var(--bg-tertiary);
}

/* Dark mode tooltips */
[data-theme="dark"] .tooltip .tooltip-inner {
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
}

/* Dark mode popovers */
[data-theme="dark"] .popover {
    background-color: var(--bg-primary);
    border-color: var(--border-color);
}

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

[data-theme="dark"] .popover-body {
    color: var(--text-primary);
}

/* Dark mode table dropdown links */
[data-theme="dark"] .secondaryContainer table td .nav-link {
    color: var(--color-primary) !important;
}

[data-theme="dark"] .secondaryContainer table td .nav-link:hover {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .secondaryContainer table td .dropdown-toggle::after {
    border-top-color: var(--color-primary);
}

/* Dark mode nav-links in tables */
[data-theme="dark"] table .nav-link {
    color: var(--color-primary) !important;
}

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

/* Dark mode filter input groups */
[data-theme="dark"] .filter-group .input-group-prepend select {
    background-color: var(--input-bg) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

[data-theme="dark"] .filter-group .form-control {
    background-color: var(--input-bg) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

[data-theme="dark"] .input-group-addon {
    background-color: var(--bg-tertiary);
    border-color: var(--border-color);
}

[data-theme="dark"] .input-group-text {
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
    border-color: var(--border-color);
}

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

/* Dark mode form-select and select2 */
[data-theme="dark"] .form-select {
    background-color: var(--input-bg) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e") !important;
}

[data-theme="dark"] .select2-container--bootstrap-5 .select2-selection--single {
    background-color: var(--input-bg) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

[data-theme="dark"] .select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .select2-container--bootstrap-5 .select2-selection--single .select2-selection__arrow b {
    border-color: var(--text-primary) transparent transparent transparent !important;
}

/* Dark mode status background colors */
[data-theme="dark"] .bg-Draft td {
    background: linear-gradient(180deg, var(--bg-primary), rgba(129, 212, 250, 0.3)) !important;
}

[data-theme="dark"] .bg-InApproval td {
    background: linear-gradient(180deg, var(--bg-primary), rgba(132, 255, 183, 0.3)) !important;
}

[data-theme="dark"] .bg-Reject td {
    background: linear-gradient(180deg, var(--bg-primary), rgba(255, 149, 130, 0.3)) !important;
}

/* Dark mode card headers */
[data-theme="dark"] .bg-body-tertiary {
    background-color: var(--bg-tertiary) !important;
    color: var(--text-primary) !important;
}

/* Dark mode dashboard cards */
[data-theme="dark"] .card {
    background-color: var(--bg-primary) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

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

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

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

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

/* Dark mode header menu icon */
[data-theme="dark"] .manu-icon {
    color: var(--text-primary) !important;
}

/* Dark mode header user profile icon */
[data-theme="dark"] .text-primary-emphasis {
    color: var(--color-primary) !important;
}

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

/* Dark mode table styles for ProductModelSetLiveExplorer */
[data-theme="dark"] .table {
    background-color: var(--bg-primary) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

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

[data-theme="dark"] .table-active {
    background-color: var(--bg-tertiary) !important;
    color: var(--text-primary) !important;
}

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

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

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

[data-theme="dark"] .select-bg-ProductModelSet {
    background-color: rgba(1, 143, 212, 0.4) !important;
    color: var(--text-primary) !important;
    border: 1px solid rgba(1, 143, 212, 0.6) !important;
    box-shadow: 0 0 8px rgba(1, 143, 212, 0.3) !important;
}

[data-theme="dark"] td.select-bg-ProductModelSet {
    background-color: rgba(1, 143, 212, 0.4) !important;
    color: var(--text-primary) !important;
    border-color: rgba(1, 143, 212, 0.6) !important;
}

[data-theme="dark"] .select-bg-ProductModelSet * {
    color: var(--text-primary) !important;
}

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

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

[data-theme="dark"] .btn-success {
    background-color: #198754 !important;
    border-color: #198754 !important;
    color: white !important;
}

[data-theme="dark"] .btn-success:hover {
    background-color: #157347 !important;
    border-color: #146c43 !important;
    color: white !important;
}

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

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

[data-theme="dark"] .material-symbols-outlined {
    color: inherit !important;
}

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

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

/* Dark mode filter inputs specific styling */
[data-theme="dark"] .input-group select {
    background-color: var(--input-bg) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

[data-theme="dark"] .input-group-sm select {
    background-color: var(--input-bg) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

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

/* Dark mode table row hover effects */
[data-theme="dark"] .table tbody tr:hover {
    background-color: var(--bg-secondary) !important;
}

[data-theme="dark"] .table tbody tr:hover td {
    background-color: var(--bg-secondary) !important;
}

/* Dark mode sticky table headers */
[data-theme="dark"] thead[style*="position:sticky"] {
    background-color: var(--bg-tertiary) !important;
}

[data-theme="dark"] thead[style*="position:sticky"] th {
    background-color: var(--bg-tertiary) !important;
    color: var(--text-primary) !important;
}

/* Dark mode card headers with icons */
[data-theme="dark"] .card-header {
    background-color: var(--bg-tertiary) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

/* Dark mode override for inline red color for inactive items */
[data-theme="dark"] td[style*="color: rgb(255, 0, 0)"],
[data-theme="dark"] td[style*="color:#ff0000"],
[data-theme="dark"] td[style*="color: #ff0000"] {
    color: #ff6b6b !important;
}

[data-theme="dark"] td[style*="color: rgb(255, 0, 0)"] *,
[data-theme="dark"] td[style*="color:#ff0000"] *,
[data-theme="dark"] td[style*="color: #ff0000"] * {
    color: inherit !important;
}

/* Dark mode dropdown menus in tables */
[data-theme="dark"] .dropdown-menu {
    background-color: var(--dropdown-bg) !important;
    border-color: var(--border-color) !important;
}

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

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

/* Dark mode currency icons */
[data-theme="dark"] .fa-inr,
[data-theme="dark"] .fa-usd,
[data-theme="dark"] .fa-eur,
[data-theme="dark"] .fa-gbp {
    color: var(--color-primary) !important;
}

/* Dark mode text alignment and nowrap */
[data-theme="dark"] .text-nowrap {
    color: var(--text-primary) !important;
}

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

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

/* Dark mode scrollable containers */
[data-theme="dark"] .tab-pane[style*="overflow: scroll"] {
    background-color: var(--bg-primary) !important;
}

/* Dark mode material icons with specific colors */
[data-theme="dark"] .material-symbols-outlined[style*="color:#274483"] {
    color: var(--color-primary) !important;
}

[data-theme="dark"] .material-symbols-outlined[style*="color:#000000"] {
    color: var(--text-primary) !important;
}

/* Dark mode custom icon sizes */
[data-theme="dark"] .customIconSize {
    color: var(--text-primary) !important;
}

/* Dark mode no records found message */
[data-theme="dark"] center {
    color: var(--text-secondary) !important;
}

/* Dark mode select2 integration */
[data-theme="dark"] .select2-container--bootstrap-5 .select2-selection--single {
    background-color: var(--input-bg) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

[data-theme="dark"] .select2-dropdown {
    background-color: var(--dropdown-bg);
    border-color: var(--border-color);
}

[data-theme="dark"] .select2-results__option {
    background-color: var(--dropdown-bg);
    color: var(--text-primary);
}

[data-theme="dark"] .select2-results__option--highlighted {
    background-color: var(--bg-tertiary);
}

/* Dark mode dashboard cards */
[data-theme="dark"] .dashboard-card {
    background: linear-gradient(to bottom right, var(--bg-primary), var(--bg-tertiary));
    box-shadow: 0 6px 10px rgba(255, 255, 255, 0.05), 0 0 6px rgba(255, 255, 255, 0.03);
}

[data-theme="dark"] .dashboard-card:hover {
    box-shadow: 0 10px 20px rgba(255, 255, 255, 0.08), 0 4px 8px rgba(255, 255, 255, 0.04);
}

/* Dark mode loading spinner */
[data-theme="dark"] .processing {
    background-color: rgba(26, 26, 26, 0.7);
}

[data-theme="dark"] .spinner-border {
    border-color: rgba(1, 143, 212, 0.3);
    border-top-color: var(--color-primary);
}

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

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

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

/* Dark mode borders */
[data-theme="dark"] .border {
    border-color: var(--border-color) !important;
}

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

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

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

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

/* Dark mode background utilities */
[data-theme="dark"] .bg-light {
    background-color: var(--bg-secondary) !important;
}

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

/* Animation for smooth theme transition */
[data-theme="dark"] * {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

/* Disable transitions during theme switch to prevent flashing */
.theme-switching * {
    transition: none !important;
}

/* Dark mode login page styles */
[data-theme="dark"] .form-floating > .form-control {
    background-color: var(--input-bg) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] .form-floating > .form-control:focus {
    background-color: var(--input-bg) !important;
    border-color: var(--color-primary) !important;
    color: var(--text-primary) !important;
    box-shadow: 0 0 0 0.25rem rgba(1, 143, 212, 0.25) !important;
}

[data-theme="dark"] .form-floating > label {
    color: var(--text-secondary) !important;
}

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

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

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