.layout-app .app-shell {
  width: 100%;
  min-width: 0;
}

.layout-app .app-main {
  width: 100%;
  min-width: 0;
}

.layout-app .app-header {
  gap: 10px;
  padding-left: clamp(10px, 2.8vw, 18px);
  padding-right: clamp(10px, 2.8vw, 18px);
}

.layout-app .app-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.layout-app .app-content {
  width: 100%;
  padding-left: clamp(10px, 2.6vw, 20px);
  padding-right: clamp(10px, 2.6vw, 20px);
  box-sizing: border-box;
}

.layout-app .app-content > .container {
  max-width: min(1200px, 100%);
  margin: 0 auto;
  padding: 0;
  width: 100%;
}

.layout-app .card {
  width: 100%;
  overflow: hidden;
}

.layout-app .card > * {
  max-width: 100%;
}

.layout-app .card p,
.layout-app .card li,
.layout-app .card label,
.layout-app .card h2,
.layout-app .card h3,
.layout-app .card h4,
.layout-app .card h5,
.layout-app .card h6 {
  word-break: break-word;
}

.layout-app .btn,
.layout-app input,
.layout-app select,
.layout-app textarea {
  max-width: 100%;
}

.layout-app table.table {
  width: 100%;
  /* display: block; */
  overflow-x: auto;
  white-space: nowrap;
}

.layout-app .table-responsive {
  width: 100%;
  overflow-x: auto;
}

.layout-app .app-top-nav {
  row-gap: 6px;
  align-items: stretch;
}

@media (max-width: 992px) {
  .layout-app .app-header {
    align-items: flex-start;
  }

  .layout-app .app-header-actions {
    width: 100%;
    justify-content: flex-end;
    margin-left: auto;
  }

  .layout-app .app-header-actions form {
    width: 100%;
    justify-content: flex-end;
  }

  .layout-app .app-header-actions select,
  .layout-app .app-header-actions .btn {
    width: min(100%, 200px);
  }
}

@media (max-width: 768px) {
  .layout-app .app-content {
    padding-top: 16px;
  }

  .layout-app .app-content > .container {
    width: 100%;
  }

  .layout-app .app-top-nav .nav-trigger {
    width: 100%;
  }

  .layout-app .app-top-nav .nav-dropdown .dropdown-menu {
    position: static;
    width: 100%;
  }

  .layout-app .app-top-nav .nav-dropdown {
    width: 100%;
  }
}

@media (max-width: 480px) {
  .layout-app .app-header {
    padding-top: 10px;
    padding-bottom: 10px;
  }

  .layout-app .mobile-menu-toggle {
    width: 34px;
    height: 34px;
    font-size: 18px;
  }

  .layout-app .app-header-actions {
    gap: 6px;
  }

  .layout-app .app-header-actions select,
  .layout-app .app-header-actions .btn {
    width: 100%;
  }
}