/* Dark theme css */
[data-bs-theme="dark"] .theme-toggle-main-div {
  background-color: #343a40 !important;
  /* Light text for dark background */
}

[data-bs-theme="dark"] #s4e-user-info-wrapper {
  background-color: #212529 !important;
  /* Light text for dark background */
  color: white;
}

[data-bs-theme="dark"] #s4e-user-info-wrapper > .user-name {
  color: white;
}

[data-bs-theme="dark"] #s4e-asset-manager {
  background-color: #212529 !important;
  /* Light text for dark background */
  color: white;
}

[data-bs-theme="dark"] {
  --bs-body-bg: #212529;
  --bs-body-color: #f8f9fa;
}

[data-bs-theme="dark"] .s4e-scan-result-wrapper {
  border: 1px solid #444;
  background-color: #343a40;
  /* Darker background for scan result wrapper */
}

[data-bs-theme="dark"] .info-block {
  background-color: #3e3e3e;
  /* Darker background for info blocks */
}

[data-bs-theme="dark"] #s4e-scan-output {
  background-color: #3a3a3a;
  /* Darker background for scan output */
  border: 1px solid #444;
  /* Dark border for scan output */
}

[data-bs-theme="dark"] .s4e-tab-content {
  background-color: #343a40;
  /* Darker background for tab content */
  color: #f8f9fa;
  /* Light text color for better readability */
}

[data-bs-theme="dark"] .s4e-tab-button {
  background-color: #495057;
  /* Darker button color */
}

[data-bs-theme="dark"] .s4e-tab-button:hover {
  background-color: #6c757d;
  /* Hover color for buttons in dark theme */
}

[data-bs-theme="dark"] .s4e-tab-button.active {
  background-color: #4292d4;
  /* Active button color */
}

/* table */
/* Dark Theme Styles */
[data-bs-theme="dark"] .wraper-s4e-table {
  width: 100%;
  border: 1px solid #6c757d;
  /* Dark border */
}

/* Dark Theme Styles */
[data-bs-theme="dark"] .s4e-table {
  width: 100%;
  border-collapse: collapse;
  background: #212529;
  /* Dark background */
}

[data-bs-theme="dark"] .header-row {
  background-color: #343a40;
  /* Darker header background */
}

[data-bs-theme="dark"] .header-row > th {
  padding: 15px;
  border-bottom: 1px solid #495057;
  /* Dark border for header cells */
  text-align: left;
  color: #f8f9fa;
  /* Light text color for header */
}

/* Dark Theme Styles for #scan-table-body and #assets-table-body */
[data-bs-theme="dark"] #scan-table-body,
[data-bs-theme="dark"] #assets-table-body {
  text-align: left;
  font-size: 13px;
  color: #f8f9fa;
  /* Light text color for table body */
}

/* Hover effect for both #scan-table-body and #assets-table-body rows */
[data-bs-theme="dark"] #scan-table-body tr:hover,
[data-bs-theme="dark"] #assets-table-body tr:hover {
  background-color: #495057;
  /* Darker gray background on hover */
}

[data-bs-theme="dark"] #scan-table-body tr:hover td,
[data-bs-theme="dark"] #assets-table-body tr:hover td {
  color: #ffffff;
  /* Light text color on hover */
}

[data-bs-theme="dark"] .skeleton-loader {
  height: 20px;
  background: #495057;
  /* Darker background for the loader */
  border-radius: 4px;
}

[data-bs-theme="dark"] #s4e-back-to-start-scan-options {
  color: white;
}

[data-bs-theme="dark"] .back-button {
  font-size: 18px;
  padding: 8px;
  background-color: transparent;
  /* Keeping background transparent */
  color: #4292d4;
  /* Lighter color for dark theme */
  border: none;
  cursor: pointer;
}

[data-bs-theme="dark"] .back-button:hover {
  color: #cbd5e1;
  /* Light gray color on hover */
}

[data-bs-theme="dark"] .s4e-text {
  color: #ffffff;
  /* Light gray color on hover */
}

[data-bs-theme="dark"] #s4e-login-wrapper {
  background-color: #495057;
  color: #ffffff;
}

[data-bs-theme="dark"] #s4e-login-wrapper {
  background-color: #495057;
  /* Dark gray background */
  color: #ffffff;
  /* White text */
}

[data-bs-theme="dark"] #s4e-login-wrapper label {
  color: #f0f0f0;
  /* Light color for labels */
}

[data-bs-theme="dark"] #s4e-login-wrapper input {
  background-color: #333;
  /* Dark background for inputs */
  color: #ffffff;
  /* White text in inputs */
  border: 1px solid #555;
  /* Darker border for inputs */
}

[data-bs-theme="dark"] #s4e-login-wrapper input::placeholder {
  color: #aaa;
  /* Lighter placeholder color */
}

[data-bs-theme="dark"] .scan-option {
  background-color: #495057;
  border: 1px solid;
  border-color: #495057;
  box-shadow: none;
}

[data-bs-theme="dark"] .scan-option h3,
[data-bs-theme="dark"] .scan-option p,
[data-bs-theme="dark"] .scan-option svg {
  color: #fff;
}

/* Dark theme for container */
[data-bs-theme="dark"] .search-bar-container {
  background-color: #212529;
  /* Dark background */
  border: 1px solid #444;
  /* Darker border */
}

/* Dark theme for input box */
[data-bs-theme="dark"] .search-input {
  background-color: #212529;
  /* Slightly lighter than container */
  color: #fff;
  /* White text */
  border: none;
  outline: none;
}

/* Dark theme for the icon container */
[data-bs-theme="dark"] .icon-container {
  color: #adb5bd;
  /* Light grey icon color */
}

/* Dark theme for tooltip text */
[data-bs-theme="dark"] .tooltip-text {
  background-color: #212529;
  /* Very dark tooltip background */
  color: #f8f9fa;
  /* Light text color */
  border-radius: 5px;
  padding: 5px;
  white-space: nowrap;
}

/* Hover effect remains the same, tooltip pops up */
[data-bs-theme="dark"] .icon-container:hover + .tooltip-text {
  visibility: visible;
  opacity: 1;
}

[data-bs-theme="dark"] .severity-chip-title {
  color: #fff !important;
}

[data-bs-theme="dark"] .severity-chip-count {
  color: #fff !important;
}

[data-bs-theme="dark"] #no-data-found-container {
  background-color: rgb(34, 34, 34);
  border-color: #212529;
}

[data-bs-theme="dark"] .severity-chip-loader {
  color: #dbdbdb9e;
}

[data-bs-theme="dark"] .styled-dropdown {
  border: 1px solid #555;
  /* Darker border */
  background-color: #2b2b2b;
  /* Dark background for the dropdown */
  color: #e1e1e1;
  /* Light text color */
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg xmlns%3D%22http%3A//www.w3.org/2000/svg%22 viewBox%3D%220 0 4 5%22%3E%3Cpath fill%3D%22%23e1e1e1%22 d%3D%22M2 0L0 2h4zm0 5L0 3h4z%22/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 10px;
}

[data-bs-theme="dark"] .styled-dropdown:hover,
[data-bs-theme="dark"] .styled-dropdown:focus {
  border-color: #666;
  /* Slightly lighter border on hover */
  box-shadow: 0 0 5px rgba(255, 255, 255, 0.1);
  /* Subtle light shadow */
}

[data-bs-theme="dark"] .styled-dropdown::-webkit-scrollbar-track {
  background: #2b2b2b;
}

[data-bs-theme="dark"] .styled-dropdown::-webkit-scrollbar-thumb {
  background-color: #444;
  border-radius: 4px;
  border: 2px solid #2b2b2b;
}

/* Dark Theme CSS */

[data-bs-theme="dark"] .verify-asset-overlay {
  background-color: rgba(0, 0, 0, 0.8);
  /* Darker overlay */
}

[data-bs-theme="dark"] .verify-asset-popup {
  background-color: #343a40;
  /* Dark background for the popup */
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.8);
  border: 1px solid #495057;
  /* Border for better definition */
}

[data-bs-theme="dark"] .verify-asset-main-container {
  background-color: #343a40;
}

[data-bs-theme="dark"] .verify-asset-close-button {
  color: #adb5bd;
  /* Light color for the close button */
}

[data-bs-theme="dark"] .verify-asset-title {
  color: #f8f9fa;
  /* White for readability */
}

[data-bs-theme="dark"] .verify-asset-tabs {
  background-color: #343a40;
  border-bottom: 1px solid #495057;
  /* Border to distinguish the tabs */
}

[data-bs-theme="dark"] .verify-asset-tab {
  color: #adb5bd;
  /* Light text color */
}

[data-bs-theme="dark"] .verify-asset-tab.active {
  color: #ffffff;
  /* White for active tab */
}

[data-bs-theme="dark"] .verify-asset-tab.active::after {
  background-color: #007bff;
  /* Blue underline for active tab */
}

[data-bs-theme="dark"] .verify-asset-content {
  color: #ced4da;
  /* Light text color */
}

[data-bs-theme="dark"] .verify-asset-download-container {
  background-color: #3c3f44;
  /* Dark background for download container */
  border: 1px solid #495057;
  /* Border for separation */
}

[data-bs-theme="dark"] .verify-asset-download-container span {
  color: #f8f9fa;
  /* White text for file name */
}

[data-bs-theme="dark"] .verify-asset-download-container a {
  color: #0d6efd;
  /* Blue for download link */
}

[data-bs-theme="dark"] .verify-asset-download-container a:hover {
  text-decoration: underline;
  color: #82b1ff;
  /* Lighter blue on hover */
}

[data-bs-theme="dark"] .verify-asset-custom-button {
  background-color: #1e3a5f;
  /* Dark blue */
  color: #f8f9fa;
  /* White text */
}

[data-bs-theme="dark"] .verify-asset-custom-button:hover {
  background-color: #345d88;
  /* Lighter blue on hover */
}

[data-bs-theme="dark"] .init-asset-custom-verification-div {
  background-color: #343a40;
}

[data-bs-theme="dark"] .verify-asset-radio-container {
  background-color: #3c3f44;
  /* Dark background for radio container */
  color: #ced4da;
  /* Light text color */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.6);
}

[data-bs-theme="dark"] .verify-asset-radio-container:hover {
  background-color: #495057;
  /* Slightly lighter for hover effect */
}

[data-bs-theme="dark"] .verify-asset-radio-checkmark {
  border: 2px solid #4a90e2;
  /* Light blue */
  background-color: #3c3f44;
  /* Dark background */
}

[data-bs-theme="dark"]
  .verify-asset-radio-container
  input[type="radio"]:checked
  + .verify-asset-radio-checkmark {
  background-color: #4a90e2;
  /* Light blue when selected */
  box-shadow: 0 0 0 6px rgba(74, 144, 226, 0.3);
}

[data-bs-theme="dark"] .notification-box-success {
  color: white !important;
  background-color: #274000;
}

[data-bs-theme="dark"] .notification-box-error {
  background-color: #541812;
  color: white !important;
}

[data-bs-theme="dark"] .notification-close {
  color: white;
}

[data-bs-theme="dark"] .custom-select-wrapper {
  position: relative;
  display: inline-block;
  width: auto;
}

[data-bs-theme="dark"] .custom-select {
  padding: 5px 20px 5px 10px;
  border-radius: 4px;
  border: 1px solid #555;
  /* Darker border for dark theme */
  background-color: #222;
  /* Dark background */
  color: #f4f4f4;
  /* Light text color */
  font-size: 14px;
  appearance: none;
  width: 60px;
  cursor: pointer;
}

[data-bs-theme="dark"] .custom-select-arrow {
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  pointer-events: none;
  /* Ensure the arrow doesn't interfere with clicks */
  width: 16px;
  height: 16px;
  fill: none;
  stroke: #f4f4f4;
  /* Light arrow color for contrast */
  stroke-width: 2;
}

[data-bs-theme="dark"] #start-new-scan,
[data-bs-theme="dark"] .asset-button-style,
[data-bs-theme="dark"] .logout-button {
  background-color: #1383d4;
}

[data-bs-theme="dark"] .severity-chip-high {
  background-color: #fbcaa8a6;
}

/* WordPress Admin Area Dark Theme fixes for Light/Dark Toggle only */
.wrap [data-bs-theme="dark"] .theme-toggle {
  display: inline-block !important;
  position: relative !important;
  width: 69px !important;
  height: 30px !important;
  z-index: 10 !important;
}

.wrap [data-bs-theme="dark"] .toggle-checkbox {
  display: none !important;
}

.wrap [data-bs-theme="dark"] .toggle-label {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  background-color: #495057 !important;
  border-radius: 30px !important;
  cursor: pointer !important;
  position: relative !important;
  transition: background-color 0.4s ease !important;
  border: none !important;
  box-shadow: none !important;
}

.wrap [data-bs-theme="dark"] .toggle-ball {
  position: absolute !important;
  top: 2px !important;
  left: 2px !important;
  width: 26px !important;
  height: 26px !important;
  background-color: #f8f9fa !important;
  border-radius: 50% !important;
  transition: transform 0.4s ease !important;
  z-index: 2 !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4) !important;
}

.wrap [data-bs-theme="dark"] .toggle-checkbox:checked + .toggle-label {
  background-color: black !important;
}

.wrap
  [data-bs-theme="dark"]
  .toggle-checkbox:checked
  + .toggle-label
  .toggle-ball {
  transform: translateX(38px) !important;
}

.wrap [data-bs-theme="dark"] .sun-icon,
.wrap [data-bs-theme="dark"] .moon-icon {
  font-size: 12px !important;
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  z-index: 1 !important;
}

.wrap [data-bs-theme="dark"] .sun-icon {
  right: 10px !important;
  color: #adb5bd !important;
}

.wrap [data-bs-theme="dark"] .moon-icon {
  left: 10px !important;
  display: none !important;
}

.wrap
  [data-bs-theme="dark"]
  .toggle-checkbox:checked
  + .toggle-label
  .sun-icon {
  display: none !important;
}

.wrap
  [data-bs-theme="dark"]
  .toggle-checkbox:checked
  + .toggle-label
  .moon-icon {
  display: inline-block !important;
  color: white !important;
}