/* Navigation v3 (docs/ARCHITECTURE.md §5): building card of the sidebar, section tabs, command palette. */

/* ---- Sidebar: building context --------------------------------------------------------------- */
#layout-menu .nav-context {
  padding: 0.25rem 1rem 0.75rem;
  flex-shrink: 0;
}

#layout-menu .nav-context-back {
  display: inline-flex;
  align-items: center;
  font-size: 0.8125rem;
  color: var(--bs-secondary-color);
  padding: 0.25rem 0.25rem 0.5rem;
  text-decoration: none;
}

#layout-menu .nav-context-back:hover {
  color: var(--bs-primary);
}

#layout-menu .nav-context-button {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  text-align: start;
  padding: 0.625rem 0.75rem;
  border-radius: 0.5rem;
  background: rgba(var(--bs-primary-rgb), 0.08);
  border: 1px solid rgba(var(--bs-primary-rgb), 0.2);
  color: var(--bs-heading-color);
}

#layout-menu .nav-context-button:hover,
#layout-menu .nav-context-button[aria-expanded="true"] {
  background: rgba(var(--bs-primary-rgb), 0.14);
}

#layout-menu .nav-context-button::after {
  margin-inline-start: auto;
}

#layout-menu .nav-context-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 0.375rem;
  background: var(--bs-primary);
  color: #fff;
}

#layout-menu .nav-context-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1 1 auto;
}

#layout-menu .nav-context-name {
  font-weight: 600;
  line-height: 1.25;
}

#layout-menu .nav-context-sub {
  font-size: 0.75rem;
  color: var(--bs-secondary-color);
  line-height: 1.25;
}

.building-switcher-menu {
  min-width: 22rem;
}

/* Collapsed sidebar (icons only): keep just the building icon */
.layout-menu-collapsed:not(.layout-menu-hover) #layout-menu .nav-context-back span,
.layout-menu-collapsed:not(.layout-menu-hover) #layout-menu .nav-context-text,
.layout-menu-collapsed:not(.layout-menu-hover) #layout-menu .nav-context-button::after {
  display: none;
}

.layout-menu-collapsed:not(.layout-menu-hover) #layout-menu .nav-context-button {
  padding: 0.25rem;
  background: transparent;
  border-color: transparent;
}

/* ---- Context line + section tabs above the page ---------------------------------------------- */
.section-nav-context {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.375rem;
  font-size: 0.8125rem;
  color: var(--bs-secondary-color);
  margin-bottom: 0.75rem;
}

.section-nav-building {
  color: var(--bs-primary);
  font-weight: 500;
  text-decoration: none;
}

.section-nav-section {
  color: var(--bs-heading-color);
  font-weight: 500;
}

.section-tabs {
  position: relative;
  flex-wrap: nowrap;
  overflow-x: auto;
  gap: 0.25rem;
  padding-bottom: 0.25rem;
  scrollbar-width: thin;
  border-bottom: 1px solid var(--bs-border-color);
}

/* Greek tab labels keep their sentence case (the template capitalizes every word) */
.nav-tabs.tabs-sentence-case .nav-link {
  text-transform: none;
}

.section-tabs .nav-link {
  white-space: nowrap;
  text-transform: none;
  text-decoration: none;
  padding: 0.5rem 0.75rem;
  border-radius: 0.375rem 0.375rem 0 0;
  color: var(--bs-body-color);
}

.section-tabs .nav-link:hover {
  color: var(--bs-primary);
  background: rgba(var(--bs-primary-rgb), 0.06);
}

.section-tabs .nav-link.active {
  color: var(--bs-primary);
  background: rgba(var(--bs-primary-rgb), 0.1);
  box-shadow: inset 0 -2px 0 var(--bs-primary);
}

/* Wide screens: long sections (Αναφορές) wrap instead of hiding tabs behind a scroll */
@media (min-width: 1200px) {
  .section-tabs {
    flex-wrap: wrap;
    overflow-x: visible;
  }
}

/* ---- Navbar: full-width command palette ------------------------------------------------------ */
/* The template gives .navbar-nav-right flex-basis:100%, which squeezed the search box to a few characters */
#layout-navbar .navbar-nav-right.nav-right-compact {
  flex: 0 0 auto;
}

#layout-navbar .nav-search {
  flex: 1 1 auto;
  min-width: 0;
}

.nav-search-box {
  position: relative;
  display: flex;
  align-items: center;
}

.nav-search-icon {
  position: absolute;
  inset-inline-start: 0.75rem;
  pointer-events: none;
}

.nav-search-input.form-control {
  padding-inline-start: 2.5rem;
  padding-inline-end: 4.5rem;
  background-color: var(--bs-body-bg);
  border-color: transparent;
}

.nav-search-input.form-control:focus {
  border-color: var(--bs-primary);
}

.nav-search-kbd {
  position: absolute;
  inset-inline-end: 0.625rem;
  font-size: 0.6875rem;
  background: var(--bs-paper-bg, #fff);
  color: var(--bs-secondary-color);
  border: 1px solid var(--bs-border-color);
  box-shadow: none;
  pointer-events: none;
}

/* The shortcut hint gives way to what the user types (and the browser's clear button) */
.nav-search-input:focus ~ .nav-search-kbd,
.nav-search-input:not(:placeholder-shown) ~ .nav-search-kbd {
  display: none !important;
}

.nav-search-input.form-control:focus,
.nav-search-input.form-control:not(:placeholder-shown) {
  padding-inline-end: 0.75rem;
}

.nav-search-results {
  position: absolute;
  top: calc(100% + 0.375rem);
  inset-inline: 0;
  max-height: 26rem;
  overflow-y: auto;
  margin: 0;
}

.nav-search-item {
  display: flex !important;
  align-items: center;
}

.nav-search-item-text {
  min-width: 0;
  flex: 1 1 auto;
}

@media (max-width: 767.98px) {
  .nav-search-input.form-control {
    padding-inline-end: 0.75rem;
  }
}

/* Upsell chip («Company») next to a locked feature (billding-api.js applyEntitlements). In tab lists the chip sits
   inline inside its own tab instead of overflowing onto the neighbouring one. */
.nav-item.billding-upsell {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  white-space: nowrap;
}
.nav-item.billding-upsell > .nav-link { opacity: .6; }
.nav-item.billding-upsell > .nav-link:disabled { cursor: not-allowed; }
.billding-upsell-chip {
  flex: none;
  position: static;
  margin-left: .25rem !important;
  margin-right: .75rem;
  padding: .25rem .5rem;
  font-size: .6875rem;
  line-height: 1;
  cursor: pointer;
}

/* Collapsed sidebar (xl and up): the brand row shows only the centred logo mark. The expand/collapse toggle is a round button
   that sits on the sidebar edge and was cut in half by the narrow sidebar; it is hidden here and appears (whole) once the
   sidebar expands on hover, where it can be clicked to pin it open. */
@media (min-width: 1200px) {
  .layout-menu-collapsed:not(.layout-menu-hover) #layout-menu .app-brand {
    justify-content: center;
    padding-inline: 0;
  }

  .layout-menu-collapsed:not(.layout-menu-hover) #layout-menu .app-brand .layout-menu-toggle {
    display: none;
  }

  .layout-menu-collapsed:not(.layout-menu-hover) #layout-menu .app-brand-link {
    margin: 0;
  }
}