/* HTMX route swaps: hide main until late-injected stylesheets + fonts settle (stops visible Bootstrap→theme flash). */
#tv-main-content {
  transition: opacity 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}

#tv-main-content.tv-main--swap-pending {
  opacity: 0;
  pointer-events: none;
  /* Instant hide during HTMX swap — avoids overlapping fade with the page loader */
  transition: none;
}

@media (prefers-reduced-motion: reduce) {
  #tv-main-content {
    transition: none;
  }
}

html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.tv-theme .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem var(--tv-surface), 0 0 0 0.25rem var(--tv-primary-soft);
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 0;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
  color: var(--tv-text-hint);
  text-align: end;
  transition: opacity 0.2s ease;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
  text-align: start;
  opacity: 0.5;
}

/* Smooth scroll behavior for all app pages */
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

/* Default image when catalog/vendor/device has no photo (RTL-friendly, no text) */
.tv-img-placeholder {
  object-fit: contain;
  opacity: 0.95;
}

.tv-img-placeholder--thumb {
  width: 48px;
  height: 48px;
}

.tv-img-placeholder--preview {
  max-height: 200px;
  max-width: 100%;
  width: auto;
  height: auto;
}

.tv-device-image-preview-wrap .tv-img-placeholder--preview {
  display: block;
  margin: 0 auto;
}