html {
  height: auto;
  min-height: 100%;
  overflow-x: clip;
}

html body {
  height: auto;
  min-height: 100vh;
  overflow-x: clip;
  overflow-y: auto;
}

body.loading-active {
  overflow: hidden;
}

.app,
.app-wrapper,
.app-container,
.edit-card,
.container-main,
main {
  min-width: 0;
  max-width: 100%;
}

.app {
  height: auto;
  min-height: 100vh;
}

.container,
.container-fluid,
.row,
.row > *,
.card,
.hero,
.navbar-glass,
.modal-content,
.profile-card,
.scan-card,
.glass-card,
.chart-card,
.section-card,
.info-item {
  min-width: 0;
}

img,
video,
canvas,
iframe,
svg {
  max-width: 100%;
}

img {
  height: auto;
}

video {
  display: block;
  width: 100%;
}

.table-responsive,
.table-container,
.table-wrap,
[style*="overflow-x: auto"] {
  width: 100%;
  max-width: 100%;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}

.table-responsive,
.table-container,
.table-wrap {
  overflow-x: auto;
}

.modal {
  overflow-y: auto;
  overscroll-behavior-y: contain;
}

.modal-dialog {
  max-width: min(var(--bs-modal-width, 500px), calc(100vw - 1rem));
}

.modal-content {
  max-height: calc(100vh - 2rem);
  max-height: calc(100dvh - 2rem);
}

.modal-body {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
select,
textarea,
.form-control,
.form-select {
  max-width: 100%;
  min-width: 0;
}

textarea {
  overflow-wrap: anywhere;
}

button:not(.btn-close),
.btn,
.navbar-toggler,
.nav-link,
.btn-back,
.logout-btn {
  min-width: 0;
}

.dropdown-menu {
  max-width: calc(100vw - 1rem);
  overflow-wrap: anywhere;
}

@supports not (overflow-x: clip) {
  html,
  html body {
    overflow-x: hidden;
  }
}

@media (max-width: 767.98px) {
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  p,
  label,
  td,
  th,
  .card-title,
  .card-text,
  .title,
  .subtitle,
  .info-value,
  .activity-value {
    overflow-wrap: anywhere;
  }

  .app {
    padding: 20px 14px;
  }

  .app-container {
    padding: 20px 14px;
  }

  button:not(.btn-close),
  .btn,
  .navbar-toggler,
  .nav-link,
  .btn-back,
  .logout-btn {
    min-height: 44px;
  }

  input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
  select,
  textarea,
  .form-control,
  .form-select {
    font-size: 16px;
  }

  .navbar-glass {
    flex-wrap: wrap;
    row-gap: 10px;
  }

  .navbar-glass > * {
    max-width: 100%;
  }

  .title {
    min-width: 0;
    flex-wrap: wrap;
  }

  .scans-grid,
  .section-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  }

  .chart-card,
  .scan-card,
  .stats-card,
  .card-modern,
  .glass-card,
  .profile-card,
  .edit-card {
    padding: clamp(16px, 4vw, 24px);
  }

  .modal-dialog {
    margin: 0.75rem auto;
  }

  .modal-content {
    max-height: calc(100vh - 1.5rem);
    max-height: calc(100dvh - 1.5rem);
  }
}

@media (max-width: 991.98px) {
  .navbar-glass .navbar-toggler {
    min-width: 44px;
    min-height: 44px;
  }

  .navbar-glass .navbar-toggler-icon {
    filter: invert(1);
  }
}

@media (max-width: 575.98px) {
  html body {
    min-height: 100vh;
  }

  .navbar-glass {
    padding: 10px 12px;
  }

  .navbar-glass .logo {
    max-width: 44px;
  }

  .hero {
    gap: 12px;
    padding: 16px;
  }

  .title {
    font-size: clamp(1.25rem, 6vw, 1.75rem);
  }

  .modal-dialog {
    margin: 0.5rem auto;
  }

  .modal-content {
    max-height: calc(100vh - 1rem);
    max-height: calc(100dvh - 1rem);
  }

  .register-card,
  .login-card,
  .verification-card,
  .edit-card {
    padding: 20px 16px;
  }

  .login-card {
    width: calc(100% - 24px);
  }

  .login-card .pin-container {
    gap: 4px;
  }

  .login-card form .row,
  .register-card form .row {
    margin-inline: 0;
  }

  .login-card .pin-input {
    flex: 1 1 0;
    width: 0;
    min-width: 0;
    max-width: 45px;
  }

  html[data-theme] body {
    padding-bottom: calc(4.5rem + env(safe-area-inset-bottom));
  }
}

@media (min-width: 768px) and (max-width: 1024px) {
  .app,
  .app-container,
  .container-main {
    padding-left: 20px;
    padding-right: 20px;
  }

  .scans-grid,
  .section-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 380px) {
  .register-card .row.g-2 > [class*="col-"] {
    flex: 0 0 100%;
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}