:root {
  --bs-dark-gray: #343a40;
  --bs-light-gray: #bfc6c9;
  --bs-light-text: #4c5355;
  --hover-light: #c44b4f;
  --hover-dark: #607d86;
  --bs-dark-text: #cbcdcb;
  --danger-hover-bg-light: rgba(220, 53, 69, 0.1);
  

}

[data-bs-theme="dark"] {
  --bs-navbar-bg: var(--bs-dark-gray);
  --bs-body-bg: #1f1f1f;
  --bs-body-color: #f8f9fa;
  --bs-nav-hover-bg: var(--hover-dark);
  --bs-light-text: var(--bs-dark-text);
  --btn-hover: #4c6a74;
  --btn-active: #39565f;
}

[data-bs-theme="light"] {
  --bs-navbar-bg: var(--bs-light-gray);
  --bs-body-bg: #ffffff;
  --bs-body-color: var(--bs-light-text);
  --bs-nav-hover-bg: var(--hover-light);
  --btn-accent: var(--hover-light);
  --btn-hover: #b73e42;
  --btn-active: #a03438;

}

#sidenav {
  width: 280px;
  transition: width 0.4s ease-in-out;
  overflow: hidden;
  background-color: var(--bs-navbar-bg) !important;
  color: var(--bs-light-text);
}

#topnav {
  width: 100%;
  background-color: var(--bs-navbar-bg) !important;
  color: var(--bs-light-text);
  padding-left: 0.5rem;
  padding-right: 1rem;
}

#sidenav.collapsed {
  width: 80px;
}

#sidenav.collapsed .sidebar-label,
#sidenav.collapsed .collapse,
#sidenav.collapsed .chevron {
  display: none !important;
}

.submenu .nav-link {
  padding-left: 2.5rem;
}

/* Main container shifts left accordingly */
.main-container {
  background-color: var(--bs-body-bg);
  color: var(--bs-body-color);
  padding: 5rem 2rem 2rem;

  transition: margin-left 0.4s ease-in-out;
  min-height: 100vh;
}

/* Adjust main container when sidebar is collapsed */
body.sidebar-collapsed .main-container {
margin-left: 80px;
}

.nav-link {
  transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
  color: var(--bs-light-text);
}

.nav-link:hover {
  background-color: var(--bs-nav-hover-bg);
  color: #fff;
}

.chevron {
  transition: transform 0.3s ease;
}

.chevron.rotate {
  transform: rotate(90deg);
}

.dropdown-menu {
  background-color: var(--bs-body-bg);
  color: var(--bs-body-color);
  border: 1px solid rgba(0, 0, 0, 0.125);
}

.dropdown-menu .dropdown-item {
  color: var(--bs-body-color);
}

.dropdown-menu .dropdown-item:hover {
  background-color: var(--bs-nav-hover-bg);
  color: #fff;
}

/* Apply the hover style only when text is danger */
.dropdown-item.text-danger:hover {
  background-color: var(--danger-hover-bg-light);
  color: #dc3545; /* keep text color consistent */
}

@media (max-width: 768px) {
  #sidenav {
    width: 80px;
  }

  .main-container {
    left: 80px;
  }
}

/* Dark theme override using prefers-color-scheme */
@media (prefers-color-scheme: dark) {
  :root {
    --danger-hover-bg-light: rgba(220, 53, 69, 0.3); /* optional tweak */
  }
}

.icon-btn {
--background-color: var(--btn-accent);
border: none;

width: 48px;
height: 48px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
transition: background-color 0.2s ease;
padding: 0;
}

.icon-btn i {
font-size: 1.5rem;
line-height: 1;
}

.icon-btn:hover {
background-color: var(--btn-hover);
}

.icon-btn:active {
background-color: var(--btn-active);
}

 
.form-check-input.toggle-switch {
  width: 3rem;
  height: 1.5rem;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
}


.editable-cell {
  background-color: #fdfdfd;
  cursor: text;
}


.chart-container {
  height: 400px;
}

.summary-tile {
  background-color: var(--bs-body-bg);
  color: var(--bs-body-color);
  border: 1px solid rgba(0, 0, 0, 0.125);
  transition: all 0.3s ease;
}

.summary-tile:hover {
  background-color: var(--bs-nav-hover-bg);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

[data-bs-theme="dark"] .summary-tile {
  background-color: #2c2f33;
  border-color: #444;
  color: var(--bs-body-color);
}

[data-bs-theme="dark"] .summary-tile:hover {
  background-color: var(--hover-dark);
  color: #fff;
}
 

  /* .offcanvas-static {
    transition: all 0.3s ease;
    min-height: 100vh;
  } */