/* =========================================================
   USBF MODULE LIST / FORM
========================================================= */

/* =========================================================
   MODULE WIDTH FIX
========================================================= */

.us-module-pages {
  position: relative;
  display: grid;

  width: 100%;
  min-width: 0;

  overflow: hidden;
}

.us-module-page {
  grid-column: 1;
  grid-row: 1;

  width: 100%;
  min-width: 0;

  transition:
    transform 0.28s cubic-bezier(0.22, 0.61, 0.36, 1),
    opacity 0.2s ease;
}

/* =========================================================
   TABLE RESPONSIVE
========================================================= */

.us-module-page .table-responsive {
  width: 100%;
  max-width: 100%;

  overflow-x: auto;
  overflow-y: hidden;

  -webkit-overflow-scrolling: touch;
}

/* =========================================================
   TABLE
========================================================= */

.us-module-page .table-responsive table {
  width: 100%;
  min-width: 650px;
}

/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 576px) {
  .us-module-page .card {
    width: 100%;
    min-width: 0;
  }

  .us-module-page .card-body {
    min-width: 0;
  }
}
/* =========================================================
   LIST
========================================================= */

.us-module-list {
  transform: translateX(0);
  opacity: 1;
}

/* =========================================================
   FORM
========================================================= */

.us-module-form {
  transform: translateX(100%);
  opacity: 0;
}

/* =========================================================
   SHOW FORM
========================================================= */

.us-module-pages.show-form .us-module-list {
  transform: translateX(-100%);

  opacity: 0;
}

.us-module-pages.show-form .us-module-form {
  transform: translateX(0);

  opacity: 1;
}

/* =========================================================
   FORM HEADER
========================================================= */

.us-module-form-header {
  display: flex;

  align-items: center;

  gap: 10px;

  margin-bottom: 18px;
}

.us-module-form-back {
  width: 34px;
  height: 34px;

  display: inline-flex;

  align-items: center;
  justify-content: center;

  padding: 0;

  border: 1px solid var(--app-border);

  border-radius: 7px;

  background: var(--app-surface);

  color: var(--app-text);

  cursor: pointer;
}

.us-module-form-back:hover {
  background: var(--app-hover);
}

/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 576px) {
  .us-module-page {
    transition-duration: 0.24s;
  }
}
/* =========================================================
   USBF IOS-STYLE PAGE TRANSITION
========================================================= */

@keyframes usPageEnter {
  from {
    opacity: 0.65;
    transform: translate3d(16px, 0, 0);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

body.module-body {
  animation: none;
}

/* Animate page content only */
body.module-body .container {
  animation: usPageEnter 280ms cubic-bezier(0.22, 1, 0.36, 1) both;

  backface-visibility: hidden;
}

/* Avoid animation when navigating with reduced motion */
@media (prefers-reduced-motion: reduce) {
  body.module-body .container {
    animation: none;
  }
}