/* Application styles */

.invoice-pdf-frame {
  width: 100%;
  height: 80vh;
  border: 0;
}

.thumb {
  width: 50px;
  height: 50px;
  object-fit: cover;
}

.thumb-sm {
  width: 80px;
  height: 80px;
  object-fit: cover;
}

.product-carousel-img {
  max-height: 400px;
  object-fit: cover;
}

.fab {
  bottom: 1.5rem;
  right: 1.5rem;
  width: 3.5rem;
  height: 3.5rem;
  z-index: 1050;
  align-items: center;
  justify-content: center;
}

.narrow-form {
  max-width: 480px;
}

.success-icon-lg {
  font-size: 3rem;
}

.photo-preview-thumb {
  width: 100px;
  height: 100px;
  object-fit: cover;
}

.avatar {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  font-weight: 600;
  flex-shrink: 0;
  user-select: none;
}

.avatar-stack {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

.avatar-stack .avatar + .avatar {
  margin-left: -0.5rem;
}

.avatar-you {
  box-shadow: 0 0 0 2px var(--bs-body-bg), 0 0 0 4px rgba(13, 110, 253, 0.5);
}

.editing-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: #dc3545;
  vertical-align: middle;
  white-space: nowrap;
}

.wizard-steps {
  gap: 0.5rem;
  margin: 0;
}

.wizard-step {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  padding: 0.5rem 0.25rem;
  border-radius: 0.5rem;
}

.wizard-step-marker {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--bs-secondary-bg-subtle);
  color: var(--bs-secondary-color);
}

.wizard-step.done .wizard-step-marker {
  background: var(--bs-success);
  color: #fff;
}

.wizard-step.current {
  background: var(--bs-primary-bg-subtle);
}

.wizard-step.current .wizard-step-marker {
  background: var(--bs-primary);
  color: #fff;
}

.wizard-step.upcoming {
  opacity: 0.55;
}

.wizard-step-label {
  font-size: 0.8rem;
  text-align: center;
  line-height: 1.2;
}

.sidebar {
  width: 250px;
}

.app-content {
  margin-left: 250px;
  min-width: 0;
}

.product-card-img {
  height: 150px;
  object-fit: cover;
}

.bottom-nav-link {
  min-height: 44px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.bottom-nav-link.active {
  color: var(--bs-primary);
}

.sidebar .nav-link.active,
.offcanvas .nav-link.active {
  color: var(--bs-primary);
}

.bottom-nav {
  height: var(--bottom-nav-height);
  padding-bottom: env(safe-area-inset-bottom); /* Clear the iOS home indicator in standalone PWA mode */
}

:root {
  --bottom-nav-height: 56px;
}

@media (min-width: 992px) { /* Bootstrap's 'lg' breakpoint */
  body {
    padding-top: 0;
  }
}

@media (max-width: 991.98px) { /* Bootstrap's 'lg' breakpoint */
  .app-content {
    margin-left: 0;
  }
  body {
    padding-bottom: calc(var(--bottom-nav-height) + env(safe-area-inset-bottom));
  }
  .fab {
    bottom: calc(var(--bottom-nav-height) + 1rem + env(safe-area-inset-bottom)); /* Keep the floating action button above the bottom nav */
  }
}

@media (min-width: 992px) { /* desktop only: ~1/3 of the viewport instead of Bootstrap's 400px */
  .offcanvas {
    --bs-offcanvas-width: 33vw;
  }

  .offcanvas-img-gallery {
    --bs-offcanvas-width: min(33vw, 480px); /* image-heavy drawer never gets absurdly wide */
  }
}

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

/* Offcanvas panels: keep the primary action visible in a footer while long bodies scroll.
   Applies to forms (form > .form-footer) and plain content (.offcanvas-body > .form-footer). */
.offcanvas-body form:has(> .form-footer),
.offcanvas-body:has(> .form-footer) {
  display: flex;
  flex-direction: column;
}

.offcanvas-body form:has(> .form-footer) {
  min-height: 100%;
}

.offcanvas-body form .form-footer,
.offcanvas-body > .form-footer {
  position: sticky;
  bottom: calc(-1 * var(--bs-offcanvas-padding-y));
  margin: auto calc(-1 * var(--bs-offcanvas-padding-x)) calc(-1 * var(--bs-offcanvas-padding-y));
  padding: var(--bs-offcanvas-padding-y) var(--bs-offcanvas-padding-x);
  background: var(--bs-body-bg);
  border-top: var(--bs-border-width) solid var(--bs-border-color);
}

/* Announcements */
.announcement-badge-pop {
  animation: announcement-badge-pop 0.25s ease-out 0.5s both;
}

@keyframes announcement-badge-pop {
  from { opacity: 0; transform: translateY(-2px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Offline navigation */
.offline-banner {
  z-index: 1080;
}

.offline-badge {
  color: var(--bs-secondary);
  font-size: 0.75em;
  vertical-align: middle;
}


.min-w-0 { min-width: 0; }

/* Keep stretched-link overlays below positioned action wrappers and dropdown menus */
.list-group-item .stretched-link::after { z-index: 0; }

/* Mobile bottom action sheet for list rows */
.action-sheet {
  --bs-offcanvas-height: auto; /* hug short sheets, but cap long ones at ~2/3 of the viewport */
}

/* Tie the vendored .offcanvas.offcanvas-bottom { max-height: 100% } (0,2,0) — application.css
   loads after bootstrap.min.css, so the equal-specificity rule wins by source order. */
.action-sheet.offcanvas-bottom {
  max-height: 66vh;
}

/* Long sheets (e.g. the bottom-nav ... menu): turn the body into a scroll container
   within the 2/3 cap. Overrides the vendored .offcanvas .offcanvas-body's
   overflow-y: visible / flex-grow: 0, which otherwise lets tall lists overflow and
   hides the close button. (Equal 0,1,1 specificity — application.css loads after
   bootstrap.min.css, so this wins.) */
.action-sheet .offcanvas-body {
  display: block;
  overflow-y: auto;
  min-height: 0;
}

@media (max-width: 991.98px) { /* Bootstrap's 'lg' breakpoint */
  .bottom-nav {
    z-index: 1050; /* stay above the sheet's backdrop so the footer menu remains usable */
  }
  .offcanvas:not(.action-sheet) {
    z-index: 1055; /* regular offcanvases sit above the bottom nav so their footers aren't hidden */
  }
  .action-sheet {
    z-index: 1060; /* above the 1055 regular offcanvases so it floats over an open results drawer */
    bottom: calc(var(--bottom-nav-height) + env(safe-area-inset-bottom)); /* plain page: clear the bottom nav */
    border-top-left-radius: 0.75rem;
    border-top-right-radius: 0.75rem;
  }
  body:has(.offcanvas.show:not(#actionSheet)) .action-sheet {
    bottom: env(safe-area-inset-bottom); /* over an open offcanvas: no nav to clear — sit flush to the screen */
  }
  .action-sheet .btn {
    justify-content: center;
  }
  [data-action-sheet-row] {
    cursor: pointer;
  }
  [data-action-sheet-row]:hover {
    background-color: var(--bs-tertiary-bg);
  }
  .market-search-status {
    overflow-wrap: anywhere; /* long Marktplaats error/searching text wraps instead of overflowing */
  }
}

@media (min-width: 992px) {
  .action-sheet {
    display: none !important; /* belt-and-braces: the sheet can never appear on desktop */
  }
}