/* app.css — project-specific overrides */

.announcement-banner {
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.announcement-banner--pinned {
  border-bottom-width: 3px !important;
  box-shadow: inset 0 -3px 0 rgba(241, 196, 15, 0.55);
}

.announcement-pin-badge {
  letter-spacing: 0.02em;
  font-weight: 700;
}

.announcement-message-label {
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.htmx-indicator {
  display: none;
}

.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator {
  display: inline-block;
}

.delete-confirm-fallback {
  max-width: 18rem;
}

html.delete-confirm-modal-ready .delete-confirm-fallback {
  display: none;
}

@media (min-width: 768px) {
  #navbar-menu .container-xl {
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }

  #navbar-menu .container-xl::-webkit-scrollbar {
    height: 0.4rem;
  }

  #navbar-menu .container-xl::-webkit-scrollbar-thumb {
    background: rgba(98, 105, 118, 0.35);
    border-radius: 999px;
  }

  #navbar-menu .navbar-nav {
    flex-wrap: nowrap;
    min-width: max-content;
  }

  .navbar-expand-md .navbar-nav > .nav-item {
    flex: 0 0 auto;
  }

  .navbar-expand-md .navbar-nav > .nav-item.active::after {
    display: none;
  }

  .navbar-expand-md .navbar-nav > .nav-item > .nav-link {
    width: auto;
  }

  .navbar-expand-md .navbar-nav > .nav-item > .nav-link,
  .navbar-expand-md .navbar-nav > .nav-item > .dropdown-menu .dropdown-item {
    white-space: nowrap;
  }

  .navbar-expand-md .navbar-nav > .nav-item.active > .nav-link {
    border-radius: 0;
    box-shadow: inset 0 -2px 0 var(--tblr-navbar-active-border-color);
  }

  .navbar-expand-md .dropdown-menu {
    max-height: min(70vh, 30rem);
    overflow-y: auto;
  }
}
.kb-article-body h1,
.kb-article-body h2,
.kb-article-body h3 {
  margin-top: 1.25rem;
  margin-bottom: 0.75rem;
}

.kb-article-body p,
.kb-article-body ul {
  margin-bottom: 1rem;
}

.kb-article-body code {
  background: rgba(98, 105, 118, 0.12);
  border-radius: 0.25rem;
  padding: 0.1rem 0.35rem;
}

.auth-signin {
  min-height: 100vh;
}

.auth-signin__brand {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.auth-signin__brand-logo {
  width: min(100%, 21rem);
  height: auto;
}

.auth-signin__eyebrow {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-align: center;
  color: #0d4ea6;
}

.auth-signin__cover {
  background-color: #ffffff;
  background-image: url("../img/dict-logo.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 60%;
}

.auth-loader {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background: rgba(9, 16, 33, 0.52);
  backdrop-filter: blur(6px);
}

.auth-loader.is-active {
  display: flex;
}

.auth-loader__dialog {
  width: min(100%, 22rem);
  padding: 1.5rem;
  border-radius: 1rem;
  background: #fff;
  box-shadow: 0 1.5rem 3rem rgba(9, 16, 33, 0.2);
  text-align: center;
}

.auth-loader__logo {
  width: min(100%, 12rem);
  height: auto;
  margin-bottom: 1rem;
}

.page-loader {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background: rgba(9, 16, 33, 0.52);
  backdrop-filter: blur(6px);
}

.page-loader.is-active {
  display: flex;
}

.page-loader__dialog {
  width: min(100%, 24rem);
  padding: 1.5rem;
  border-radius: 1rem;
  background: #fff;
  box-shadow: 0 1.5rem 3rem rgba(9, 16, 33, 0.2);
  text-align: center;
}

.page-loader__logo {
  width: min(100%, 12rem);
  height: auto;
  margin-bottom: 1rem;
}

@media (max-width: 991.98px) {
  .auth-signin {
    background:
      radial-gradient(circle at top left, rgba(13, 110, 253, 0.08), transparent 30%),
      linear-gradient(135deg, #f6f9fc 0%, #eef3f9 45%, #fefefe 100%);
  }

  .auth-signin__brand-logo {
    width: min(100%, 18rem);
  }
}

@media (min-width: 992px) {
  .auth-signin__cover {
    min-height: 100vh;
  }
}

.badge-notification {
  color: #fff !important;
  font-weight: 700;
  line-height: 1;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.18);
}

/* ── Sidebar collapse toggle ──────────────────────────────────────────── */
@media (min-width: 992px) {
  aside.navbar.navbar-vertical {
    transition: width 0.25s ease;
  }
  .page-wrapper {
    transition: margin-left 0.25s ease;
  }

  body.sidebar-collapsed aside.navbar.navbar-vertical.navbar-expand-lg {
    width: 3.5rem;
    overflow-x: hidden;
  }
  body.sidebar-collapsed aside.navbar.navbar-vertical.navbar-expand-lg ~ .page-wrapper {
    margin-left: 3.5rem;
  }

  /* Hide text, badges, and brand in collapsed mode */
  body.sidebar-collapsed .navbar-vertical .navbar-brand-autodark,
  body.sidebar-collapsed .navbar-vertical .nav-link-title,
  body.sidebar-collapsed .navbar-vertical .badge,
  body.sidebar-collapsed .navbar-vertical .dropdown-toggle::after {
    display: none !important;
  }

  /* Center icons */
  body.sidebar-collapsed .navbar-vertical .nav-link {
    justify-content: center;
    padding-left: 0;
    padding-right: 0;
  }
  body.sidebar-collapsed .navbar-vertical .nav-link-icon {
    display: inline-flex !important;
    margin-right: 0 !important;
  }

  /* Hide mobile-only bottom nav items when sidebar is narrow */
  body.sidebar-collapsed .navbar-vertical ul.border-top {
    display: none !important;
  }
}

/* Toggle button icon flips when sidebar is collapsed */
#sidebar-toggle-btn svg {
  transition: transform 0.25s ease;
}
body.sidebar-collapsed #sidebar-toggle-btn svg {
  transform: scaleX(-1);
}