/*
 * ICAM Abacus — Admin sidebar (final design target)
 * Accordion + muted section titles + soft wash active + icon rail.
 * Flags: html[data-icam-sidebar-layout|active|search|icon-rail] from appearance-config.js
 */

/* ── Shell — pale mint / near-white rail (final sample) ──────────────────── */
#nav-sidebar {
  width: var(--icam-sidebar-width, 17.5rem) !important;
  min-width: var(--icam-sidebar-width, 17.5rem) !important;
  height: 100vh !important;
  max-height: 100vh !important;
  top: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  overflow: hidden !important;
  z-index: 40;
}

#nav-sidebar,
#nav-sidebar-inner,
#nav-sidebar > div,
#nav-sidebar .bg-base-50 {
  font-family: "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif !important;
  -webkit-font-smoothing: antialiased;
  background: var(--admin-sidebar, #f7fcfa) !important;
  border-color: var(--admin-border, #d3e6e6) !important;
  border-right: 1px solid var(--admin-border-soft, #e4efef) !important;
  box-shadow: none !important;
}

#nav-sidebar-inner {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  max-height: 100% !important;
  min-height: 0 !important;
  overflow: hidden !important;
  padding: 0.85rem 0.7rem 0.85rem !important;
  gap: 0.55rem !important;
}

#nav-sidebar-inner > .border-b,
#nav-sidebar-inner > .border-t,
#nav-sidebar-inner > [class*="navigation_user"] {
  flex: 0 0 auto !important;
}

/*
 * Scrollable apps list between logo/search and the user footer.
 *
 * Do NOT use height:0 + flex-grow. Chrome lets flex-grow override height:0;
 * Firefox / Safari honour the specified 0px box, so the menu vanishes.
 *
 * Unfold also ships `.hidden.has-[ol]:has-[li]:block` on each group.
 * Browsers without :has() (Firefox ESR, older Safari/Edge) keep display:none.
 * Unhide groups with a selector that does not need :has().
 */
#nav-sidebar-apps {
  display: flex !important;
  flex-direction: column !important;
  position: relative !important;
  flex: 1 1 auto !important;
  align-self: stretch !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 0.1rem 0.1rem 0.35rem 0 !important;
}

#nav-sidebar-apps > div,
#nav-sidebar-apps .simplebar-content > div {
  display: block !important;
}
#nav-sidebar-apps > div.icam-nav-section--empty,
#nav-sidebar-apps .simplebar-content > div.icam-nav-section--empty {
  display: none !important;
}

/* ── Brand header — flat, compact ────────────────────────────────────────── */
#nav-sidebar-inner .border-b {
  flex-shrink: 0;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0.35rem 0.4rem 0.55rem !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  display: flex !important;
  align-items: center !important;
  gap: 0.4rem !important;
}

#nav-sidebar-inner .border-b > div {
  height: auto !important;
  min-height: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  flex: 1 1 auto;
  min-width: 0;
}

#nav-sidebar-inner .icam-admin-logo-link {
  display: block;
  width: 100%;
  min-width: 0;
}

#nav-sidebar-inner .icam-admin-logo {
  display: block;
  width: auto;
  max-width: 12rem;
  height: auto;
  max-height: 2.5rem;
  margin: 0 !important;
  object-fit: contain;
  object-position: left center;
}

#nav-sidebar-inner .border-b a,
#nav-sidebar-inner .border-b .font-semibold,
#nav-sidebar-inner .border-b span {
  font-weight: 700 !important;
  font-size: 0.88rem !important;
  letter-spacing: -0.02em !important;
  color: var(--admin-foreground) !important;
  line-height: 1.2 !important;
}

#nav-sidebar-inner .border-b img {
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* Fill the flex child. Avoid display:contents — Firefox drops those boxes. */
#nav-sidebar-apps[data-simplebar] .simplebar-wrapper,
#nav-sidebar-apps[data-simplebar] .simplebar-mask,
#nav-sidebar-apps[data-simplebar] .simplebar-offset,
#nav-sidebar-apps[data-simplebar] .simplebar-content-wrapper {
  width: 100% !important;
  height: 100% !important;
  max-height: 100% !important;
}
#nav-sidebar-apps[data-simplebar] .simplebar-placeholder,
#nav-sidebar-apps[data-simplebar] .simplebar-track {
  display: none !important;
}

#nav-sidebar-apps .simplebar-content {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.15rem !important;
  padding: 0 !important;
  margin: 0 !important;
  min-height: min-content !important;
  height: auto !important;
  overflow: visible !important;
}


/* ── Section titles — bold + icon (powerful group headers) ─────────────── */
#nav-sidebar-apps > div:has(> h2),
#nav-sidebar-apps > .icam-nav-section,
#nav-sidebar-apps .simplebar-content > div:has(> h2),
#nav-sidebar-apps .simplebar-content > .icam-nav-section {
  position: relative !important;
  display: block !important;
  flex: 0 0 auto !important;
  width: 100% !important;
  height: auto !important;
  max-height: none !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  box-shadow: none !important;
  overflow: hidden;
  border-top: 1px solid var(--admin-border-soft, #e4efef) !important;
}
#nav-sidebar-apps > div:has(> h2):first-child,
#nav-sidebar-apps > .icam-nav-section:first-child { border-top: 0 !important; }
#nav-sidebar-apps hr, #nav-sidebar-inner hr { display: none !important; }
#nav-sidebar-apps > div:has(> h2) h2,
#nav-sidebar-apps > .icam-nav-section h2,
.icam-nav-section h2, #nav-sidebar-inner h2 {
  margin: 0 !important; padding: 0 !important; background: transparent !important; border-bottom: none !important;
}

.icam-nav-section__toggle {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  width: 100%;
  margin: 0;
  padding: 0.7rem 0.45rem 0.55rem !important;
  border: 0;
  border-radius: 0.65rem;
  background: transparent !important;
  font: inherit;
  font-size: 0.68rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  line-height: 1.25 !important;
  color: #0f172a !important;
  cursor: pointer;
  text-align: left;
}
.icam-nav-section__toggle:hover {
  background: var(--admin-accent-wash-40, #eefaf6) !important;
  color: var(--admin-primary-ink-25, #006650) !important;
}
.icam-nav-section__icon {
  flex-shrink: 0;
  width: 1.7rem !important;
  height: 1.7rem !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem !important;
  border-radius: 0.5rem;
  background: var(--admin-primary-wash-86, #d9f3eb) !important;
  color: var(--admin-primary-ink-12, #007a5d) !important;
}
.icam-nav-section__title { min-width: 0; flex: 1 1 auto; font-weight: 800 !important; color: inherit !important; }
.icam-nav-section__chevron {
  flex-shrink: 0; margin-left: auto;
  font-size: 1.1rem !important; width: 1.25rem !important; height: 1.25rem !important;
  display: inline-flex !important; align-items: center; justify-content: center;
  background: transparent !important; color: #64748b !important; transition: transform 0.2s ease;
}
.icam-nav-section--collapsed .icam-nav-section__chevron { transform: rotate(-90deg); }
#nav-sidebar-apps .icam-nav-section.icam-nav-section--collapsed > ol,
#nav-sidebar-apps .icam-nav-section.icam-nav-section--collapsed .icam-nav-section__list { display: none !important; }
.icam-nav-section__toggle::before,
#nav-sidebar-apps > div:has(> h2) h2::before,
#nav-sidebar-apps > .icam-nav-section h2::before,
.icam-nav-section h2::before { display: none !important; content: none !important; }

#nav-sidebar-apps > div:has(> h2) ol,
#nav-sidebar-apps > .icam-nav-section ol,
.icam-nav-section:not(.icam-nav-section--collapsed) > ol,
.icam-nav-section:not(.icam-nav-section--collapsed) .icam-nav-section__list {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.2rem !important;
  padding: 0.1rem 0 0.55rem 0.55rem !important;
  margin: 0 0 0 0.95rem !important;
  background: transparent !important;
  border-left: 2px solid var(--admin-primary-wash-72, #b8e8d9) !important;
}
#nav-sidebar-apps ol li { margin: 0 !important; padding: 0 !important; }

#nav-sidebar-inner a.flex.h-\[38px\],
#nav-sidebar-inner a.icam-nav-link {
  position: relative !important;
  min-height: 2.4rem !important;
  height: auto !important;
  padding: 0.4rem 0.55rem 0.4rem 1.15rem !important;
  margin: 0 !important;
  border-radius: 0.65rem !important;
  font-size: 0.84rem !important;
  font-weight: 650 !important;
  letter-spacing: -0.01em !important;
  color: #1e293b !important;
  gap: 0.5rem !important;
  border: 1px solid transparent;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
#nav-sidebar-inner a.flex.h-\[38px\]::before,
#nav-sidebar-inner a.icam-nav-link::before {
  content: "";
  position: absolute;
  left: 0.2rem;
  top: 50%;
  width: 0.38rem;
  height: 0.38rem;
  border-radius: 999px;
  transform: translateY(-50%);
  background: var(--admin-primary-wash-35, #66c4ab);
  box-shadow: 0 0 0 3px var(--admin-primary-wash-86, #d9f3eb);
}
#nav-sidebar-inner a.flex.h-\[38px\] .material-symbols-outlined {
  flex-shrink: 0;
  display: inline-flex !important;
  align-items: center; justify-content: center;
  width: 1.45rem !important; height: 1.45rem !important;
  font-size: 1.1rem !important; border-radius: 0.4rem !important;
  background: transparent !important;
  color: var(--admin-primary-ink-08, #008063) !important;
}
#nav-sidebar-inner a.flex.h-\[38px\]:hover {
  color: var(--admin-primary-ink-22, #006b54) !important;
  background: var(--admin-primary-wash-90, #e6f7f1) !important;
  transform: none;
}
#nav-sidebar-inner a.flex.h-\[38px\]:hover::before { background: var(--admin-primary); }
#nav-sidebar-inner a.flex.h-\[38px\]:hover .material-symbols-outlined {
  color: var(--admin-primary) !important; background: transparent !important;
}
#nav-sidebar-inner a.flex.h-\[38px\].active,
#nav-sidebar-inner a.flex.h-\[38px\][aria-current="page"],
html[data-icam-sidebar-active="soft_wash"] #nav-sidebar-inner a.flex.h-\[38px\].active,
html[data-icam-sidebar-active="soft_wash"] #nav-sidebar-inner a.flex.h-\[38px\][aria-current="page"] {
  background: var(--admin-primary-wash-82, #cdf0e4) !important;
  color: var(--admin-primary-ink-32, #005c48) !important;
  font-weight: 750 !important;
  border-color: var(--admin-primary-wash-55, #99d9c4) !important;
  border-left: 3px solid var(--admin-primary) !important;
  box-shadow: none !important;
}
#nav-sidebar-inner a.flex.h-\[38px\].active::before,
#nav-sidebar-inner a.flex.h-\[38px\][aria-current="page"]::before {
  background: var(--admin-primary);
  box-shadow: 0 0 0 3px var(--admin-primary-wash-75, #bfeadb);
}
#nav-sidebar-inner a.flex.h-\[38px\].active .material-symbols-outlined,
#nav-sidebar-inner a.flex.h-\[38px\][aria-current="page"] .material-symbols-outlined {
  background: transparent !important;
  color: var(--admin-primary-ink-18, #007458) !important;
}
#nav-sidebar-inner a.flex.h-\[38px\].active:link,
#nav-sidebar-inner a.flex.h-\[38px\].active:visited,
#nav-sidebar-inner a.flex.h-\[38px\][aria-current="page"]:link,
#nav-sidebar-inner a.flex.h-\[38px\][aria-current="page"]:visited {
  color: var(--admin-primary-ink-32, #005c48) !important;
}
html[data-icam-sidebar-active="solid_pill"] #nav-sidebar-inner a.flex.h-\[38px\].active,
html[data-icam-sidebar-active="solid_pill"] #nav-sidebar-inner a.flex.h-\[38px\][aria-current="page"] {
  background: var(--admin-primary) !important; color: #fff !important; border-left: 0 !important;
}
html[data-icam-sidebar-active="solid_pill"] #nav-sidebar-inner a.flex.h-\[38px\].active .material-symbols-outlined,
html[data-icam-sidebar-active="solid_pill"] #nav-sidebar-inner a.flex.h-\[38px\].active:link,
html[data-icam-sidebar-active="solid_pill"] #nav-sidebar-inner a.flex.h-\[38px\].active:visited { color: #fff !important; }
html[data-icam-sidebar-active="solid_pill"] #nav-sidebar-inner a.flex.h-\[38px\].active::before { background: #fff; box-shadow: none; }
#nav-sidebar-inner a.flex.h-\[38px\] > span:last-child { min-width: 0; flex: 1 1 auto; font-weight: inherit !important; }

html[data-icam-sidebar-layout="cards"] #nav-sidebar-apps > .icam-nav-section,
html[data-icam-sidebar-layout="cards"] #nav-sidebar-apps > div:has(> h2) {
  background: #fff !important;
  border: 1px solid var(--admin-border-soft, #e4efef) !important;
  border-radius: 0.85rem !important;
  margin-bottom: 0.35rem !important;
  box-shadow: 0 1px 2px rgba(10, 32, 54, 0.05) !important;
}

#nav-sidebar-inner .border-t,
#nav-sidebar-inner [class*="navigation_user"] {
  flex-shrink: 0; margin-top: auto !important; padding: 0.65rem 0.7rem !important;
  border: 1px solid var(--admin-border-soft, #e4efef) !important;
  border-radius: 0.85rem !important; background: #ffffff !important;
  box-shadow: 0 1px 2px rgba(10, 32, 54, 0.06) !important;
}
#nav-sidebar-inner .border-t .font-semibold,
#nav-sidebar-inner [class*="navigation_user"] .font-semibold {
  font-size: 0.8rem !important; font-weight: 700 !important; color: #0f172a !important;
}
#nav-sidebar-inner .border-t .text-xs,
#nav-sidebar-inner [class*="navigation_user"] .text-xs { font-size: 0.68rem !important; color: #64748b !important; }
#nav-sidebar-inner .border-t .rounded-full,
#nav-sidebar-inner [class*="navigation_user"] .rounded-full {
  background: var(--admin-primary-wash-82, #cdf0e4) !important;
  color: var(--admin-primary) !important; border: 0 !important; box-shadow: none !important;
}
#nav-sidebar-apps { scrollbar-width: thin; scrollbar-color: var(--admin-primary-wash-55, #99d9c4) transparent; }

.icam-nav-search { flex: 0 0 auto; margin: 0 0 0.15rem; padding: 0 0.15rem; position: relative; }
.icam-nav-search__input {
  width: 100%; height: 2.25rem; padding: 0 2.6rem 0 2.05rem;
  border: 1px solid var(--admin-border, #d3e6e6); border-radius: 0.7rem;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='7' cy='7' r='5'/%3E%3Cpath d='M11 11l3.5 3.5'/%3E%3C/svg%3E") 0.65rem 50% / 14px no-repeat, #ffffff;
  font: 600 0.8rem/1 Inter, ui-sans-serif, system-ui, sans-serif; color: #0f172a;
}
.icam-nav-search__input:focus { outline: 2px solid var(--admin-primary-wash-55, #99d9c4); outline-offset: 1px; }
.icam-nav-search__hint {
  position: absolute; right: 0.55rem; top: 50%; transform: translateY(-50%);
  font: 650 0.65rem/1 Inter, ui-sans-serif, system-ui, sans-serif; color: #64748b;
  pointer-events: none; border: 1px solid var(--admin-border, #d3e6e6);
  border-radius: 0.35rem; padding: 0.15rem 0.35rem; background: #f8fafc;
}
.icam-nav-rail-toggle,
#nav-sidebar-inner .border-b > button.icam-nav-rail-toggle,
#nav-sidebar-inner .border-b > button:not(.icam-nav-toggle-mobile),
#nav-sidebar-inner .border-b button[aria-label*="Collapse"],
#nav-sidebar-inner .border-b button[aria-label*="Expand"],
#nav-sidebar-inner .border-b button[title="Collapse sidebar"],
#nav-sidebar-inner .border-b button[title="Expand sidebar"] {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  overflow: hidden !important;
}

/* Desktop: never show any header icon/button beside the logo */
@media (min-width: 1024px) {
  #nav-sidebar-inner .border-b > .icam-nav-toggle-mobile,
  #nav-sidebar-inner .border-b > .material-symbols-outlined,
  #nav-sidebar-inner .border-b > button {
    display: none !important;
  }
}
html.icam-sidebar-rail-collapsed #nav-sidebar { width: var(--icam-sidebar-rail-width, 4.75rem) !important; min-width: var(--icam-sidebar-rail-width, 4.75rem) !important; }
html.icam-sidebar-rail-collapsed #nav-sidebar-inner { padding: 0.55rem 0.4rem !important; }
html.icam-sidebar-rail-collapsed .icam-nav-search,
html.icam-sidebar-rail-collapsed .icam-nav-section__title,
html.icam-sidebar-rail-collapsed .icam-nav-section__chevron,
html.icam-sidebar-rail-collapsed #nav-sidebar-inner a.flex.h-\[38px\] > span:last-child,
html.icam-sidebar-rail-collapsed #nav-sidebar-inner .border-b .font-semibold,
html.icam-sidebar-rail-collapsed #nav-sidebar-inner .border-b span:not(.material-symbols-outlined),
html.icam-sidebar-rail-collapsed #nav-sidebar-inner .border-t .font-semibold,
html.icam-sidebar-rail-collapsed #nav-sidebar-inner .border-t .text-xs,
html.icam-sidebar-rail-collapsed #nav-sidebar-inner [class*="navigation_user"] .font-semibold,
html.icam-sidebar-rail-collapsed #nav-sidebar-inner [class*="navigation_user"] .text-xs { display: none !important; }
html.icam-sidebar-rail-collapsed #nav-sidebar-inner a.flex.h-\[38px\] { justify-content: center !important; padding: 0.4rem !important; }
html.icam-sidebar-rail-collapsed #nav-sidebar-inner a.flex.h-\[38px\]::before { display: none; }
html.icam-sidebar-rail-collapsed .icam-nav-section__toggle { justify-content: center; padding: 0.45rem !important; font-size: 0 !important; }
html.icam-sidebar-rail-collapsed .icam-nav-section__icon { margin: 0 auto; }
html.icam-sidebar-rail-collapsed .icam-nav-section__toggle::after { content: none; }

/* =============================================================================
 * Collapse behaviour
 * - Desktop lg+ (1024px): permanent sidebar; optional icon rail from xl (1280px)
 * - Mobile/tablet: full off-canvas drawer (sidebarMobileOpen) + backdrop
 *
 * Unfold's prebuilt CSS ships xl:hidden! but NOT lg:hidden! / lg:block!.
 * Shell + toggle visibility therefore lives here (not Tailwind lg:! classes).
 * ============================================================================= */

.icam-nav-toggle-desktop,
.icam-nav-toggle-mobile {
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  line-height: 1;
  font-size: 1.25rem;
  padding: 0.35rem;
  border-radius: 0.5rem;
}
.icam-nav-toggle-desktop:hover,
.icam-nav-toggle-mobile:hover {
  background: rgba(15, 23, 42, 0.06);
}
.icam-nav-toggle-desktop:focus-visible,
.icam-nav-toggle-mobile:focus-visible {
  outline: 2px solid #0ea5e9;
  outline-offset: 2px;
}
.icam-nav-toggle-desktop {
  display: none !important;
}
.icam-nav-toggle-mobile {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
}
@media (min-width: 1024px) {
  .icam-nav-toggle-desktop {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
  }
  .icam-nav-toggle-mobile {
    display: none !important;
  }
}

/*
 * Navigation shell (wrapper around #nav-sidebar).
 * Mobile/tablet: hidden until Alpine adds .icam-nav-shell--open.
 * Desktop lg+: visible unless .icam-nav-shell--desktop-closed.
 */
.icam-nav-shell {
  display: none !important;
}
.icam-nav-shell.icam-nav-shell--open {
  display: block !important;
}
@media (min-width: 1024px) {
  .icam-nav-shell {
    display: block !important;
  }
  .icam-nav-shell.icam-nav-shell--desktop-closed {
    display: none !important;
  }
}

/*
 * Mobile drawer dimmer.
 * Unfold wraps #nav-sidebar in `.relative.z-60` (see unfold nav_sidebar.html).
 * That ancestor creates the stacking context for the fixed drawer, so this
 * backdrop MUST stay below z-60 or it covers the menu and steals clicks.
 */
.icam-nav-backdrop {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: rgba(15, 23, 42, 0.48);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}
.icam-nav-backdrop.is-open {
  opacity: 1;
  pointer-events: auto;
}

/* Icon rail only on wide desktop */
@media (min-width: 1280px) {
  html.icam-sidebar-rail-collapsed #nav-sidebar {
    width: var(--icam-sidebar-rail-width, 4.75rem) !important;
    min-width: var(--icam-sidebar-rail-width, 4.75rem) !important;
  }
}

/* Phone + tablet + small laptop (< lg / 1024px): drawer mode */
@media (max-width: 1023px) {
  /* Never show / use icon-rail mode on small screens */
  .icam-nav-rail-toggle { display: none !important; }

  html.icam-sidebar-rail-collapsed #nav-sidebar,
  html.icam-sidebar-rail-collapsed #nav-sidebar-inner,
  html.icam-sidebar-rail-collapsed .icam-nav-search,
  html.icam-sidebar-rail-collapsed .icam-nav-section__title,
  html.icam-sidebar-rail-collapsed .icam-nav-section__chevron,
  html.icam-sidebar-rail-collapsed #nav-sidebar-inner a.flex.h-\[38px\] > span:last-child,
  html.icam-sidebar-rail-collapsed #nav-sidebar-inner .border-b .font-semibold,
  html.icam-sidebar-rail-collapsed #nav-sidebar-inner .border-b span:not(.material-symbols-outlined),
  html.icam-sidebar-rail-collapsed #nav-sidebar-inner .border-t .font-semibold,
  html.icam-sidebar-rail-collapsed #nav-sidebar-inner .border-t .text-xs,
  html.icam-sidebar-rail-collapsed #nav-sidebar-inner [class*="navigation_user"] .font-semibold,
  html.icam-sidebar-rail-collapsed #nav-sidebar-inner [class*="navigation_user"] .text-xs {
    /* restore readable labels if rail class leaked from desktop session */
    display: revert;
  }
  html.icam-sidebar-rail-collapsed #nav-sidebar {
    width: min(20rem, 88vw) !important;
    min-width: min(20rem, 88vw) !important;
  }
  html.icam-sidebar-rail-collapsed #nav-sidebar-inner {
    padding: 0.85rem 0.7rem !important;
  }
  html.icam-sidebar-rail-collapsed #nav-sidebar-inner a.flex.h-\[38px\] {
    justify-content: flex-start !important;
    padding: 0.4rem 0.55rem 0.4rem 1.15rem !important;
  }
  html.icam-sidebar-rail-collapsed #nav-sidebar-inner a.flex.h-\[38px\]::before {
    display: block;
  }
  html.icam-sidebar-rail-collapsed .icam-nav-section__toggle {
    justify-content: flex-start;
    padding: 0.7rem 0.45rem 0.55rem !important;
    font-size: 0.68rem !important;
  }
  html.icam-sidebar-rail-collapsed .icam-nav-search,
  html.icam-sidebar-rail-collapsed .icam-nav-section__title,
  html.icam-sidebar-rail-collapsed .icam-nav-section__chevron,
  html.icam-sidebar-rail-collapsed #nav-sidebar-inner a.flex.h-\[38px\] > span:last-child {
    display: unset !important;
  }

  /*
   * Raise Unfold's navigation stacking context above the dimmer (z-50).
   * Raising only #nav-sidebar is not enough — it is trapped under .z-60.
   */
  .icam-nav-stack {
    z-index: 70 !important;
  }

  /* Useful drawer size when Alpine opens sidebarMobileOpen */
  #nav-sidebar {
    width: min(20rem, 88vw) !important;
    min-width: min(20rem, 88vw) !important;
    max-width: 88vw !important;
    z-index: 71 !important;
    pointer-events: auto !important;
    box-shadow: 12px 0 40px -12px rgba(15, 23, 42, 0.35) !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
  }

  #nav-sidebar-inner {
    pointer-events: auto !important;
  }
}