/* Please see documentation at https://learn.microsoft.com/aspnet/core/client-side/bundling-and-minification
for details on configuring this project to bundle and minify static web assets. */

a.navbar-brand {
  white-space: normal;
  text-align: center;
  word-break: break-all;
}

/* Brand-accent everywhere a "primary" color is needed — these used to be the untouched ASP.NET
   scaffold defaults (a mismatched #1b6ec2/#0077cc blue that never matched --brand-accent used
   throughout the sidebar/header/badges, and had no dark-mode consideration at all). */
a {
  color: var(--brand-accent, #3B82F6);
}

.btn-primary {
  color: #fff;
  background-color: var(--brand-accent, #3B82F6);
  border-color: var(--brand-accent, #3B82F6);
}

.btn-primary:hover,
.btn-primary:focus {
  background-color: #2b6fd8;
  border-color: #2b6fd8;
}

.btn-primary:active {
  background-color: #2360bd !important;
  border-color: #2360bd !important;
}

.btn-check:checked + .btn-primary,
.btn-primary:not(:disabled):not(.disabled):active {
  background-color: #2360bd;
  border-color: #2360bd;
}

.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
  color: #fff;
  background-color: var(--brand-accent, #3B82F6);
  border-color: var(--brand-accent, #3B82F6);
}

.border-top {
  border-top: 1px solid var(--bs-border-color, #e5e5e5);
}
.border-bottom {
  border-bottom: 1px solid var(--bs-border-color, #e5e5e5);
}

.box-shadow {
  box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05);
}

button.accept-policy {
  font-size: 1rem;
  line-height: inherit;
}

.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  white-space: nowrap;
  line-height: 60px;
}

/* ---------- App shell ---------- */

:root {
  --sidebar-width: 220px;
  --brand-accent: #3B82F6;
  --header-height: 64px;

  --sidebar-bg: #ffffff;
  --sidebar-bg-active: rgba(59, 130, 246, .1);
  --sidebar-hover-bg: rgba(15, 23, 42, .035);
  --sidebar-text: #4b5563;
  --sidebar-text-hover: #111827;
  --sidebar-border: rgba(15, 23, 42, .08);
  --app-bg: #f4f5f9;
}

[data-bs-theme="dark"] {
  --sidebar-bg: #161b22;
  --sidebar-bg-active: rgba(59, 130, 246, .18);
  --sidebar-hover-bg: rgba(255, 255, 255, .05);
  --sidebar-text: #9ca3af;
  --sidebar-text-hover: #e5e7eb;
  --sidebar-border: rgba(255, 255, 255, .08);
  --app-bg: #0d1117;
}

[data-bs-theme="dark"] .app-brand-text {
  color: var(--bs-body-color);
}

[data-bs-theme="dark"] .form-loading-overlay {
  background-color: rgba(13, 17, 23, .75);
}

[data-bs-theme="dark"] .app-pill-btn-help {
  background-color: rgba(124, 92, 252, .18);
  color: #b9a4ff;
}

[data-bs-theme="dark"] .app-pill-btn-help:hover {
  background-color: rgba(124, 92, 252, .28);
  color: #c9baff;
}

[data-bs-theme="dark"] .app-pill-btn-updates {
  background-color: rgba(59, 130, 246, .18);
  color: #93c5fd;
}

[data-bs-theme="dark"] .app-pill-btn-updates:hover {
  background-color: rgba(59, 130, 246, .28);
}

[data-bs-theme="dark"] .app-impersonation-badge {
  background: #92660b;
  color: #fef3c7;
}

[data-bs-theme="dark"] .sidebar-backdrop {
  background-color: rgba(0, 0, 0, .6);
}

body {
  margin: 0;
  background-color: var(--app-bg);
}

.app-impersonation-badge {
  background: #f59e0b;
  color: #1f2937;
  font-size: .8rem;
  font-weight: 600;
  padding: .3rem .6rem;
  border-radius: .5rem;
  margin-right: .5rem;
}

.app-impersonation-badge form {
  margin: 0;
}

.card {
  border: 1px solid var(--bs-border-color);
  border-radius: .75rem;
  box-shadow: 0 1px 3px rgba(15, 23, 42, .05);
}

.app-wrapper {
  display: flex;
  min-height: calc(100vh - var(--header-height));
}

/* ---------- Sidebar ---------- */

.app-sidebar {
  width: var(--sidebar-width);
  flex-shrink: 0;
  background-color: var(--sidebar-bg);
  color: var(--sidebar-text);
  border-right: 1px solid var(--sidebar-border);
  position: sticky;
  top: var(--header-height);
  height: calc(100vh - var(--header-height));
  overflow-y: auto;
  z-index: 1030;
}

.sidebar-nav {
  padding: .75rem 0;
}

.sidebar-nav .nav-link,
.sidebar-group-toggle {
  display: flex;
  align-items: center;
  gap: .75rem;
  width: 100%;
  padding: .6rem 1.25rem;
  color: var(--sidebar-text);
  font-weight: 500;
  font-size: .875rem;
  border-left: 3px solid transparent;
  transition: background-color .15s ease, color .15s ease, transform .15s ease;
}

.sidebar-group-toggle {
  background: none;
  border-top: none;
  border-right: none;
  border-bottom: none;
  border-left: 3px solid transparent;
  text-align: left;
  font: inherit;
  cursor: pointer;
}

.nav-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  flex-shrink: 0;
  font-size: .95rem;
  line-height: 1;
  opacity: .85;
  transition: transform .2s ease;
}

.nav-label {
  flex: 1 1 auto;
  text-align: left;
}

.chevron {
  flex-shrink: 0;
  font-size: .7rem;
  line-height: 1;
  opacity: .5;
  transition: transform .15s ease;
}

.sidebar-group-toggle[aria-expanded="true"] .chevron {
  transform: rotate(180deg);
}

.sidebar-nav .nav-link:hover,
.sidebar-group-toggle:hover,
.nav-link-sub:hover {
  color: var(--sidebar-text-hover);
  background-color: var(--sidebar-hover-bg);
  transform: translateX(3px);
}

.sidebar-nav .nav-link:hover .nav-icon,
.sidebar-group-toggle:hover .nav-icon {
  transform: scale(1.15);
}

.sidebar-nav .nav-link.active,
.sidebar-group-toggle.active {
  color: var(--brand-accent);
  background-color: var(--sidebar-bg-active);
  border-left-color: var(--brand-accent);
  font-weight: 600;
}

.sidebar-subnav {
  padding: .15rem 0 .4rem;
}

.nav-link-sub {
  display: block;
  padding: .5rem 1.25rem .5rem 2.75rem;
  font-size: .825rem;
  color: var(--sidebar-text);
  border-left: 3px solid transparent;
  transition: background-color .15s ease, color .15s ease, transform .15s ease;
}

.nav-link-sub.active {
  color: var(--brand-accent);
  background-color: var(--sidebar-bg-active);
  border-left-color: var(--brand-accent);
  font-weight: 600;
}

.sidebar-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background-color: rgba(0, 0, 0, .45);
  z-index: 1035;
}

/* ---------- Content ---------- */

.app-content {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

/* ---------- Header ---------- */

.app-header {
  display: flex;
  align-items: center;
  gap: .9rem;
  height: var(--header-height);
  padding: 0 1.25rem;
  background-color: var(--bs-body-bg);
  border-bottom: 1px solid var(--bs-border-color);
  position: sticky;
  top: 0;
  z-index: 1040;
}

.sidebar-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--bs-border-color);
  border-radius: .5rem;
  background-color: var(--bs-body-bg);
  color: var(--bs-body-color);
  flex-shrink: 0;
}

.sidebar-toggle:hover {
  background-color: var(--bs-tertiary-bg);
}

.app-brand {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  flex-shrink: 0;
  text-decoration: none;
}

.app-brand-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: .5rem;
  background: var(--brand-accent);
  color: #fff;
  font-size: .95rem;
}

.app-brand-text {
  color: #111827;
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: .01em;
}

.app-header-search {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  max-width: 640px;
}

.app-header-search-icon {
  position: absolute;
  top: 50%;
  left: .9rem;
  transform: translateY(-50%);
  color: var(--bs-secondary-color);
  font-size: .85rem;
  pointer-events: none;
}

.app-header-search-input {
  padding-left: 2.3rem;
  background-color: var(--bs-tertiary-bg);
  border-color: transparent;
}

.app-header-search-input:focus {
  background-color: var(--bs-body-bg);
}

.app-scan-btn {
  flex-shrink: 0;
  white-space: nowrap;
  display: none;
  align-items: center;
  gap: .4rem;
  font-weight: 500;
}

.app-header-right {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-shrink: 0;
  margin-left: auto;
}

.app-lab-selector {
  border: 1px solid var(--bs-border-color);
  background-color: var(--bs-body-bg);
  font-size: .85rem;
  font-weight: 500;
  padding: .375rem .75rem;
  border-radius: var(--bs-border-radius, .375rem);
}

.app-user-toggle {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  border: none;
  background: none;
  padding: .25rem .4rem .25rem .25rem;
}

.app-user-toggle:hover {
  background-color: var(--bs-tertiary-bg);
  border-radius: 2rem;
}

.user-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: var(--brand-accent);
  color: #fff;
  font-size: .75rem;
  font-weight: 700;
  flex-shrink: 0;
}

.user-name {
  font-size: .85rem;
  font-weight: 600;
  color: var(--bs-body-color);
}

.app-pill-btn {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  border: none;
  border-radius: 2rem;
  padding: .4rem .9rem;
  font-size: .8rem;
  font-weight: 600;
  white-space: nowrap;
}

.app-pill-btn-help {
  background-color: #f3effe;
  color: #7c5cfc;
}

.app-pill-btn-help:hover {
  background-color: #ece5fd;
  color: #6d47fb;
}

.app-pill-btn-updates {
  background-color: #eaf2ff;
  color: var(--brand-accent);
}

.app-pill-btn-updates:hover {
  background-color: #ddebff;
}

.app-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 38px;
  height: 38px;
  border: 1px solid var(--bs-border-color);
  border-radius: .5rem;
  background-color: var(--bs-body-bg);
  color: var(--bs-body-color);
  flex-shrink: 0;
}

.app-icon-btn:hover {
  background-color: var(--bs-tertiary-bg);
  color: var(--bs-body-color);
}

.app-notification-badge {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: 9px;
  background-color: #ef4444;
  color: #fff;
  font-size: .65rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.app-main {
  flex: 1 1 auto;
  padding: 1.5rem;
}

.app-breadcrumb {
  margin: 0 0 1rem;
  font-size: .85rem;
}

.badge-status {
  font-weight: 600;
  font-size: .75rem;
  padding: .4em .65em;
}

.dash-date-range {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  border: 1px solid var(--bs-border-color);
  background-color: var(--bs-body-bg);
  border-radius: .5rem;
  padding: .45rem .75rem;
  font-size: .825rem;
  color: var(--bs-body-color);
  white-space: nowrap;
}

.dash-date-range i {
  color: var(--bs-secondary-color);
}

.app-footer {
  padding: 1rem 1.75rem;
  border-top: 1px solid var(--bs-border-color);
  color: var(--bs-secondary-color);
  font-size: .875rem;
}

@media (min-width: 992px) {
  .app-scan-btn {
    display: inline-flex;
  }
}

@media (max-width: 991.98px) {
  .app-sidebar {
    position: fixed;
    left: 0;
    top: 0;
    height: 100vh;
    max-width: 85vw;
    transform: translateX(-100%);
    transition: transform .2s ease;
    box-shadow: 2px 0 12px rgba(0, 0, 0, .25);
    z-index: 1045;
  }

  .app-sidebar.show {
    transform: translateX(0);
  }

  .sidebar-backdrop.show {
    display: block;
  }

  .app-main {
    padding: 1.25rem;
  }
}

@media (max-width: 575.98px) {
  .app-header {
    padding: 0 .75rem;
    gap: .5rem;
  }

  .app-brand-text {
    display: none;
  }

  .app-main {
    padding: 1rem;
  }

  .app-footer {
    padding: .85rem 1rem;
  }
}

/* ---------- Motion ---------- */

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes pulseGlow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 193, 7, .4); }
  50% { box-shadow: 0 0 0 4px rgba(255, 193, 7, 0); }
}

.app-main > * {
  animation: fadeInUp .35s ease both;
}

.app-main > *:nth-child(1) { animation-delay: .02s; }
.app-main > *:nth-child(2) { animation-delay: .06s; }
.app-main > *:nth-child(3) { animation-delay: .1s; }
.app-main > *:nth-child(4) { animation-delay: .14s; }
.app-main > *:nth-child(5) { animation-delay: .18s; }
.app-main > *:nth-child(n+6) { animation-delay: .2s; }

.card {
  transition: transform .2s ease, box-shadow .2s ease;
}

.card:hover {
  box-shadow: 0 .5rem 1.25rem rgba(15, 23, 42, .08);
}

[data-bs-theme="dark"] .card:hover {
  /* A dark shadow against an already-dark page background is nearly invisible — dark mode needs a
     stronger, larger shadow to read as "lift" the same way the light-mode shadow does. */
  box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .45);
}

.btn {
  transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease, border-color .15s ease;
}

.btn:hover {
  transform: translateY(-1px);
}

.btn:active {
  transform: translateY(0);
}

.badge-status.bg-warning-subtle {
  animation: pulseGlow 2s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: .001ms !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

/* ---------- Form utilities (reusable across master/registration forms) ---------- */

/* Select2 is initialized with dropdownParent: $(form) on these forms so the
   options panel isn't clipped by any overflow:hidden ancestor. Select2
   positions that panel with `position: absolute` relative to the nearest
   *positioned* ancestor — without this, the <form> has no positioning
   context of its own, so the panel (and the selected value it shows) can
   drift away from the actual field instead of appearing right under it. */
#patientRegistrationForm,
#doctorForm,
#testForm {
  position: relative;
}

.required-field > .form-label::after,
.required-field > label::after {
  content: " *";
  color: var(--bs-danger);
}

.avatar-upload-preview {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  border: 2px dashed var(--bs-border-color);
  background-color: var(--bs-tertiary-bg);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  font-size: 2rem;
  color: var(--bs-secondary-color);
  background-size: cover;
  background-position: center;
  margin: 0 auto;
}

.upload-preview-row {
  display: flex;
  align-items: center;
  gap: .6rem;
  border: 1px solid var(--bs-border-color);
  border-radius: .4rem;
  padding: .4rem .6rem;
}

.upload-preview-thumb {
  width: 44px;
  height: 30px;
  flex-shrink: 0;
  border-radius: .25rem;
  background-color: var(--bs-tertiary-bg);
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--bs-secondary-color);
  font-size: .8rem;
}

@media (max-width: 767.98px) {
  #labProfileTabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  #labProfileTabs .nav-item {
    flex-shrink: 0;
  }
}

#patientDesignQr {
  width: 50px;
  height: 50px;
  border-radius: .25rem;
  color: var(--bs-secondary-color);
}

.form-loading-overlay {
  /* Fixed (viewport-relative), not absolute (container-relative) — these forms are long/scrollable,
     and an absolutely-positioned overlay centers itself on the full container height, which can land
     far off-screen from wherever the user actually is when they click Save. Fixed always centers in
     the visible viewport regardless of scroll position or form length. */
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  gap: .75rem;
  background-color: rgba(255, 255, 255, .75);
  z-index: 1050;
  border-radius: 0;
}

.form-loading-overlay.show {
  display: flex;
}

.sticky-actionbar {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  justify-content: space-between;
  background-color: var(--bs-body-bg);
  border: 1px solid var(--bs-border-color);
  border-radius: .5rem;
  padding: .75rem 1rem;
  position: sticky;
  bottom: .75rem;
  box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .08);
}

.field-settings-body {
  min-height: 480px;
}

.field-settings-panel {
  border-right: 1px solid var(--bs-border-color);
  display: flex;
  flex-direction: column;
}

@media (max-width: 767.98px) {
  .field-settings-body {
    min-height: 0;
  }

  .field-settings-panel {
    border-right: none;
    border-bottom: 1px solid var(--bs-border-color);
  }

  .field-settings-scroll,
  .field-settings-preview-scroll {
    max-height: 260px;
  }
}

.field-settings-search-wrap {
  position: relative;
}

.field-settings-search-icon {
  position: absolute;
  top: 50%;
  left: .9rem;
  transform: translateY(-50%);
  color: var(--bs-secondary-color);
  font-size: .8rem;
  pointer-events: none;
}

.field-settings-search {
  padding-left: 2.2rem;
}

.field-settings-scroll {
  overflow-y: auto;
  max-height: 420px;
}

.field-settings-row {
  display: flex;
  align-items: center;
  gap: .65rem;
  padding: .55rem 1rem;
  margin: 0;
  font-size: .875rem;
  color: var(--bs-body-color);
  cursor: pointer;
  border-left: 3px solid transparent;
}

.field-settings-row:hover {
  background-color: var(--bs-tertiary-bg);
}

.field-settings-row.checked {
  background-color: var(--sidebar-bg-active);
  border-left-color: var(--brand-accent);
  color: var(--brand-accent);
  font-weight: 600;
}

.field-settings-row .badge {
  font-size: .65rem;
  vertical-align: middle;
}

.field-settings-preview-col {
  background-color: var(--bs-tertiary-bg);
}

.field-settings-preview-scroll {
  overflow-y: auto;
  max-height: 480px;
}

/* ---------- Print-preview modal (Tests List / Preview / Settings) ---------- */

.pp-side-panel {
  width: 230px;
  flex-shrink: 0;
  padding: 1rem;
  overflow-y: auto;
  background-color: var(--bs-body-bg);
}

.pp-panel-title {
  font-weight: 700;
  font-size: .85rem;
  margin-bottom: .75rem;
}

.pp-check-row {
  font-size: .85rem;
}

.pp-preview-col {
  min-width: 0;
  background-color: var(--bs-tertiary-bg);
}

.pp-zoom-toolbar {
  background-color: var(--bs-body-bg);
  flex-shrink: 0;
}

@media (max-width: 991.98px) {
  .pp-side-panel {
    width: 170px;
  }
}

@media (max-width: 767.98px) {
  #printPreviewModal .modal-body {
    overflow-y: auto;
  }

  .pp-side-panel {
    width: 100%;
    max-height: 200px;
  }

  #printTestsPanel,
  #printSettingsPanel {
    border-left: none !important;
    border-right: none !important;
  }

  #printTestsPanel {
    border-bottom: 1px solid var(--bs-border-color) !important;
  }

  #printSettingsPanel {
    border-top: 1px solid var(--bs-border-color) !important;
  }

  #printPreviewFrame {
    min-height: 360px;
  }
}

/* ---------- Header: live patient search + notifications ---------- */

.app-header-search-results {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  max-height: 360px;
  overflow-y: auto;
  background-color: var(--bs-body-bg);
  border: 1px solid var(--bs-border-color);
  border-radius: .5rem;
  box-shadow: 0 .5rem 1.25rem rgba(15, 23, 42, .12);
  z-index: 1050;
}

.app-header-search-results.show {
  display: block;
}

.app-header-search-result {
  display: block;
  padding: .55rem .9rem;
  border-bottom: 1px solid var(--bs-border-color);
  text-decoration: none;
  color: var(--bs-body-color);
}

.app-header-search-result:last-child {
  border-bottom: none;
}

.app-header-search-result:hover {
  background-color: var(--bs-tertiary-bg);
}

.app-header-search-result .result-name {
  font-weight: 600;
  font-size: .875rem;
}

.app-header-search-result .result-meta {
  font-size: .75rem;
  color: var(--bs-secondary-color);
}

.app-header-search-empty {
  padding: .75rem .9rem;
  font-size: .8rem;
  color: var(--bs-secondary-color);
}

.app-notification-menu {
  width: 320px;
  max-width: calc(100vw - 2rem);
  max-height: 400px;
  overflow-y: auto;
  padding: 0;
}

.app-notification-item {
  display: block;
  padding: .6rem .9rem;
  border-bottom: 1px solid var(--bs-border-color);
  text-decoration: none;
  color: var(--bs-body-color);
}

.app-notification-item:last-child {
  border-bottom: none;
}

.app-notification-item:hover {
  background-color: var(--bs-tertiary-bg);
}

/* ---------- Help Center panel ---------- */

.help-panel {
  --bs-offcanvas-width: 420px;
}

@media (max-width: 575.98px) {
  .help-panel {
    --bs-offcanvas-width: 100vw;
  }
}

.help-search-icon {
  position: absolute;
  top: 50%;
  left: .9rem;
  transform: translateY(-50%);
  color: var(--bs-secondary-color);
  font-size: .8rem;
  pointer-events: none;
}

.help-search-input {
  padding-left: 2.2rem;
}

.help-section + .help-section {
  margin-top: 1.5rem;
}

.help-section-title {
  font-size: .8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: var(--bs-body-color);
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: .5rem;
}

.help-item .accordion-button {
  font-size: .85rem;
  font-weight: 600;
  padding: .65rem .9rem;
  background-color: transparent;
  box-shadow: none;
}

.help-item .accordion-button:not(.collapsed) {
  color: var(--brand-accent, #3B82F6);
  background-color: var(--sidebar-bg-active);
  box-shadow: none;
}

.help-item .accordion-button:focus {
  box-shadow: none;
  border-color: transparent;
}

.help-item .accordion-body {
  padding: .25rem .9rem .9rem;
  line-height: 1.55;
}

.help-panel-footer {
  background-color: var(--bs-tertiary-bg);
}

/* ---------- What's New panel ---------- */

.update-item {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  padding: .65rem .75rem;
  border-radius: .5rem;
}

.update-item:hover {
  background-color: var(--bs-tertiary-bg);
}

.update-item-icon {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: .5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: var(--sidebar-bg-active);
  color: var(--brand-accent, #3B82F6);
  font-size: .85rem;
}

.update-item-title {
  font-size: .85rem;
  font-weight: 600;
  line-height: 1.35;
}

.update-item-desc {
  line-height: 1.5;
  margin-top: .1rem;
}

/* Full-page loader shown while navigating away via a sidebar menu link — see the script at the
   bottom of _Layout.cshtml. Three staggered bouncing dots, kept small/simple on purpose (no card,
   no icon — just the dots and one line of text). */
.page-nav-loader {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  background-color: rgba(255, 255, 255, .85);
  backdrop-filter: blur(2px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .2s ease;
}

[data-bs-theme="dark"] .page-nav-loader {
  background-color: rgba(15, 17, 21, .85);
}

.page-nav-loader.show {
  opacity: 1;
  visibility: visible;
}

.page-nav-loader-dots {
  display: flex;
  gap: .5rem;
}

.page-nav-loader-dots span {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background-color: var(--brand-accent, #3B82F6);
  animation: page-nav-loader-bounce 1s ease-in-out infinite;
}

.page-nav-loader-dots span:nth-child(2) { animation-delay: .15s; }
.page-nav-loader-dots span:nth-child(3) { animation-delay: .3s; }

@keyframes page-nav-loader-bounce {
  0%, 60%, 100% { transform: translateY(0); opacity: .6; }
  30% { transform: translateY(-14px); opacity: 1; }
}

/* select2-bootstrap-5-theme (CDN) hardcodes every color as a literal hex value and has no
   data-bs-theme awareness, so the closed box and the open dropdown popup stay light in dark
   mode. Re-point them at the same Bootstrap variables .form-select already uses.
   !important is needed here: the CDN stylesheet is included in each view's @section Styles
   block, which Layout renders AFTER site.css, so several of its selectors tie our specificity
   and win purely on source order (this is why the selected value text stayed hardcoded #212529
   even once the box background below was already overridden). */
[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-selection {
  background-color: var(--bs-body-bg) !important;
  border-color: var(--bs-border-color) !important;
  color: var(--bs-body-color) !important;
}

[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered {
  color: var(--bs-body-color) !important;
}

[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered .select2-selection__placeholder,
[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__rendered .select2-selection__choice {
  color: var(--bs-secondary-color) !important;
}

[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__rendered .select2-selection__choice {
  background-color: var(--bs-tertiary-bg) !important;
  border-color: var(--bs-border-color) !important;
}

[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-dropdown {
  background-color: var(--bs-body-bg) !important;
  border-color: var(--bs-border-color) !important;
  color: var(--bs-body-color) !important;
}

[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-dropdown .select2-search .select2-search__field {
  background-color: var(--bs-body-bg) !important;
  border-color: var(--bs-border-color) !important;
  color: var(--bs-body-color) !important;
}

[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option {
  background-color: var(--bs-body-bg) !important;
  color: var(--bs-body-color) !important;
}

[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option.select2-results__option--highlighted {
  background-color: var(--bs-tertiary-bg) !important;
  color: var(--bs-body-color) !important;
}

[data-bs-theme="dark"] .select2-container--bootstrap-5.select2-container--disabled .select2-selection {
  background-color: var(--bs-secondary-bg) !important;
  color: var(--bs-secondary-color) !important;
}