/* ---------------------------------------------------------------------
   Password reveal toggle — pin it to the right edge of the cell instead
   of letting it drift based on how long the visible value is (a 4-digit
   PIN and a 12-character password shouldn't put the eye icon in two
   different places).
--------------------------------------------------------------------- */
.password-cell{ justify-content: space-between; min-width: 92px; }
.password-reveal-btn{ margin-left: auto; flex-shrink: 0; }

@media screen and (max-width: 880px){
  .filterbar input, .filterbar select{ min-width: 120px; flex: 1 1 140px; }
  .field-row{ grid-template-columns: 1fr; }
  .grid-panel{ margin: 0 10px; }
  .grid-footer{ flex-direction: column; align-items: stretch; }
  .grid-footer-right{ justify-content: flex-end; flex-wrap: wrap; }

  /* Stacked-card table: hide the header row and lay out each <td> as a
     label/value pair. Cells with no data-label (checkbox, actions) opt
     out — an empty ::before still counts as a flex item, and pairing it
     with justify-content: space-between pushes those cells' contents
     off to the right for no reason. */
  thead{ display: none; }
  table, tbody, tr, td{ display: block; width: 100%; }
  tbody tr{ padding: 10px 14px; border-bottom: 1px solid var(--border); }

  tbody td[data-label]{
    border: none; padding: 4px 0; display: flex;
    justify-content: space-between; align-items: center; gap: 10px;
  }
  tbody td[data-label]::before{
    content: attr(data-label); font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.06em;
    color: var(--ink-faint); font-weight: 600; flex-shrink: 0;
  }

  td.checkbox-col{
    border: none; padding: 4px 0 8px; display: flex; align-items: center; justify-content: flex-start;
  }
  .row-actions{ justify-content: flex-start; }

  .report-stats{ grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); }
}