/* Shared responsive safeguards for interactive SAFE-PCB pages. */
html {
  width: 100% !important;
  max-width: 100% !important;
  -webkit-text-size-adjust: 100%;
}

body {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  overflow-x: auto !important;
}

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

img,
video {
  height: auto;
}

input,
select,
textarea,
button {
  max-width: 100%;
  box-sizing: border-box;
}

textarea,
pre,
code,
.message,
.comment,
.description {
  overflow-wrap: anywhere;
  word-break: break-word;
}

.container,
.page,
.content,
.main,
.main-content,
.workspace,
.panel,
.card,
.left-pane,
.right-pane,
.sidebar {
  min-width: 0;
  max-width: 100%;
}

.modal-dialog,
.modal-content,
.popup-content,
.dialog-content,
.spcb-modal__dialog,
.co-dialog,
.stackup-modal {
  max-width: calc(100vw - 20px) !important;
  max-height: calc(100vh - 20px);
  box-sizing: border-box;
}

.modal-body,
.popup-body,
.dialog-body,
.spcb-modal__body,
.co-body {
  min-width: 0;
  max-width: 100%;
  overflow: auto;
}

.table-responsive {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;
}

@media (max-width: 1100px) {
  .page,
  .app,
  .grid,
  .main,
  .main-content,
  .workspace,
  .content {
    height: auto !important;
    min-height: 0;
  }

  .grid,
  .main-grid,
  .layout,
  .layout-wrap,
  .content-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .topbar,
  .navbar,
  .toolbar,
  .actions,
  .button-row,
  .filter-row,
  .search-row,
  .header-actions,
  .modal-footer {
    flex-wrap: wrap !important;
  }

  .modal-dialog,
  .modal-content,
  .popup-content,
  .dialog-content,
  .spcb-modal__dialog,
  .co-dialog,
  .stackup-modal {
    width: min(96vw, 1200px) !important;
  }
}

@media (max-width: 760px) {
  html,
  body {
    min-height: 100% !important;
  }

  .page,
  .app,
  .main,
  .main-content,
  .workspace,
  .content {
    height: auto !important;
    min-height: 0;
  }

  .grid,
  .main-grid,
  .layout,
  .layout-wrap,
  .content-grid,
  .action-row,
  .bottom-bar,
  .kv .row,
  .kv .two {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  [style*="display:grid"],
  [style*="display: grid"] {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  [style*="display:flex"],
  [style*="display: flex"] {
    flex-wrap: wrap !important;
  }

  .sidebar,
  .left-area,
  .right-area,
  .left-panel,
  .right-panel,
  .left-pane,
  .right-pane {
    width: 100% !important;
    max-width: 100% !important;
  }

  body {
    font-size: clamp(12px, 3.4vw, 16px);
  }

  table {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    border-collapse: collapse;
    -webkit-overflow-scrolling: touch;
  }

  .topbar,
  .navbar,
  .toolbar,
  .actions,
  .button-row,
  .filter-row,
  .search-row,
  .header-actions,
  .modal-header,
  .modal-footer {
    gap: 8px !important;
  }

  .modal-backdrop,
  .modal-overlay,
  .popup-overlay,
  .stackup-modal-overlay {
    align-items: flex-start !important;
    overflow-y: auto;
    padding: 10px;
  }

  .modal-dialog,
  .modal-content,
  .popup-content,
  .dialog-content,
  .spcb-modal__dialog,
  .co-dialog,
  .stackup-modal {
    width: 100% !important;
    max-width: 100% !important;
    max-height: calc(100vh - 20px) !important;
    margin: 0 auto !important;
  }

  .modal-footer > button,
  .actions > button,
  .button-row > button {
    min-height: 36px;
  }
}

@media (max-width: 480px) {
  .modal-footer > button,
  .actions > button,
  .button-row > button {
    flex: 1 1 auto;
  }
}