:root {
  /*
   * ActiveAdmin v4 (Tailwind v4) uses `--spacing` as the base unit for most
   * layout spacing utilities. Reducing it is an easy way to make the UI denser
   * without having to override individual utility classes.
   */
  --spacing: 0.2rem;
}

body > div.fixed.top-0.h-16.w-full {
  z-index: 260 !important;
  border-bottom: 3px solid #216869 !important;
}

#user-menu {
  z-index: 280 !important;
}

/* Push mobile drawer content below the fixed top bar */
#main-menu {
  padding-top: calc(var(--spacing) * 16 + 0.5rem);
}

/*
 * ActiveAdmin v4 ships with a left-side main menu. We keep the stock partial
 * and restyle it as a top bar so upgrades stay low-friction.
 */
@media (min-width: 1280px) {
  body > .xl\:ms-60.pt-16 {
    margin-inline-start: 0 !important;
    padding-top: calc(var(--spacing) * 16);
  }

  #main-menu {
    position: relative;
    top: auto;
    bottom: auto;
    z-index: 200;
    width: 100%;
    max-width: none;
    padding: 0.35rem 0.75rem;
    transform: none !important;
    translate: 0 !important;
    overflow: visible;
    background: rgb(255 255 255);
    border-inline-end: 0;
    border-bottom: 1px solid rgb(229 231 235);
  }

  .dark #main-menu {
    background: rgb(3 7 18);
    border-bottom-color: rgb(255 255 255 / 0.1);
  }

  #main-menu > ul {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 0.35rem;
    flex-wrap: wrap;
    overflow: visible;
    white-space: normal;
  }

  #main-menu > ul > li {
    position: relative;
    flex-shrink: 0;
  }

  #main-menu > ul > li > a,
  #main-menu > ul > li > button,
  #main-menu > ul > li > div > a,
  #main-menu > ul > li > div > button {
    min-height: 2rem;
    line-height: 1.1;
    display: flex;
    align-items: center;
  }

  #main-menu > ul > li > a:hover,
  #main-menu > ul > li > button:hover,
  #main-menu > ul > li > div > a:hover,
  #main-menu > ul > li > div > button:hover {
    background: rgb(243 244 246);
    color: rgb(17 24 39);
  }

  .dark #main-menu > ul > li > a:hover,
  .dark #main-menu > ul > li > button:hover,
  .dark #main-menu > ul > li > div > a:hover,
  .dark #main-menu > ul > li > div > button:hover {
    background: rgb(255 255 255 / 0.08);
    color: rgb(255 255 255);
  }

  #main-menu > ul > li[data-open] > a,
  #main-menu > ul > li[data-open] > button,
  #main-menu > ul > li[data-open] > div > a,
  #main-menu > ul > li[data-open] > div > button {
    background: rgb(243 244 246);
    color: rgb(17 24 39);
  }

  .dark #main-menu > ul > li[data-open] > a,
  .dark #main-menu > ul > li[data-open] > button,
  .dark #main-menu > ul > li[data-open] > div > a,
  .dark #main-menu > ul > li[data-open] > div > button {
    background: rgb(255 255 255 / 0.08);
    color: rgb(255 255 255);
  }

  #main-menu > ul > li > ul {
    position: absolute;
    top: 100%;
    inset-inline-start: 0;
    min-width: 14rem;
    max-height: min(60vh, 24rem);
    overflow-y: auto;
    margin-top: 0;
    margin-inline-start: 0;
    padding: 0.35rem;
    border-inline-start: 0;
    border: 1px solid rgb(229 231 235);
    border-radius: 0.5rem;
    background: rgb(255 255 255);
    box-shadow: 0 10px 25px -10px rgb(17 24 39 / 0.35);
    z-index: 220;
    display: none !important;
  }

  .dark #main-menu > ul > li > ul {
    border-color: rgb(255 255 255 / 0.1);
    background: rgb(3 7 18);
  }

  #main-menu > ul > li > ul a:hover {
    background: rgb(243 244 246);
    color: rgb(17 24 39);
  }

  .dark #main-menu > ul > li > ul a:hover {
    background: rgb(255 255 255 / 0.08);
    color: rgb(255 255 255);
  }

  #main-menu > ul > li:hover > ul,
  #main-menu > ul > li:focus-within > ul {
    display: block !important;
  }

  [data-drawer-target='main-menu'] {
    display: none;
  }
}

.compact-change-item {
  font-size: 0.75rem;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 30rem;
  color: rgb(75 85 99);
}

.dark .compact-change-item {
  color: rgb(156 163 175);
}