/* Home hero: LIMA header SVG — black asset, white when DaisyUI dark theme */
[data-theme="dark"] .lima-header-logo {
  filter: brightness(0) invert(1);
}

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

/* Help page: section header menu icons (same assets as sidebar; dark card bg needs white glyphs) */
[data-theme="dark"] #help-left-nav .help-nav-section > summary > img {
  filter: brightness(0) invert(1);
  opacity: 0.9;
}

/* Root nav item selected (Home, Outputs, Help, …): icon contrasts with menu-active pill */
[data-theme="light"] .drawer-side aside .menu a.nav-drawer-row-link.menu-active img.nav-sidebar-icon {
  filter: brightness(0) invert(1);
  opacity: 1;
}
[data-theme="dark"] .drawer-side aside .menu a.nav-drawer-row-link.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.
 */
[data-theme="dark"] .drawer-side aside .menu a.nav-drawer-row-link.menu-active {
  color: oklch(25% 0.02 264) !important;
}

/*
 * Sidebar: DaisyUI .menu uses width:fit-content and styles li > * (incl. wrapper divs) as grid rows.
 * Use a dedicated row so items span full width and leaf/parent rows share the same height (min-h-12).
 */
.drawer-side .app-drawer-sidebar > ul.menu {
  width: 100%;
  max-width: 100%;
}
.drawer-side .app-drawer-sidebar ul.menu > li {
  width: 100%;
  max-width: 100%;
}
.drawer-side .app-drawer-sidebar ul.menu > li > .nav-drawer-item-row {
  display: flex !important;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  align-items: stretch;
  padding: 0 !important;
  padding-inline: 0 !important;
  padding-block: 0 !important;
  gap: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

/*
 * Desktop flyouts: drawer overflow clips in-sidebar positioning. JS moves <ul> to document.body,
 * so rules must match ul.nav-drawer-submenu (not only when nested under .nav-drawer-has-children).
 */
@media (min-width: 768px) {
  ul.nav-drawer-submenu.menu {
    position: fixed;
    left: 0;
    top: 0;
    width: 15rem;
    z-index: 100;
    margin: 0 !important;
    max-height: calc(100dvh - 1rem);
    overflow-y: auto;
    overscroll-behavior: contain;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.15s ease-out, visibility 0.15s ease-out;
  }
  ul.nav-drawer-submenu.menu.nav-flyout-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
}

/* ── Mobile nav drawer: full width + accordion submenus (md+ keeps hover flyout) ── */
@media (max-width: 767px) {
  .drawer .drawer-side {
    width: 100%;
    max-width: 100%;
  }
  .drawer .drawer-side > .drawer-overlay {
    background-color: rgba(0, 0, 0, 0.45);
  }
  .app-drawer-sidebar {
    width: 100% !important;
    max-width: 100vw;
    box-shadow: none;
  }
  /* Submenus: accordion — hidden until .nav-submenu-open on parent li */
  .nav-drawer-has-children .nav-drawer-submenu {
    display: none !important;
  }
  .nav-drawer-has-children.nav-submenu-open .nav-drawer-submenu {
    display: block !important;
  }
  .nav-drawer-submenu-toggle .nav-drawer-chevron-mobile {
    transform: rotate(0deg);
  }
  .nav-drawer-has-children.nav-submenu-open .nav-drawer-submenu-toggle .nav-drawer-chevron-mobile {
    transform: rotate(180deg);
  }
  /* Safety: portaled flyout should never show as a body-level list on small screens */
  body > ul.nav-drawer-submenu.menu {
    display: none !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);
}

/*
 * Mode selection chips (two-panel left/right): narrow strip → 2×2 grid; wider strip → one row.
 * Below md (<768px, stacked panels): column flex inside each chip so short labels match longer ones.
 * md+ (side-by-side panels): row flex, icon left of label (original).
 * Threshold must be below ~30% of a typical md viewport (e.g. 768×0.3 ≈ 230px) is still grid;
 * at ~1024px width 30% ≈ 307px — use a container min-width in that range so the left column
 * can switch to a single row on laptops, not only huge monitors. (22rem was never reached there.)
 * Single-row band (17rem–24rem): force icon-above-label on every chip so short labels do not
 * stay inline while longer ones wrap (per-button flex-wrap).
 */
.mode-select-anchor {
  container-type: inline-size;
  container-name: mode-select;
  width: 100%;
  min-width: 0;
}
.mode-select-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
  width: 100%;
  min-width: 0;
}
.mode-select-row > .mode-btn.btn,
.mode-select-row > .station-artwork-mode-btn.btn {
  min-height: 2rem;
  height: auto !important;
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
  min-width: 0;
  width: 100%;
  white-space: normal;
  text-align: center;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  align-content: center;
  line-height: 1.25;
}
@media (max-width: 767px) {
  .mode-select-row > .mode-btn.btn,
  .mode-select-row > .station-artwork-mode-btn.btn {
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 0.375rem;
    align-content: center;
  }
}
.mode-select-row > .mode-btn img,
.mode-select-row > .station-artwork-mode-btn img {
  flex-shrink: 0;
}
@container mode-select (min-width: 17rem) {
  .mode-select-row {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 0.5rem;
  }
  .mode-select-row > .mode-btn.btn,
  .mode-select-row > .station-artwork-mode-btn.btn {
    flex: 1 1 0%;
    min-width: 0;
    width: auto;
  }
}
@container mode-select (min-width: 17rem) and (max-width: 24rem) {
  .mode-select-row > .mode-btn.btn,
  .mode-select-row > .station-artwork-mode-btn.btn {
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 0.375rem;
    align-content: center;
  }
}

/*
 * Full-page (non-two-panel) mode chips: flex-wrap on md+ screens;
 * on mobile (<768px) use the same compact 2-col grid and column-stacked chip contents as two-panel.
 */
@media (min-width: 768px) {
  .mode-select-page-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
  }
}
@media (max-width: 767px) {
  .mode-select-page-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
    width: 100%;
    min-width: 0;
  }
  .mode-select-page-row > .mode-btn.btn {
    min-height: 2.75rem;
    height: auto !important;
    padding-top: 0.375rem;
    padding-bottom: 0.375rem;
    min-width: 0;
    width: 100%;
    white-space: normal;
    text-align: center;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 0.375rem;
    line-height: 1.25;
  }
}

/*
 * Scrollable tables: horizontal scroll on narrow viewports, vertical scroll with sticky header row.
 * Wrapper is the scroll container; thead th use position:sticky (border-collapse: separate helps thead stickiness).
 */
.app-table-sticky-wrap {
  overflow-x: auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  min-width: 0;
  min-height: 0;
}
.app-table-sticky-wrap--max {
  max-height: min(78vh, 56rem);
}
.app-table-sticky-wrap table {
  border-collapse: separate;
  border-spacing: 0;
}
.app-table-sticky-wrap thead th {
  position: sticky;
  top: 0;
  z-index: 10;
  box-shadow: 0 1px 0 0 color-mix(in oklch, var(--color-base-content) 12%, transparent);
}
.app-table-sticky-wrap thead tr.bg-neutral th {
  background-color: var(--color-neutral);
  color: var(--color-neutral-content);
}
.app-table-sticky-wrap thead.bg-base-200 th,
.app-table-sticky-wrap thead tr.bg-base-200 th {
  background-color: var(--color-base-200);
  color: var(--color-base-content);
}
.app-table-sticky-wrap thead tr[class*="bg-base-200"] th {
  background-color: var(--color-base-200);
  color: var(--color-base-content);
}
.app-table-sticky-wrap thead:not(:has(.bg-neutral)):not(:has([class*="bg-base-200"])) th {
  background-color: var(--color-base-200);
  color: var(--color-base-content);
}