/*
 * X MultiUser Panel global responsive layout
 * Desktop keeps normal Ant Design tables. On phones/tablets, every regular
 * table becomes a vertical record card so pages never require horizontal drag.
 */
#content-layout,
#content-layout > .ant-layout-content,
.ant-layout-content,
.ant-card,
.ant-tabs,
.ant-collapse,
.ant-form,
.ant-table-wrapper {
  min-width: 0;
  max-width: 100%;
}

@media (max-width: 900px) {
  #content-layout > .ant-layout-content {
    padding: 8px !important;
    margin: 0 !important;
  }

  .ant-card,
  .ant-tabs {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .ant-card-body,
  .ant-tabs-content,
  .ant-collapse-content-box {
    min-width: 0;
  }

  /* Grid/form blocks become a single readable column on narrow screens. */
  .ant-row > [class*="ant-col-"] {
    float: none !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
  }

  .ant-form-inline .ant-form-item,
  .ant-form-inline .ant-form-item-control-wrapper,
  .ant-form-inline .ant-form-item-children,
  .ant-form-item-control-wrapper {
    max-width: 100%;
  }

  .ant-form-inline .ant-input,
  .ant-form-inline .ant-select,
  .ant-form-inline .ant-input-number,
  .ant-form-inline .ant-input-password {
    width: 100% !important;
  }

  .ant-page-header-heading,
  .ant-page-header-heading-left,
  .ant-page-header-heading-extra,
  .ant-card-extra,
  .ant-card-head-wrapper {
    flex-wrap: wrap !important;
    min-width: 0;
  }

  .ant-card-extra {
    margin-left: 0 !important;
    padding-top: 0 !important;
  }

  .ant-space,
  .ant-btn-group {
    max-width: 100%;
  }

  .ant-alert-message,
  .ant-alert-description,
  .ant-tag,
  .ant-typography,
  pre,
  code {
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  /* Ant fixed-column clones are desktop-only. Keeping them on a stacked table
     produces duplicate cells on mobile, so the normal table is authoritative. */
  .ant-table-fixed-left,
  .ant-table-fixed-right {
    display: none !important;
  }

  .ant-table-wrapper,
  .ant-table-wrapper .ant-table,
  .ant-table-wrapper .ant-table-content,
  .ant-table-wrapper .ant-table-scroll,
  .ant-table-wrapper .ant-table-body {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: visible !important;
  }

  .ant-table-wrapper .ant-table table,
  .ant-table-wrapper .ant-table-fixed {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    table-layout: auto !important;
  }

  /* Keep the header available to accessibility/JS, but remove it visually. */
  .ant-table-wrapper .ant-table-thead {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: -1px !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
    border: 0 !important;
  }

  .ant-table-wrapper .ant-table-tbody {
    display: block !important;
    width: 100% !important;
  }

  .ant-table-wrapper .ant-table-tbody > tr:not(.ant-table-expanded-row) {
    display: block !important;
    width: 100% !important;
    margin: 0 0 10px !important;
    overflow: hidden;
    background: #fff;
    border: 1px solid #e7ebf0;
    border-radius: 12px;
    box-shadow: 0 3px 12px rgba(24, 51, 82, .045);
  }

  .ant-table-wrapper .ant-table-tbody > tr:not(.ant-table-expanded-row) > td {
    display: grid !important;
    grid-template-columns: minmax(92px, 31%) minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: auto !important;
    padding: 9px 10px !important;
    white-space: normal !important;
    overflow: visible !important;
    text-align: left !important;
    border: 0 !important;
    border-bottom: 1px solid #edf0f4 !important;
  }

  .ant-table-wrapper .ant-table-tbody > tr:not(.ant-table-expanded-row) > td:last-child {
    border-bottom: 0 !important;
  }

  .ant-table-wrapper .ant-table-tbody > tr:not(.ant-table-expanded-row) > td::before {
    content: attr(data-mobile-label);
    display: block;
    min-width: 0;
    color: #617187;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.35;
    white-space: normal;
  }

  .ant-table-wrapper .ant-table-tbody > tr:not(.ant-table-expanded-row) > td:not([data-mobile-label]),
  .ant-table-wrapper .ant-table-tbody > tr:not(.ant-table-expanded-row) > td[data-mobile-label=""] {
    grid-template-columns: minmax(0, 1fr);
  }

  .ant-table-wrapper .ant-table-tbody > tr:not(.ant-table-expanded-row) > td:not([data-mobile-label])::before,
  .ant-table-wrapper .ant-table-tbody > tr:not(.ant-table-expanded-row) > td[data-mobile-label=""]::before {
    display: none;
  }

  .ant-table-wrapper .ant-table-tbody > tr.ant-table-expanded-row {
    display: block !important;
    width: 100% !important;
    margin: -6px 0 10px !important;
  }

  .ant-table-wrapper .ant-table-tbody > tr.ant-table-expanded-row > td {
    display: block !important;
    width: 100% !important;
    padding: 8px !important;
  }

  .ant-table-wrapper td .ant-btn + .ant-btn {
    margin-left: 4px;
  }

  .ant-table-wrapper td .ant-space,
  .ant-table-wrapper td [class*="actions"],
  .ant-table-wrapper td [class*="Actions"] {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 5px !important;
    min-width: 0;
  }

  .ant-table-pagination.ant-pagination {
    float: none !important;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: 12px 0 4px !important;
  }

  /* Descriptions are tables too, but semantic label/value blocks are clearer
     than horizontal scrolling on a phone. */
  .ant-descriptions-view {
    overflow-x: visible !important;
  }
  .ant-descriptions-view table,
  .ant-descriptions-row,
  .ant-descriptions-item {
    width: 100% !important;
  }

  body.dark .ant-table-wrapper .ant-table-tbody > tr:not(.ant-table-expanded-row),
  html[data-theme="ultra-dark"] body .ant-table-wrapper .ant-table-tbody > tr:not(.ant-table-expanded-row) {
    background: var(--dark-color-surface-100) !important;
    border-color: var(--dark-color-surface-300) !important;
    box-shadow: none;
  }

  body.dark .ant-table-wrapper .ant-table-tbody > tr:not(.ant-table-expanded-row) > td,
  html[data-theme="ultra-dark"] body .ant-table-wrapper .ant-table-tbody > tr:not(.ant-table-expanded-row) > td {
    border-bottom-color: var(--dark-color-surface-300) !important;
  }

  body.dark .ant-table-wrapper .ant-table-tbody > tr:not(.ant-table-expanded-row) > td::before,
  html[data-theme="ultra-dark"] body .ant-table-wrapper .ant-table-tbody > tr:not(.ant-table-expanded-row) > td::before {
    color: #aebed3;
  }
}

@media (max-width: 520px) {
  .ant-table-wrapper .ant-table-tbody > tr:not(.ant-table-expanded-row) > td {
    grid-template-columns: minmax(78px, 29%) minmax(0, 1fr);
    padding: 8px 9px !important;
    gap: 8px;
  }

  .ant-btn {
    max-width: 100%;
  }
}