/* Project-specific patches on top of the DashLite theme.
   Do not edit dashlite.css / theme.css directly — they get overwritten
   on theme updates. Add fixes here instead, loaded after both. */

/* dashlite.css defines .gap-0 through .gap-5 twice: once as Bootstrap 5's
   flex/grid `gap` utility (`gap:.375rem!important`), and once as its own
   legacy spacer-div component (`height:.375rem`). Both apply, since they
   set different properties — the height rule silently collapses any
   `d-flex ... gap-N` container to a few px tall while its children still
   render at full height, making them overflow on top of whatever follows.
   Neutralize the height side-effect; the `gap` property is untouched. */
.gap-0, .gap-1, .gap-2, .gap-3, .gap-4, .gap-5 {
  height: auto;
}

/* dashlite.css expects the sidebar's scrolling to come from the (jQuery-
   style) simplebar plugin, which we never wired up - see Modal.jsx's note
   on driving everything from React state instead of jQuery plugins. Without
   it, .nk-sidebar-element's overflow:hidden just clips the nav once it's
   taller than the viewport, with no way to reach whatever's below the fold
   (e.g. Academics/Configurations once enough sections are visible). Give it
   a plain native scrollbar instead - no JS needed. */
.nk-sidebar-body {
  overflow-y: auto;
  overflow-x: hidden;
}

/* dashlite.css only right-aligns .dropdown-menu-end via Popper
   ([data-bs-popper]), which requires Bootstrap's JS - we don't run it,
   dropdowns are driven by React state instead (see Header.jsx). Without
   Popper the menu falls back to Bootstrap's default left alignment, which
   overflows past the viewport's right edge whenever the toggle button sits
   near it (e.g. the header's own user menu, top-right of every page).
   Right-align it unconditionally instead. */
.dropdown-menu-end {
  right: 0;
  left: auto;
}

/* dashlite.css's dark-mode rules don't cover .bg-gray-300 (PageHeader.jsx's
   breadcrumb/title bar) - it stays its light-mode #dbdfea !important
   regardless of theme. Give it a dark-mode-aware value of our own. */
body.dark-mode .bg-gray-300 {
  background-color: var(--ec-ground) !important;
}

/* dashlite.css's .nk-header-menu.mobile-menu (Header.jsx's off-canvas nav,
   replacing the old sidebar) ships with no backdrop of its own - that's
   normally added by the theme's jQuery. Since we drive it from React state
   instead, give tap-outside-to-close its own backdrop. */
.nk-header-menu.mobile-menu {
  z-index: 1010;
}
.nk-header-overlay {
  position: fixed;
  inset: 0;
  z-index: 1005;
  background: rgba(0, 0, 0, 0.35);
}

/* Header.jsx's brand mark (logo + "TREDEV ESTATE / Building better
   tomorrows" wordmark) - same treatment on both the logged-out public nav
   and the logged-in app header, since .logo-link/.logo-img/.logo-text are
   only ever used by Header.jsx (not shared with anything else that would
   need dashlite's bare-logo default). Hidden in the mobile slide-out brand
   row on both branches - that row is cramped and the main header brand
   already shows it. */
.logo-link {
  display: flex;
  align-items: center;
  gap: 10px;
}
.logo-img {
  max-height: 44px;
}
.logo-text {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}
.logo-text strong {
  font-size: .8rem;
  letter-spacing: .03em;
  color: var(--dt-ink);
}
.logo-text small {
  font-size: .6rem;
  letter-spacing: .03em;
  color: var(--dt-ink-ghost);
}
.nk-header-mobile .logo-text {
  display: none;
}
/* Below Bootstrap's sm breakpoint the authenticated header's top bar also
   carries the notification bell / theme toggle / avatar, all in the same
   fixed-width row as the hamburger + brand - the full wordmark plus all of
   that overflows a phone-width viewport. The public header has nothing on
   that side at this width, but hiding it there too keeps both branches
   consistent (bare logo mark only, same as it already was everywhere
   before this wordmark was added). */
@media (max-width: 575.98px) {
  .logo-text {
    display: none;
  }
}
.nk-header-public .nk-quick-nav {
  display: flex;
  align-items: center;
  gap: .5rem;
}
.nk-header-mobile-actions {
  display: flex;
  gap: .5rem;
  padding: 1rem 1.25rem;
  border-top: 1px solid var(--dt-border);
  margin-top: .5rem;
}

/* PublicFooter.jsx styling moved to design-system.css's ".dt-marketing-footer"
   section - it's a full shared component design, not a framework-level patch. */