html,
body,
#root {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  overflow-x: hidden !important;
}

*,
*::before,
*::after {
  box-sizing: border-box !important;
}

.main-content,
.page-content,
.app-content,
.content,
.dashboard-page,
.table-page,
.table-view,
.table-panel,
[data-table-id] {
  max-width: 100% !important;
  min-width: 0 !important;
}

.table-panel,
[data-table-id] {
  width: 100% !important;
  overflow: hidden !important;
}

.table-toolbar,
.table-header,
.table-actions,
[class*="toolbar"],
[class*="table"][class*="header"],
[class*="table"][class*="actions"] {
  max-width: 100% !important;
  min-width: 0 !important;
  flex-wrap: wrap !important;
}

.table-toolbar > *,
.table-header > *,
.table-actions > *,
[class*="toolbar"] > * {
  min-width: 0 !important;
}

.table-scroll,
[class*="table"][class*="scroll"] {
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: auto !important;
  overflow-y: auto !important;
}

.table-scroll table,
[class*="table"][class*="scroll"] table {
  width: max-content !important;
  min-width: 100% !important;
  table-layout: auto !important;
}

.table-scroll th,
.table-scroll td,
[class*="table"][class*="scroll"] th,
[class*="table"][class*="scroll"] td {
  max-width: none !important;
}

@media (max-width: 1200px) {
  .table-panel,
  [data-table-id] {
    border-radius: 18px !important;
  }

  .table-toolbar,
  .table-header,
  .table-actions,
  [class*="toolbar"],
  [class*="table"][class*="header"],
  [class*="table"][class*="actions"] {
    gap: 10px !important;
  }
}

@media (max-width: 768px) {
  .table-panel,
  [data-table-id] {
    border-radius: 14px !important;
  }

  button,
  select,
  input {
    max-width: 100% !important;
  }

  .table-toolbar,
  .table-header,
  .table-actions,
  [class*="toolbar"],
  [class*="table"][class*="header"],
  [class*="table"][class*="actions"] {
    align-items: stretch !important;
  }
}