/* ===========================================================================
   mobile-v6.css — final site-wide mobile responsiveness pass (loads LAST).
   Nothing here changes the desktop layout: every rule is inside a max-width
   media query. It guarantees that no page can overflow horizontally, that
   tables scroll instead of clipping, and that forms/buttons stay tappable.
   ========================================================================= */

@media (max-width: 1024px) {
  .card,
  .panel,
  .box {
    min-width: 0;
  }
  .filter-grid,
  .form-grid,
  .grid-2,
  .grid-3,
  .grid-4,
  .stats-grid,
  .cert-grid,
  .cards-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)) !important;
  }
}

@media (max-width: 820px) {
  html {
    -webkit-text-size-adjust: 100%;
  }
  html,
  body {
    max-width: 100%;
    overflow-x: hidden;
  }

  /* Nothing may push the page sideways. */
  img,
  video,
  canvas,
  iframe,
  svg,
  table,
  pre {
    max-width: 100%;
  }
  img,
  video,
  canvas,
  svg {
    height: auto;
  }
  iframe {
    width: 100% !important;
  }
  pre,
  code {
    overflow-x: auto;
    white-space: pre-wrap;
    word-break: break-word;
  }

  .content,
  main,
  .app,
  .wrap,
  .container {
    min-width: 0;
    max-width: 100%;
  }
  .content {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
  .card,
  .panel {
    padding: 14px !important;
    border-radius: 14px;
  }

  /* Any wide table gets a horizontal scroller instead of being cut off. */
  .table-wrap,
  .table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  table {
    width: 100%;
  }

  /* Forms + buttons: full width, no iOS zoom on focus. */
  input,
  select,
  textarea,
  button,
  .btn {
    max-width: 100%;
    font-size: 16px;
  }
  input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
  select,
  textarea {
    width: 100%;
  }
  .btn,
  button {
    min-height: 42px;
  }
  .btn.small {
    min-height: 34px;
  }

  /* Toolbars / action rows wrap instead of overflowing. */
  .toolbar,
  .actions,
  .row-actions,
  .rs-toolbar,
  .page-head,
  .card-head,
  .flex-between {
    flex-wrap: wrap !important;
    gap: 8px;
  }

  /* Long words (emails, references, URLs) never break the layout. */
  h1,
  h2,
  h3,
  h4,
  p,
  td,
  th,
  li,
  .badge,
  .stat-value {
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  h1 {
    font-size: 1.5rem;
  }
  h2 {
    font-size: 1.25rem;
  }
  h3 {
    font-size: 1.05rem;
  }
}

@media (max-width: 560px) {
  .content {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  /* Stacked, label-driven rows for tables marked data-stack. */
  table[data-stack] thead {
    display: none;
  }
  table[data-stack],
  table[data-stack] tbody,
  table[data-stack] tfoot,
  table[data-stack] tr,
  table[data-stack] td {
    display: block;
    width: 100%;
  }
  table[data-stack] tr {
    border: 1px solid rgba(120, 130, 150, 0.28);
    border-radius: 12px;
    margin-bottom: 10px;
    overflow: hidden;
  }
  table[data-stack] td {
    border: 0;
    border-bottom: 1px solid rgba(120, 130, 150, 0.18);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    text-align: right;
    padding: 8px 11px;
  }
  table[data-stack] td:last-child {
    border-bottom: 0;
  }
  table[data-stack] td::before {
    content: attr(data-label);
    font-size: 0.66rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 800;
    opacity: 0.72;
    text-align: left;
  }
  table[data-stack] td:empty {
    display: none;
  }

  /* Single-column stacking for every remaining grid. */
  .filter-grid,
  .form-grid,
  .grid-2,
  .grid-3,
  .grid-4,
  .stats-grid,
  .cert-grid,
  .cards-grid {
    grid-template-columns: 1fr !important;
  }

  .btn,
  button[type="submit"] {
    width: 100%;
  }
  .rs-toolbar .btn,
  .btn.small,
  .badge,
  .pagination .btn {
    width: auto;
  }
}