/* ===== Fixed Prev/Next header ===== */
.nav-btns{
  position:fixed; top:0; left:0; right:0;
  display:flex; justify-content:space-between;
  padding:.75rem 1rem; background:#fff;
  box-shadow:0 2px 4px rgba(0,0,0,.1); z-index:1000;
}
.content{ padding-top:4.5rem; padding-bottom:6rem; }
@media (max-width:600px){
  .nav-btns{ padding:.5rem; }
  .content{ padding-top:3.5rem; padding-bottom:16rem; }
}

/* ===== Bottom navigation ===== */
.bottom-nav{
  position:fixed; bottom:0; left:0; right:0; height:3.5rem; z-index:1000;
  background:#fff; box-shadow:0 -1px 5px rgba(0,0,0,.1);
  display:flex; justify-content:space-between;
}
.bottom-nav .nav-link{
  flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
  color:#555; font-size:.85rem; text-decoration:none; padding:0;
}
.bottom-nav .nav-link.active{ color:#0d6efd; }
.bottom-nav .nav-link i{ font-size:1.3rem; line-height:1; margin-bottom:.2rem; }

/* ===== Clear buttons & helpers (used by filters overlay, etc.) ===== */
.clear-btn{
  background:transparent; border:0; line-height:1; color:var(--bs-secondary);
  display:flex; align-items:center; justify-content:center;
}
.clear-btn:hover{ color:var(--bs-dark); }
.clear-btn:active{ transform:scale(.95); }
.clear-btn-inside{ position:absolute; top:50%; transform:translateY(-50%); padding:0; }
.has-clear-btn{
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
  background-image:none!important; padding-right:2rem;
}
.clear-input-btn{ position:absolute; top:0; right:0; width:44px; height:100%; padding:0; }
.select-clear{ position:absolute; top:0; right:0; width:44px; height:100%; padding:0; }
.select-clear::after{
  content:""; position:absolute; left:0; top:8px; bottom:8px; width:1px; background:var(--bs-border-color);
}
.with-clear{ padding-right:3.25rem !important; }

/* ===== Small avatar & chip (used in detail headers) ===== */
.avatar--xs{ --avatar-size:24px; }
.top-chip{
  display:inline-flex; align-items:center; gap:.5rem; padding:.25rem .5rem;
  border-radius:9999px; background:var(--bs-secondary-bg); border:1px solid var(--bs-border-color);
}
.top-chip .nav-title{ max-width:60vw; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* ===== Bootstrap offcanvas tweaks for bottom-sheet ===== */
.offcanvas.offcanvas-bottom{
  height:auto; max-height:calc(100vh - env(safe-area-inset-bottom,0) - .5rem);
  border-top-left-radius:1rem; border-top-right-radius:1rem;
  padding-bottom:calc(env(safe-area-inset-bottom,0) + .5rem);
}
.offcanvas.offcanvas-bottom .offcanvas-body{ flex:1 1 auto; overflow:auto; }

/* ===== Material 3 tokens (light) ===== */
:root{
  --md3-surface:#FFFBFE; --md3-on-surface:#1C1B1F;
  --md3-surface-variant:#E7E0EC; --md3-outline:#79747E;
  --md3-primary-container:#EADDFF; --md3-on-primary-container:#21005D;
  --md3-scrim:rgba(0,0,0,.40);
  --md3-shadow:0 8px 24px rgba(0,0,0,.20), 0 2px 8px rgba(0,0,0,.12);
  --md3-radius-xl:28px; --md3-state-hover:.08; --md3-state-press:.12; --md3-handle:#C6C6C6;
  --md3-accent:#22C55E; /* green radio dot */
}

/* Scrim over bootstrap */
.offcanvas-backdrop.show{ background:var(--md3-scrim)!important; opacity:1!important; }

/* ===== MD3 Bottom-sheet container ===== */
.md3-bottom-sheet{
  background:var(--md3-surface); color:var(--md3-on-surface); border:0;
  border-top-left-radius:var(--md3-radius-xl); border-top-right-radius:var(--md3-radius-xl);
  box-shadow:var(--md3-shadow); height:auto;
  max-height:calc(100vh - env(safe-area-inset-bottom,0) - .5rem);
  padding-bottom:calc(env(safe-area-inset-bottom,0) + .5rem);
}

/* ===== MD3 bottom-sheet header ===== */
.md3-sheet-header{
  position:relative;
  display:grid; grid-template-columns:1fr auto;
  row-gap:.25rem; align-items:center;
  padding:.75rem 1rem .5rem;
}
.md3-handle{
  grid-column:1 / -1; width:40px; height:4px; border-radius:999px;
  background:var(--md3-handle); margin:.25rem auto .5rem;
}
.md3-header-text{
  grid-column:1;
  display:flex; flex-direction:column; gap:.125rem;
  padding-left:.25rem; padding-right:3.25rem; text-align:left;
}
.md3-title-large{ font-size:22px; line-height:28px; font-weight:800; margin:0; }
/* divider between title and field caption */
.md3-divider{
  height:2px; width:100%; background:var(--bs-border-color);
  border-radius:999px; margin:.375rem 0 .25rem;
}
.md3-support{ color:#64748B; font-size:13px; line-height:18px; font-weight:600; }
.md3-icon-btn{
  position:absolute; top:6px; right:6px; width:44px; height:44px;
  display:flex; align-items:center; justify-content:center;
  border:0; background:transparent; color:var(--md3-on-surface);
  border-radius:999px; padding:0;
}
.md3-icon-btn:hover{ background:rgba(0,0,0,var(--md3-state-hover)); }
.md3-icon-btn:active{ background:rgba(0,0,0,var(--md3-state-press)); }

/* ===== MD3 radio-list ===== */
.md3-choice{ padding:.75rem 1rem 1rem; }
.md3-choice-item{
  width:100%; display:flex; align-items:center; gap:.75rem;
  border-radius:16px; border:1px solid var(--md3-surface-variant);
  background:var(--md3-surface); color:var(--md3-on-surface);
  padding:.9rem 1rem; text-align:left; margin-bottom:.5rem;
  transition:background-color .15s, border-color .15s, transform .06s;
}
.md3-choice-item:hover{ background:rgba(0,0,0,var(--md3-state-hover)); }
.md3-choice-item:active{ background:rgba(0,0,0,var(--md3-state-press)); transform:translateY(.5px); }
.md3-radio{
  width:22px; height:22px; border-radius:999px; border:2px solid var(--md3-outline);
  display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto;
}
.md3-radio::after{ content:""; width:10px; height:10px; border-radius:999px; background:transparent; }
.md3-choice-item.active{
  background:var(--md3-primary-container); border-color:var(--md3-primary-container);
  color:var(--md3-on-primary-container);
}
.md3-choice-item.active .md3-radio{ border-color:var(--md3-accent); }
.md3-choice-item.active .md3-radio::after{ background:var(--md3-accent); }

@media (prefers-reduced-motion:reduce){
  .md3-choice-item{ transition:none; }
}