/* Responsive compatibility layer for legacy OSS pages.
   It intentionally overrides common fixed-width patterns without changing page logic. */
* {
  box-sizing: border-box;
}

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

.app-container,
.mapContainer {
  max-width: 100%;
  overflow-x: hidden;
}

.table,
table {
  max-width: 100%;
}

.search-container {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.search-container > * {
  margin-top: 4px;
  margin-bottom: 4px;
}

@media screen and (max-width: 768px) {
  body {
    min-width: 0 !important;
    overflow-x: hidden;
  }

  .app-container,
  .mapContainer,
  .container-layout,
  .sceneList-info,
  .box,
  .box-white,
  .join-device-box,
  .info-container,
  .data-container,
  .main-container {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .box,
  .box-white,
  .join-device-box {
    margin: 0 !important;
    padding: 10px !important;
  }

  .clearfix[style],
  .form-line[style],
  .float-left[style],
  .float-right[style] {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .float-left,
  .float-right {
    float: none !important;
  }

  .input,
  .input-big,
  .input-select,
  .input-self,
  input,
  select,
  textarea,
  button {
    max-width: 100% !important;
  }

  .input,
  .input-big,
  .input-select,
  input[type="text"],
  input[type="password"],
  input[type="number"],
  select,
  textarea {
    width: 100% !important;
  }

  .button,
  button {
    min-height: 36px;
    white-space: normal;
  }

  .search-container {
    display: block;
    padding: 10px;
  }

  .search-container .button,
  .search-container button {
    width: 100%;
    margin: 4px 0 !important;
  }

  .lpro-table,
  .table-container,
  .table-responsive,
  .jui-table,
  #init-table,
  .dataTables_wrapper {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  #init-table table,
  .layui-table {
    max-width: none !important;
  }

  .lpro-table table,
  .jui-table table,
  .table-container table {
    min-width: 720px;
  }

  .p-title {
    padding: 12px 0 !important;
    font-size: 16px !important;
  }

  .dowebok li,
  ul.dowebok li {
    display: block !important;
    margin: 6px 0 !important;
  }
}

@media screen and (max-width: 480px) {
  .layui-layer,
  .layui-layer-page,
  .el-dialog {
    width: 94vw !important;
    max-width: 94vw !important;
    left: 3vw !important;
  }

  .form-line {
    margin-bottom: 8px;
  }
}