/* Light theme styles are loaded via theme-light.css */
/* This file contains dark mode variable overrides only */

body.dark-mode {
  --primary-color: #66b2ff;
  --secondary-color: #9ca3af;
  --success-color: #00e676;
  --danger-color: #ff5e57;
  --warning-color: #fbc02d;
  --info-color: #29b6f6;
  --light-color: #1f2937;
  --dark-color: #ffffff;
  --bg-header: #1e1e1e;
  --bg-row-even: #2a2a2a;
  --bg-row-odd: #1f1f1f;
  --hover-bg: rgba(59, 109, 209, 0.15);
  --border-color: #444;

  --text-color: #e0e0e0;
  --bg-body: #121d2a;
  --bg-card: #1e2b3c;

}

body.dark-mode .navbar {
  background-color: var(--dark-color);
  border-bottom: 1px solid var(--border-color);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

body.dark-mode .navbar .nav-link {
  color: var(--light-color);
}

body.dark-mode .navbar .nav-link:hover {
  color: var(--primary-color);
  text-decoration: underline;
}

.icon-container {
  position: relative; /* For positioning the caption */
  display: inline-block; /* To make the container wrap its content */
}

.icon-container .caption {
  display: none; /* Hide caption by default */
  /* Optional: Styling for the caption */
  background-color: #333;
  color: #fff;
  padding: 5px 10px;
  border-radius: 4px;
  position: absolute;
  bottom: 120%; /* Position above the icon */
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap; /* Prevent line breaks */
  z-index: 1;
}

.icon-container:hover .caption {
  display: block; /* Show caption on hover */
}