/*
 * Navigation interaction styles kept as a small companion file so the
 * shared chrome can be deployed independently of a Tailwind rebuild.
 * The same rules live in input.css and are folded into output.css on the
 * next normal `make tailwind-build` run.
 */
.header-desktop {
  display: none;
  position: sticky;
  top: 0;
  z-index: 20;
  border-bottom: 1px solid rgb(230 235 243);
  background-color: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(8px);
}

@media (min-width: 1024px) {
  .header-desktop { display: block; }
}

.header-desktop .section__content--p30 { padding: 0; }
.header-wrap { display: flex; min-height: 4.75rem; align-items: center; justify-content: space-between; padding: 0 1.5rem; }
.header-context { display: flex; flex-direction: column; line-height: 1.25; }
.header-context__eyebrow { color: rgb(29 94 216); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; }
.header-context__title { margin-top: 0.125rem; color: rgb(19 33 58); font-size: 1rem; font-weight: 600; }
.header-button { gap: 0.75rem; }
.account-item, .noti__item { border: 0; border-radius: 0.5rem; background: transparent; padding: 0.375rem 0.5rem; transition: background-color 150ms; }
.account-item:hover, .noti__item:hover { background-color: rgb(234 241 255); }
.account-item:focus-visible, .noti__item:focus-visible { outline: 2px solid rgb(29 94 216); outline-offset: 2px; }
.show-dropdown + .account-dropdown, .show-dropdown + .notifi-dropdown { display: block; }

/* Notifications dropdown */
.noti__item { position: relative; }
.notifi-dropdown {
  width: 20rem;
  overflow: hidden;
  padding: 0;
  box-shadow: 0 18px 40px rgba(13, 37, 80, 0.16);
}
.notifi-dropdown__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.875rem 1rem;
  border-bottom: 1px solid rgb(230 235 243);
  background: rgba(234, 241, 255, 0.5);
}
.notifi-dropdown__title {
  margin: 0;
  color: rgb(19 33 58);
  font-size: 0.875rem;
  font-weight: 600;
}
.notifi-dropdown__subtitle {
  margin: 0.125rem 0 0;
  color: rgb(96 112 139);
  font-size: 0.75rem;
}
.notifi-dropdown__count {
  display: inline-flex;
  min-width: 1.5rem;
  align-items: center;
  justify-content: center;
  padding: 0.125rem 0.375rem;
  border-radius: 0.375rem;
  background: rgb(29 94 216);
  color: white;
  font-size: 0.6875rem;
  font-weight: 600;
}
.notifi-dropdown__list {
  max-height: 20rem;
  padding: 0.5rem;
  overflow-y: auto;
}
.notifi-dropdown__list > * + * { margin-top: 0.25rem; }
.notifi-dropdown__item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.625rem;
  border-radius: 0.5rem;
  color: rgb(19 33 58);
  text-decoration: none;
  transition: background-color 150ms;
}
.notifi-dropdown__item:hover { background: rgb(234 241 255); }
.notifi-dropdown__icon {
  display: inline-flex;
  width: 2.5rem;
  height: 2.5rem;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: 0.75rem;
  color: white;
  font-size: 0.875rem;
  box-shadow: 0 1px 2px rgba(13, 37, 80, 0.12);
}
.notifi-dropdown__icon.bg-c1 { background: rgb(29 94 216); }
.notifi-dropdown__icon.bg-c2 { background: rgb(13 37 80); }
.notifi-dropdown__content { min-width: 0; flex: 1; }
.notifi-dropdown__text {
  display: block;
  color: rgb(19 33 58);
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.35;
}
.notifi-dropdown__date {
  display: block;
  margin-top: 0.25rem;
  color: rgb(96 112 139);
  font-size: 0.75rem;
}
.notifi-dropdown__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 2rem 1rem;
  text-align: center;
}
.notifi-dropdown__empty-icon {
  display: inline-flex;
  width: 2.75rem;
  height: 2.75rem;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.75rem;
  border-radius: 0.75rem;
  background: rgb(234 241 255);
  color: rgb(29 94 216);
  font-size: 1.125rem;
}
.notifi-dropdown__empty-title {
  margin: 0;
  color: rgb(19 33 58);
  font-size: 0.875rem;
  font-weight: 500;
}
.notifi-dropdown__empty-copy {
  margin: 0.25rem 0 0;
  color: rgb(96 112 139);
  font-size: 0.75rem;
}

.account-item .image img {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 9999px;
  object-fit: cover;
  box-shadow: 0 0 0 2px rgb(234 241 255);
}
.account-item__chevron { color: rgb(96 112 139); transition: transform 150ms; }
.show-dropdown .account-item__chevron { transform: rotate(180deg); }

/* Account dropdown — styled to match navy sidebar chrome */
.account-dropdown {
  width: 20rem;
  overflow: hidden;
  padding: 0;
  box-shadow: 0 18px 40px rgba(13, 37, 80, 0.16);
}
.account-dropdown__hero {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem;
  color: white;
  background-image: linear-gradient(145deg, #12346e 0%, #0d2550 48%, #091b3c 100%);
}
.account-dropdown__avatar {
  flex-shrink: 0;
  padding: 2px;
  border-radius: 9999px;
  background: white;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
}
.account-dropdown__avatar img {
  display: block;
  width: 3rem;
  height: 3rem;
  border-radius: 9999px;
  object-fit: cover;
}
.account-dropdown__meta { min-width: 0; }
.account-dropdown__name {
  margin: 0;
  overflow: hidden;
  color: white;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.account-dropdown__email {
  margin: 0.125rem 0 0;
  overflow: hidden;
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.75rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.account-dropdown__role {
  display: inline-flex;
  align-items: center;
  margin-top: 0.5rem;
  padding: 0.125rem 0.5rem;
  border-radius: 0.375rem;
  background: rgba(255, 255, 255, 0.15);
  color: white;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.account-dropdown__body {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.5rem;
}
.account-dropdown__footer {
  padding: 0.5rem;
  border-top: 1px solid rgb(230 235 243);
  background: rgba(234, 241, 255, 0.4);
}
.account-dropdown__link {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.625rem 0.625rem;
  border-radius: 0.5rem;
  color: rgb(19 33 58);
  text-decoration: none;
  transition: background-color 150ms, color 150ms;
}
.account-dropdown__link:hover { background: rgb(234 241 255); }
.account-dropdown__link--logout:hover { background: rgb(254 242 242); }
.account-dropdown__icon {
  display: inline-flex;
  width: 2.25rem;
  height: 2.25rem;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: 0.5rem;
  background: rgb(234 241 255);
  color: rgb(29 94 216);
  font-size: 1rem;
}
.account-dropdown__link--logout .account-dropdown__icon {
  background: rgb(254 242 242);
  color: rgb(220 38 38);
}
.account-dropdown__label {
  display: flex;
  min-width: 0;
  flex-direction: column;
}
.account-dropdown__label-title {
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.25;
}
.account-dropdown__label-hint {
  margin-top: 0.125rem;
  color: rgb(96 112 139);
  font-size: 0.75rem;
}
.account-dropdown__link--logout:hover .account-dropdown__label-title {
  color: rgb(185 28 28);
}
.navbar-sidebar .js-arrow::after, .navbar-mobile__list .js-arrow::after { content: ""; margin-left: auto; width: 0.375rem; height: 0.375rem; transform: rotate(45deg); border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transition: transform 150ms; }
.navbar-sidebar .js-arrow.open::after, .navbar-mobile__list .js-arrow.open::after { transform: rotate(-135deg); }
.header-mobile .logo img { width: 3rem; height: 3rem; padding: 0.25rem; object-fit: contain; border-radius: 0.75rem; background: white; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15); }

/* Sidebar depth and hierarchy */
.menu-sidebar { background-image: linear-gradient(160deg, #12346e 0%, #0d2550 48%, #091b3c 100%); box-shadow: 10px 0 28px rgba(13, 37, 80, 0.12); transition: width 200ms ease; }
.menu-sidebar .logo { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; min-height: 6.5rem; padding: 0 1.25rem; border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
.menu-sidebar .logo a { display: flex; min-width: 0; align-items: center; gap: 0.75rem; color: white; }
.menu-sidebar .logo a::after { content: "TREASURY"; font-size: 0.875rem; font-weight: 600; letter-spacing: 0.16em; }
.menu-sidebar .logo img { width: 2.5rem; height: 2.5rem; flex-shrink: 0; padding: 0.25rem; object-fit: contain; border-radius: 0.75rem; background: white; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15); }
.sidebar-toggle { display: inline-flex; width: 2.25rem; height: 2.25rem; flex-shrink: 0; align-items: center; justify-content: center; border: 0; border-radius: 0.5rem; background: rgba(255, 255, 255, 0.1); color: white; cursor: pointer; transition: background-color 150ms; }
.sidebar-toggle:hover { background: rgba(255, 255, 255, 0.2); }
.menu-sidebar__content { padding-top: 1.25rem; }
.navbar-sidebar .navbar__list > li > a, .navbar-sidebar .navbar__list .js-arrow { border: 1px solid transparent; }
.navbar-sidebar .navbar__list > li > a:hover, .navbar-sidebar .navbar__list .js-arrow:hover { border-color: rgba(255, 255, 255, 0.1); background: rgba(255, 255, 255, 0.1); box-shadow: 0 2px 5px rgba(0, 0, 0, 0.12); transform: translateX(2px); }
.navbar-sidebar .navbar__list > li > a > i, .navbar-sidebar .navbar__list .js-arrow > i { display: inline-flex; width: 2rem; height: 2rem; align-items: center; justify-content: center; border-radius: 0.5rem; background: rgba(255, 255, 255, 0.1); color: rgba(255, 255, 255, 0.9); font-size: 0.875rem; }
.navbar-sidebar .navbar__sub-list { margin-top: 0.25rem; margin-left: 1rem; border-left: 1px solid rgba(255, 255, 255, 0.1); }
.navbar-sidebar .js-arrow.open { border-color: rgba(255, 255, 255, 0.1); background: rgba(255, 255, 255, 0.1); box-shadow: 0 2px 5px rgba(0, 0, 0, 0.12); }

/* Collapsed desktop rail — body.sidebar-collapsed from localStorage */
@media (min-width: 1024px) {
  body.sidebar-collapsed .menu-sidebar { width: 5.5rem; }
  body.sidebar-collapsed .menu-sidebar .logo { flex-direction: column; justify-content: center; min-height: auto; padding: 1rem 0.5rem; }
  body.sidebar-collapsed .menu-sidebar .logo a::after { display: none; }
  body.sidebar-collapsed .navbar-sidebar .navbar__list > li > a,
  body.sidebar-collapsed .navbar-sidebar .navbar__list .js-arrow {
    justify-content: center;
    gap: 0;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    font-size: 0;
    transform: none;
  }
  body.sidebar-collapsed .navbar-sidebar .navbar__list > li > a > i,
  body.sidebar-collapsed .navbar-sidebar .navbar__list .js-arrow > i { font-size: 0.875rem; }
  body.sidebar-collapsed .navbar-sidebar .js-arrow::after { display: none; }
  body.sidebar-collapsed .navbar-sidebar .navbar__sub-list { display: none !important; }
  body.sidebar-collapsed .menu-sidebar__content { padding-left: 0.5rem; padding-right: 0.5rem; }

  /* Top-level label tip: fixed + --tip-* from main.js (avoids overflow clip).
     ::before — ::after is the submenu chevron. */
  body.sidebar-collapsed .navbar-sidebar .navbar__list > li > a[data-label]::before,
  body.sidebar-collapsed .navbar-sidebar .navbar__list .js-arrow[data-label]::before {
    content: attr(data-label);
    position: fixed;
    top: var(--tip-top, 0);
    left: var(--tip-left, 0);
    z-index: 60;
    padding: 0.375rem 0.625rem;
    border-radius: 0.375rem;
    background: #13213a;
    color: #fff;
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: 0.01em;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-50%);
    box-shadow: 0 10px 24px rgba(13, 37, 80, 0.28);
    transition: opacity 120ms ease, visibility 120ms ease;
  }
  body.sidebar-collapsed .navbar-sidebar .navbar__list > li > a[data-label]:hover::before,
  body.sidebar-collapsed .navbar-sidebar .navbar__list .js-arrow[data-label]:hover::before {
    opacity: 1;
    visibility: visible;
  }
}

/* Mobile navigation drawer */
.navbar-mobile { display: block !important; position: fixed; inset: 0 auto 0 0; z-index: 50; width: min(20rem, 88vw); overflow-y: auto; padding: 6rem 0.75rem 1.5rem; transform: translateX(-100%); background: #0d2550 linear-gradient(160deg, #12346e 0%, #0d2550 48%, #091b3c 100%); box-shadow: 1rem 0 2rem rgba(9, 27, 60, 0.28); transition: transform 300ms ease-out; }
.navbar-mobile::before { content: "TREASURY"; position: absolute; top: 2rem; left: 1.5rem; color: white; font-size: 0.875rem; font-weight: 600; letter-spacing: 0.16em; }
body.mobile-nav-open { overflow: hidden; }
body.mobile-nav-open .header-mobile { z-index: 50; }
body.mobile-nav-open .navbar-mobile { transform: translateX(0); }
body.mobile-nav-open::after { content: ""; position: fixed; inset: 0; z-index: 40; background: rgba(2, 6, 23, 0.5); }