/* Nav menu icons: white in dark mode for visibility on dark sidebar */
[data-theme="dark"] .drawer-side .menu img {
  filter: brightness(0) invert(1);
}

/* Root nav item selected (Home, Outputs, Help, …): icon contrasts with menu-active pill */
[data-theme="light"] .drawer-side aside > ul.menu > li > a.menu-active img.nav-sidebar-icon {
  filter: brightness(0) invert(1);
  opacity: 1;
}
[data-theme="dark"] .drawer-side aside > ul.menu > li > a.menu-active img.nav-sidebar-icon {
  filter: brightness(0) invert(0);
  opacity: 1;
}

/*
 * Dark theme: menu-active uses neutral bg (#a5a3a4) but Daisy still assigns neutral-content
 * (~white) in both themes, so selected labels stayed white. Use dark text on that pill.
 * (aside > ul.menu limits to the main sidebar list, not flyout submenus.)
 */
[data-theme="dark"] .drawer-side aside > ul.menu > li > a.menu-active {
  color: oklch(25% 0.02 264) !important;
}

/* Icons page: icon previews white in dark mode */
[data-theme="dark"] #icons-list .icon-card img,
[data-theme="dark"] #icon-preview img {
  filter: brightness(0) invert(1);
}

/* Connection types page: icons white in dark mode */
[data-theme="dark"] #ct-list .ct-card img {
  filter: brightness(0) invert(1);
}

/* Manage features page: assigned icon previews white in dark mode */
[data-theme="dark"] #features-list .feature-card img {
  filter: brightness(0) invert(1);
}

/* Home carousel: allow cards to rise above container (no top clipping) */
.home-carousel {
  overflow-y: visible !important;
}

/* Footer: white logo in dark mode */
.footer-logo-dark {
  display: none;
}
[data-theme="dark"] .footer-logo-light {
  display: none;
}
[data-theme="dark"] .footer-logo-dark {
  display: block;
}

/* Navbar brand (logo + title): scale on hover */
.navbar .navbar-start .navbar-brand-home {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem;
  margin: -0.25rem;
  transition: transform 0.2s ease-out;
  will-change: transform;
  transform-origin: center center;
}
.navbar .navbar-start .navbar-brand-home:hover {
  transform: scale(1.1);
}