body {
  min-height: 100vh;
  min-height: -webkit-fill-available;
}

html {
  height: -webkit-fill-available;
}
.select2-selection__arrow {
  display: none;
}
.alert-debug {
  background-color: #fff;
  border-color: #d6e9c6;
  color: #000;
}

.alert-error {
  background-color: #f2dede;
  border-color: #eed3d7;
  color: #b94a48;
}

.container {
  padding-bottom: 10px !important;
}

.container {
  max-width: none !important;
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}

.select2-container {
  min-width: 100% !important;
  max-width: 100% !important;
}
span > span.selection > span.select2-selection {
  min-height: 38px !important;
}

/* Select2 container - Using light-dark() for automatic theme switching */
/* Light mode uses Bootstrap defaults, dark mode uses custom colors */
.select2-container--default .select2-selection--single {
  background-color: light-dark(#fff, #212529) !important;
  border-color: light-dark(#ced4da, #6c757d) !important;
  color: light-dark(#212529, #ffffff) !important;
}

.select2-container--default
  .select2-selection--single
  .select2-selection__rendered {
  color: light-dark(#212529, #ffffff) !important;
}

.select2-container--default
  .select2-selection--single
  .select2-selection__choice {
  background-color: light-dark(#fff, #212529) !important;
  border-color: light-dark(#ced4da, #6c757d) !important;
  color: light-dark(inherit, #ffffff) !important;
}

.select2-container--default
  .select2-selection--single
  .select2-selection__choice__remove {
  color: light-dark(inherit, #ffffff) !important;
}

.select2-container--default .select2-search {
  padding-left: 0 !important;
  padding-right: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.select2-container--default .select2-search .select2-search__field {
  background-color: light-dark(#fff, #212529) !important;
  color: light-dark(#212529, #ffffff) !important;
}

.select2-container--default .select2-selection--multiple {
  background-color: light-dark(#fff, #212529) !important;
  border-color: light-dark(#ced4da, #6c757d) !important;
  color: light-dark(inherit, #ffffff) !important;
}

.select2-container--default
  .select2-selection--multiple
  .select2-selection__rendered {
  color: light-dark(inherit, #ffffff) !important;
}

.select2-container--default
  .select2-selection--multiple
  .select2-selection__choice {
  background-color: light-dark(#fff, #212529) !important;
  border-color: light-dark(#ced4da, #6c757d) !important;
  color: light-dark(inherit, #ffffff) !important;
}

.select2-container--default
  .select2-selection--multiple
  .select2-selection__choice__remove {
  color: light-dark(inherit, #ffffff) !important;
}

.select2-container--default
  .select2-selection--multiple
  .select2-search--inline
  .select2-search__field {
  background-color: light-dark(#fff, #212529) !important;
  color: light-dark(#212529, #ffffff) !important;
  border: none !important;
}

/* Using light-dark() for automatic theme switching */
/* Light mode uses Bootstrap defaults, dark mode uses custom colors */
.select2-container--default .select2-results__option {
  background-color: light-dark(transparent, #343a40) !important;
  color: light-dark(#212529, #ffffff) !important;
}

.select2-container--default .select2-results__option--highlighted {
  background-color: light-dark(#f8f9fa, #495057) !important;
  color: light-dark(#212529, #ffffff) !important;
}

/*data-bs-theme="dark"*/
/*data-bs-theme="light"*/
.table-container {
  overflow-x: auto;
}

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type="number"] {
  appearance: textfield;
  -moz-appearance: textfield;
}

/*
   ==========================================================================
   AGI3 DESIGN SYSTEM - BRANDING SHIELD
   Forces the "Agi3 Blue" theme and eliminates the default Bootstrap "Teal"
   globally. This ensures a consistent UI across partial and full page loads.
   ==========================================================================
*/
:root {
  /* Enable light-dark() color function and system preference detection */
  color-scheme: light dark;

  --agi3-blue: #145bbf;
  --agi3-blue-hover: #104a9e;
  --bs-primary: #145bbf;
  --bs-primary-rgb: 20, 91, 191;
}

/* Primary Color Overrides */
.btn-primary,
.badge.bg-primary {
  background-color: var(--agi3-blue) !important;
  border-color: var(--agi3-blue) !important;
}

/* bg-primary respects Bootstrap's opacity utilities (bg-opacity-10, etc.) */
.bg-primary {
  background-color: rgba(
    var(--bs-primary-rgb),
    var(--bs-bg-opacity, 1)
  ) !important;
}

.btn-outline-primary {
  color: var(--agi3-blue) !important;
  border-color: var(--agi3-blue) !important;
}

.btn-outline-primary:hover,
.btn-outline-primary:active,
.btn-outline-primary:focus {
  background-color: var(--agi3-blue) !important;
  color: #fff !important;
}

/* Checked States (Checkboxes/Radios) */
.form-check-input:checked {
  background-color: var(--agi3-blue) !important;
  border-color: var(--agi3-blue) !important;
}

/* Utilities */
.text-primary {
  color: var(--agi3-blue) !important;
}

/* =========================================================================
   Branded table header for django-tables2 tables rendered inside card-body.
   Applies automatically to any .table inside a .card-body container.
   Matches the faint-blue header style used on the Western Canada Field Map.
   ========================================================================= */
.card-body .table thead th,
.card-body.p-0 .table thead th {
  background-color: light-dark(
    rgba(20, 91, 191, 0.06),
    rgba(20, 91, 191, 0.12)
  );
  color: light-dark(var(--agi3-blue, #145bbf), #6ea8fe);
  font-weight: 600;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  border-bottom: 2px solid
    light-dark(rgba(20, 91, 191, 0.15), rgba(20, 91, 191, 0.25));
}

/* Links inside sortable headers inherit the blue text */
.card-body .table thead th a,
.card-body.p-0 .table thead th a {
  color: inherit;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}

/* Sort indicators — neutral ↕ by default, ↑/↓ when active */
.card-body .table thead th.orderable a::after,
.card-body.p-0 .table thead th.orderable a::after {
  font-family: "bootstrap-icons";
  content: "\F127"; /* bi-arrow-down-up */
  font-size: 0.8em;
  opacity: 0.3;
  color: light-dark(var(--agi3-blue), #6ea8fe);
}

.card-body .table thead th.asc a::after,
.card-body.p-0 .table thead th.asc a::after {
  content: "\F148"; /* bi-sort-up */
  opacity: 1;
}

.card-body .table thead th.desc a::after,
.card-body.p-0 .table thead th.desc a::after {
  content: "\f128"; /* bi-arrow-down */
  opacity: 1;
}

/* Sticky first column in thead: must match the branded header background from
   the .card-body .table thead th rule above (rgba(20, 91, 191, 0.06/0.12) tint).
   That rgba value is transparent/relative — scrolled columns bleed through it on
   the sticky cell. Use color-mix() to pre-blend the same tint into the card
   body background (#fff light / #212529 dark) producing an identical-looking but
   fully OPAQUE colour.
   ⚠️  Do NOT use rgba() here — transparent backgrounds let scrolled columns
       show through regardless of z-index. Use color-mix() only. */
.card-body .table thead th.sticky-col,
.card-body.p-0 .table thead th.sticky-col {
  background-color: light-dark(
    color-mix(in srgb, rgb(20, 91, 191) 6%, #fff),
    color-mix(in srgb, rgb(20, 91, 191) 12%, #212529)
  ) !important;
  border-right: 2px solid
    light-dark(rgba(20, 91, 191, 0.2), rgba(20, 91, 191, 0.3)) !important;
}

/* Anchor Links - Using light-dark() for automatic theme switching */
a {
  color: light-dark(var(--agi3-blue), #6ea8fe);
}

a:hover {
  color: light-dark(var(--agi3-blue-hover), #9ec5fe);
}

/* Accordions */
.accordion-button:not(.collapsed) {
  background-color: rgba(20, 91, 191, 0.05) !important;
  color: var(--agi3-blue) !important;
}

/* Google Maps InfoWindow: dark mode = dark bubble, light text, visible X */
[data-bs-theme="dark"] .gm-style-iw {
  background-color: #212529 !important;
}

[data-bs-theme="dark"] .gm-style-iw + button {
  color: #fff !important;
}

[data-bs-theme="dark"] .gm-style-iw + button img {
  filter: invert(1) !important;
}

/* Policy coverage map popup: light = white bg / black text, dark = dark bg / white text */
.map-infowindow-content {
  padding: 5px;
  min-width: 200px;
  font-size: 13px;
  line-height: 1.4;
  color: light-dark(#212529, #fff);
}

.map-infowindow-content h6 {
  margin: 0 0 8px 0;
  border-bottom: 1px solid light-dark(#ccc, #495057);
  padding-bottom: 4px;
  font-weight: bold;
}

.map-infowindow-content .map-infowindow-divider,
.map-infowindow-content .map-infowindow-policies {
  margin-top: 4px;
  padding-top: 4px;
  border-top: 1px dashed light-dark(#dee2e6, #495057);
}

.map-infowindow-content .map-infowindow-policies ul {
  margin: 0;
  padding-left: 15px;
}

.map-infowindow-content a {
  text-decoration: none;
  font-weight: 600;
  color: light-dark(var(--agi3-blue), #6ea8fe);
}

.map-infowindow-content .map-infowindow-muted,
.map-infowindow-content .map-infowindow-copy-btn {
  color: light-dark(#6c757d, #adb5bd) !important;
}

.wrapper {
  display: flex;
  align-items: stretch;
}

#id-div-uwai-main-content {
  display: flex;
  flex-direction: column;
  flex: 1;
  width: calc(100% - 1rem);
  min-height: calc(100vh - 80px);
  padding: 1rem;
}

.avatar {
  color: black;
  padding: 2px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 100%;
  width: 36px;
  height: 36px;
  font-weight: 600;
  background-color: #f8f9fa;
}

.sticky-offset {
  top: 78px; /* Match navbar height */
}

.main {
  display: flex;
  flex-wrap: nowrap;
  height: calc(100vh - 78px); /* Match navbar height */
  height: -webkit-fill-available;
  overflow-x: hidden;
  overflow-y: auto;
}

.b-example-divider {
  flex-shrink: 0;
  width: 1.5rem;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.1);
  border: solid rgba(0, 0, 0, 0.15);
  border-width: 1px 0;
  box-shadow:
    inset 0 0.5em 1.5em rgba(0, 0, 0, 0.1),
    inset 0 0.125em 0.5em rgba(0, 0, 0, 0.15);
}

.bi {
  vertical-align: -0.125em;
  pointer-events: none;
  fill: currentColor;
}

.dropdown-toggle {
  outline: 0;
}

.nav-flush .nav-link {
  border-radius: 0;
}

.btn-toggle {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.5rem;
  font-weight: 600;
  color: rgba(0, 0, 0, 0.65);
  background-color: transparent;
  border: 0;
  width: 100%;
}

.btn-toggle:hover,
.btn-toggle:focus {
  color: rgba(0, 0, 0, 0.85);
  background-color: #d2f4ea;
}

.btn-toggle::before {
  width: 1.25em;
  line-height: 0;
  content: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='rgba%280,0,0,.5%29' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 14l6-6-6-6'/%3e%3c/svg%3e");
  transition: transform 0.35s ease;
  transform-origin: 0.5em 50%;
}

.btn-toggle[aria-expanded="true"] {
  color: rgba(0, 0, 0, 0.85);
}

.btn-toggle[aria-expanded="true"]::before {
  transform: rotate(90deg);
}

.btn-toggle-nav a {
  display: inline-flex;
  padding: 0.1875rem 0.5rem;
  margin-top: 0.125rem;
  margin-left: 1.25rem;
  text-decoration: none;
}

.btn-toggle-nav a:hover,
.btn-toggle-nav a:focus {
  background-color: #d2f4ea;
}

.scrollarea {
  overflow-y: auto;
}

.fw-semibold {
  font-weight: 600;
}

.lh-tight {
  line-height: 1.25;
}

.nav-item {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.5rem;
  font-weight: 600;
  color: rgba(0, 0, 0, 0.65);
  background-color: transparent;
  border: 0;
  text-decoration: none;
  width: 100%;
}

.nav-item a:hover,
.nav-item a:focus {
  background-color: #d2f4ea;
}

.nav-item ::deep a {
  color: #d7d7d7;
  border-radius: 4px;
  height: 3rem;
  display: flex;
  align-items: center;
  line-height: 3rem;
}

.nav-item ::deep a.active {
  background-color: rgba(255, 255, 255, 0.25);
  color: white;
}

.nav-item ::deep a:hover {
  background-color: rgba(255, 255, 255, 0.1);
  color: white;
}

/* Sticky first column in responsive tables (e.g., Leads Data tab).
   Bootstrap sticky headers use z-index: 11, so we go above that. */
.table-responsive td,
.table-responsive th {
  position: relative;
  z-index: 0;
}

/* Prevent wide tables from stretching the entire page in flex layouts.
   Flex items default to min-width: auto, letting the table push the page wide.
   min-width: 0 constrains the scrollbar to the table, not the page. */
.table-responsive {
  min-width: 0;
  overflow-x: auto;
}

.table-container .pagination {
  margin-top: 1rem;
}

.sticky-col {
  position: sticky !important;
  left: 0 !important;
  z-index: 12 !important;
  background-color: light-dark(
    var(--bs-table-bg, #fff),
    var(--bs-table-bg, #212529)
  ) !important;
  box-shadow: 2px 0 4px rgba(0, 0, 0, 0.1);
}

th.sticky-col {
  z-index: 25 !important;
}

.table-striped > tbody > tr:nth-of-type(odd) > .sticky-col {
  background-color: light-dark(
    var(--bs-table-striped-bg, #f8f9fa),
    var(--bs-table-striped-bg, #2c3034)
  );
}

/* Do not change settings without checking both dark and lightmode */
/* Note: Sidebar-specific dropdown-item styles are in the SIDEBAR SYSTEM section below */
.dropdown-item {
  border-radius: 4px;
  padding: 6px 12px;
  margin-bottom: 5px;
  overflow-wrap: break-word;
  white-space: normal;
}

/* Non-sidebar dropdown hover (e.g., top nav user menu, field map menu) */
.dropdown-menu:not(.sidebar .dropdown-menu) .dropdown-item:hover {
  background-color: light-dark(
    rgba(20, 91, 191, 0.08),
    rgba(20, 91, 191, 0.15)
  );
  color: light-dark(#145bbf, #6ea8fe);
}

.top-nav {
  background-color: #021b3f; /* Complementary blue color 145bbf */
  color: #ffffff; /* White text color for contrast */
}

.assistant-nav-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem; /* Match fs-4 Bootstrap icon size (~24px) */
  height: 1.5rem;
  vertical-align: middle;
  /* Default colors - transparent bg with current text color */
  --icon-bg-color: transparent;
  --icon-fg-color: currentColor;
}

/* Mini sidebar: blue circle with white logo, sized to match other icons */
.sidebar-mini .assistant-nav-icon {
  width: 1.75rem;
  height: 1.75rem;
  --icon-bg-color: var(--bs-primary);
  --icon-fg-color: white;
}

/* Full sidebar: icon matches text color */
.sidebar-full .assistant-nav-icon {
  --icon-bg-color: transparent;
  --icon-fg-color: currentColor;
  /* Set the colors for the icon */
  --icon-bg-color: var(--bs-primary);
  --icon-fg-color: white;
}

/* Scale icon to match fs-4 size when fs-4 class is applied */
.sidebar-full .assistant-nav-icon.fs-4 {
  width: 1.75rem;
  height: 1.75rem;
  font-size: 1.5rem;
}
.custom-navy {
  background-color: #021b3f !important;
  color: #fff !important;
  font-weight: bold;
}

.soft-sky-blue {
  background-color: #e3f2fd !important;
  color: #021b3f !important;
}

.btn-outline-navy {
  border: 1px solid #021b3f;
  color: #021b3f;
  background: #fff;
  transition:
    background 0.2s,
    color 0.2s;
}

.btn-outline-navy:hover,
.btn-outline-navy:focus {
  background: #021b3f;
  color: #fff;
}

.btn-navy {
  background-color: #021b3f;
  color: #fff;
  border: 1px solid #021b3f;
}

.btn-navy:hover,
.btn-navy:focus {
  background-color: #1a237e;
  color: #fff;
  border: 1px solid #1a237e;
}

/* Password strength indicator styles */
#password-strength {
  transition: all 0.3s ease;
}

#password-strength .badge {
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.25rem 0.5rem;
  border-radius: 0.25rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

#password-strength .badge[style*="background-color: #dc3545"] {
  animation: pulse 2s infinite;
}

#new_password {
  -webkit-text-security: disc;
}

#confirm_password {
  -webkit-text-security: disc;
}

@keyframes pulse {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.7;
  }
  100% {
    opacity: 1;
  }
}

/* Form validation styling */
.form-control.is-valid {
  border-color: #28a745;
  box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25);
}

.form-control.is-valid:focus {
  border-color: #28a745;
  box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25);
}

.form-control.is-invalid {
  border-color: #dc3545;
  box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
}

.form-control.is-invalid:focus {
  border-color: #dc3545;
  box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
}

/* Required field asterisk styling */
.customRequiredField:after {
  content: " *";
  color: black;
}

/* ==========================================================================
   CARD ENHANCEMENTS
   ========================================================================== */

/* Subtle shadow for info cards using Bootstrap's bg-opacity utility */
.card.bg-opacity-10 {
  box-shadow: 0 0.125rem 0.375rem rgba(0, 0, 0, 0.08);
  transition: box-shadow 0.2s ease;
}

.card.bg-opacity-10:hover {
  box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.12);
}

/* Light info card - subtle blue-grey tint for header/info cards */
.card-info-light {
  background-color: rgba(
    100,
    162,
    233,
    0.15
  ) !important; /* Light blue-grey, matches alert-info */
  box-shadow: 0 0.125rem 0.375rem rgba(0, 0, 0, 0.08);
  transition:
    box-shadow 0.2s ease,
    background-color 0.2s ease;
}

.card-info-light:hover {
  background-color: rgba(100, 162, 233, 0.2) !important;
  box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.12);
}

/* ==========================================================================
   UWAI SIDEBAR
   ========================================================================== */

/* 1. Base Layout & Structure */
.sidebar {
  width: 280px;
  transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  background-color: light-dark(#f8f9fa, #212529);
  border-right: 1px solid light-dark(#dee2e6, #373b3e);
  height: calc(100vh - 78px);
  position: fixed;
  top: 78px; /* Match navbar height (77.75px rounded up) */
  left: 0;
  z-index: 1050; /* Higher than Leaflet maps (400-700) */
  overflow-x: hidden;
}

/* Ensure all clickable items are consistent */
.sidebar .nav-link,
.sidebar .dropdown-item,
.sidebar .btn {
  padding: 0.625rem 1.25rem !important;
  color: #212529 !important;
  border-radius: 0 !important;
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
  text-decoration: none !important;
  border: none !important;
  background: transparent !important;
  transition: all 0.15s ease !important;
  text-align: left !important;
  box-shadow: none !important;
}

/* Dropdown Chevron Alignment */
.sidebar .dropdown-toggle::after {
  margin-left: auto !important;
  display: inline-block !important;
  transition: transform 0.2s ease !important;
}

.sidebar .dropdown-toggle:not(.collapsed)::after {
  transform: rotate(180deg) !important;
}

/* 2. Hover & Active States (Agi3 Blue Theme) */
.sidebar .nav-link:hover,
.sidebar .dropdown-item:hover,
.sidebar .btn:hover {
  background-color: rgba(20, 91, 191, 0.08) !important;
  color: #145bbf !important;
}

/* The "Primary" Active State (Categories & Standalone Links) */
.sidebar .nav-link.active,
.sidebar .btn.active,
.sidebar .nav-pills .nav-link.active,
.sidebar .nav-pills .show > .nav-link {
  background-color: rgba(20, 91, 191, 0.12) !important;
  color: #145bbf !important;
  font-weight: 600 !important;
}

/* Subtle separator between active menu header and its submenu items */
.sidebar .btn.active[data-bs-toggle="collapse"] {
  border-bottom: 1px solid rgba(20, 91, 191, 0.18) !important;
}

/* Sub-menu items - consistent styling with parent nav items */
.sidebar .dropdown-item.active {
  background-color: rgba(20, 91, 191, 0.12) !important;
  color: #145bbf !important;
  font-weight: 600 !important;
}

/* Ensure icons and text inside active items match the theme */
.sidebar .active i,
.sidebar .active .bi,
.sidebar .active .nav-text,
.sidebar .active .assistant-nav-icon,
.sidebar .active [class^="bi-"],
.sidebar .active [class*=" bi-"] {
  color: #145bbf !important;
}

/* 3. Sidebar Theme Support - Using light-dark() for automatic theme switching */
.sidebar {
  background-color: light-dark(#fff, #212529) !important;
  color: light-dark(#212529, #dee2e6) !important;
  border-right-color: light-dark(#dee2e6, #373b3e) !important;
}

.sidebar .nav-link,
.sidebar .dropdown-item,
.sidebar .btn {
  color: light-dark(#212529, #adb5bd) !important;
}

.sidebar .nav-link:hover,
.sidebar .btn:hover {
  background-color: light-dark(
    rgba(20, 91, 191, 0.08),
    rgba(20, 91, 191, 0.12)
  ) !important;
  color: light-dark(#145bbf, #ffffff) !important;
}

.sidebar .nav-link.active,
.sidebar .btn.active,
.sidebar .nav-pills .nav-link.active {
  background-color: light-dark(
    rgba(20, 91, 191, 0.12),
    rgba(20, 91, 191, 0.25)
  ) !important;
  color: light-dark(#145bbf, #4a90f0) !important;
}

/* Subtle separator between active menu header and its submenu items */
.sidebar .btn.active[data-bs-toggle="collapse"] {
  border-bottom-color: light-dark(
    rgba(20, 91, 191, 0.18),
    rgba(74, 144, 240, 0.25)
  ) !important;
}

.sidebar .active i,
.sidebar .active .bi,
.sidebar .active .nav-text,
.sidebar .active .assistant-nav-icon,
.sidebar .active [class^="bi-"],
.sidebar .active [class*=" bi-"] {
  color: light-dark(#145bbf, #4a90f0) !important;
}

.sidebar .dropdown-item.active {
  background-color: light-dark(
    rgba(20, 91, 191, 0.12),
    rgba(20, 91, 191, 0.2)
  ) !important;
  color: light-dark(#145bbf, #4a90f0) !important;
}

/* 4. Mini Sidebar States */
.sidebar.sidebar-collapsed {
  width: 70px !important;
}

/* ==========================================================================
   4. MINI SIDEBAR STATES
   These styles are scoped to .sidebar-mini and won't affect the full sidebar
   ========================================================================== */

/* Mini sidebar flyout menus - ensure they appear above Leaflet maps (z-index 400-700) */
.sidebar-mini .dropdown-menu {
  z-index: 1100 !important;
}

/* Mini sidebar container - strip all padding for full-width items */
.sidebar-mini {
  padding: 0 !important;
}

.sidebar-mini > ul.nav {
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
}

/* Mini sidebar nav items - icon only, centered, full width */
.sidebar-mini .nav-item {
  width: 100% !important;
  display: block !important;
  padding: 0 !important;
  margin: 0 !important;
}

.sidebar-mini .nav-link {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  padding: 0.75rem 0 !important;
  min-height: 48px !important;
  width: 100% !important;
  border-radius: 0 !important;
}

/* Hide dropdown arrow in mini sidebar - icons only */
.sidebar-mini .dropdown-toggle::after {
  display: none !important;
}

/* Hover state for mini sidebar - full width highlight */
/* Using light-dark() for automatic theme switching */
.sidebar-mini .nav-item:hover,
.sidebar-mini .nav-link:hover {
  background-color: light-dark(
    rgba(20, 91, 191, 0.08),
    rgba(20, 91, 191, 0.12)
  ) !important;
}

.sidebar-mini .nav-link:hover i,
.sidebar-mini .nav-link:hover .bi {
  color: light-dark(#145bbf, #ffffff) !important;
}

/* Active state for mini sidebar - full width highlight */
.sidebar-mini .nav-item.active {
  background-color: light-dark(
    rgba(20, 91, 191, 0.12),
    rgba(20, 91, 191, 0.2)
  ) !important;
  width: 100% !important;
}

.sidebar-mini .nav-item.active .nav-link {
  background-color: transparent !important; /* Let parent handle bg */
  color: light-dark(#145bbf, #4a90f0) !important;
}

.sidebar-mini .nav-item.active i,
.sidebar-mini .nav-item.active .bi {
  color: light-dark(#145bbf, #4a90f0) !important;
}

/* Flush containers for full-width highlights */
.sidebar ul.nav,
.sidebar ul.navbar-nav {
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  width: 100% !important;
}

.sidebar li {
  width: 100% !important;
  list-style: none !important;
}

/* Sub-menu containers (collapsible sections) - full width */
.sidebar .collapse,
.sidebar .collapsing {
  width: 100% !important;
}

.sidebar .collapse ul,
.sidebar .btn-toggle-nav {
  padding-left: 0 !important;
  padding-right: 0 !important;
  width: 100% !important;
}

/* Sub-menu dropdown items - full width with left indent */
.sidebar .btn-toggle-nav .dropdown-item,
.sidebar .collapse .dropdown-item {
  width: 100% !important;
  padding-left: 2.5rem !important; /* Indent to show hierarchy */
  margin: 0 !important;
  border-radius: 0 !important;
}

/* Nested sub-menu items */
.sidebar .collapse .collapse .dropdown-item,
.sidebar .collapse .collapsing .dropdown-item,
.sidebar .collapsing .collapse .dropdown-item {
  padding-left: 3.75rem !important;
}

/* --- MODERN ROUNDED BREADCRUMBS --- */
.breadcrumb {
  background: rgba(var(--bs-primary-rgb), 0.03);
  padding: 0.25rem 0.5rem;
  margin-bottom: 1rem;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  border: 1px solid rgba(var(--bs-primary-rgb), 0.08);
  list-style: none;
}

.breadcrumb-item {
  display: flex;
  align-items: center;
  font-size: 0.85rem;
  font-weight: 500;
  padding: 0.25rem 0.5rem;
}

/* Chevron separator */
.breadcrumb-item + .breadcrumb-item::before {
  content: "\F285"; /* Bootstrap icon: chevron-right */
  font-family: "bootstrap-icons";
  font-size: 0.6rem;
  color: #adb5bd;
  margin-right: 0.25rem;
}

/* Links */
.breadcrumb-item a {
  color: var(--agi3-blue);
  text-decoration: none;
  border-radius: 4px;
  transition:
    background-color 0.15s ease,
    color 0.15s ease;
}

.breadcrumb-item a:hover {
  background-color: rgba(var(--bs-primary-rgb), 0.1);
  color: var(--agi3-blue-hover);
}

/* Active/current item */
.breadcrumb-item.active {
  color: #495057;
  font-weight: 600;
  padding: 0.25rem 0.5rem;
}