@media (max-width: 900px) {
  :root{
    --m-green:#1f6f54;
    --m-red:#c0392b;
    --m-blue:#2980b9;
    --m-radius:10px;
  }

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

  html, body {
    width: 100%;
    max-width: 100vw;
    overflow-x: hidden;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }

  body {
    padding: 12px !important;
    padding-bottom: 72px !important;
    margin: 0;
  }

  table,
  form,
  .box,
  .card,
  .actions,
  .filters,
  .search,
  .pagination {
    max-width: 100vw !important;
    width: 100% !important;
  }

  h1 { font-size: 1.8rem !important; line-height: 1.2; }
  h2 { font-size: 1.4rem !important; line-height: 1.25; }

  .actions,
  .top-links,
  .filters,
  .search,
  .pagination,
  .row-form,
  .actions-cell {
    display: flex !important;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
  }

  .pagination {
    justify-content: center !important;
    width: 100% !important;
    padding-left: 52px !important;
    padding-right: 52px !important;
    padding-bottom: 8px !important;
    box-sizing: border-box;
  }

  .pagination a,
  .pagination button {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
  }

  .actions a,
  .top-links a,
  button,
  .btn,
  .btn-action {
    min-height: 40px;
    border-radius: var(--m-radius);
    font-weight: 700;
  }

  form,
  .box,
  .card {
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box;
  }

  input,
  select,
  textarea {
    width: 100% !important;
    box-sizing: border-box;
    font-size: 16px !important;
  }

  button,
  .btn,
  .btn-action {
    font-size: 16px !important;
  }

  .btn-save,
  .save,
  .restore {
    background: var(--m-green);
    color: #fff;
  }

  .btn-delete,
  .destroy,
  .btn-delete-forever {
    background: var(--m-red);
    color: #fff;
  }

  .btn-reset {
    background: var(--m-blue);
    color: #fff;
  }

  table {
    width: 100% !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
  }

  table,
  tbody {
    background: transparent !important;
  }

  thead {
    display: none !important;
  }

  tbody,
  tr,
  td {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box;
  }

  tr:not(.row-photo) {
    background: #fff;
    margin-bottom: 10px;
    border: 1px solid #ddd;
    border-radius: 10px;
    overflow: hidden;
  }

  tbody tr:last-child {
    margin-bottom: 0 !important;
  }

  .row-photo {
    display: none !important;
  }

  .row-photo.mobile-open {
    display: block !important;
    margin-top: -10px;
    margin-bottom: 10px;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    overflow: hidden;
    position: relative;
    z-index: 0;
  }

  .row-photo.mobile-open td {
    border-bottom: 0 !important;
  }

  .row-main.photo-open {
    position: relative;
    z-index: 2;
    margin-bottom: 0 !important;
  }

  td {
    padding: 8px 10px !important;
    font-size: 14px !important;
    text-align: left !important;
    white-space: normal !important;
    word-break: break-word;
    overflow-wrap: anywhere;
    border-bottom: 1px solid #eee !important;
  }

  tr td:last-child {
    border-bottom: 0 !important;
  }

  .sections {
    grid-template-columns: 1fr !important;
  }

}