/* /connect/admin/views/roles.css — Roles & Permissions responsive styles v1
 *
 * Focus: the Role Matrix, which has ~11 capability columns plus Role/Rank.
 *   - Wide screens: horizontal scroll wrapper with a sticky first column.
 *   - <=767px:    each role becomes a card with labeled capability toggles
 *                 and 44px touch targets.
 * Requires the shared admin/table tokens.
 * ─────────────────────────────────────────────────────────────────── */

/* ================================================================
   ROLE MATRIX
=============================================================== */
.rladm-matrix-card { padding: 0; overflow: hidden; }

.rladm-matrix-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Keep columns readable; the wrapper scrolls when they do not fit. */
.rladm-matrix-table { min-width: 820px; }

.rladm-matrix-table th.rladm-cap-head { text-align: center; white-space: nowrap; }

.rladm-matrix-table td.rladm-col-role {
  font-weight: 600;
  color:     var(--bcc-ink);
  white-space: nowrap;
}

.rladm-matrix-table tbody td.rladm-col-rank { color: var(--bcc-ink-3); }

/* Sticky first column while the matrix scrolls sideways */
.rladm-matrix-table th.rladm-col-role,
.rladm-matrix-table td.rladm-col-role {
  position:  sticky;
  left:      0;
  z-index:   2;
  background: var(--bcc-surface-1);
}
.rladm-matrix-table thead th.rladm-col-role { z-index: 4; }
.rladm-matrix-table tbody tr:hover td.rladm-col-role { background: var(--bcc-surface-2); }
.rladm-matrix-table th.rladm-col-role::after {
  content:    '';
  position:   absolute;
  top:        0;
  right:      0;
  bottom:     0;
  width:      1px;
  background: var(--bcc-border);
}

.rladm-cap-cell { text-align: center; }

.rladm-cap-toggle {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  gap:             var(--bcc-s2);
  cursor:          pointer;
}

.rladm-cap-cb {
  width:        20px;
  height:       20px;
  cursor:       pointer;
  accent-color: var(--bcc-primary);
  flex-shrink:  0;
}

/* The per-column header already names the capability on desktop. */
.rladm-cap-name { display: none; }

.rladm-del-role-btn { min-width: 32px; min-height: 32px; }

/* ================================================================
   MOBILE — CARD LAYOUT (<=767px)
=============================================================== */
@media (max-width: 767px) {
  .rladm-matrix-scroll { overflow: visible; }
  .rladm-matrix-table { min-width: 0; }

  .rladm-matrix-table thead { display: none; }
  .rladm-matrix-table,
  .rladm-matrix-table tbody,
  .rladm-matrix-table tr,
  .rladm-matrix-table td { display: block; width: 100%; }

  .rladm-matrix-table tr {
    background:    var(--bcc-surface-1);
    border:        1px solid var(--bcc-border);
    border-radius: var(--bcc-r-md);
    padding:       var(--bcc-s3) var(--bcc-s4);
    margin-bottom: var(--bcc-s3);
  }

  .rladm-matrix-table td.rladm-col-role {
    position:      static;
    font-size:     var(--bcc-t-md);
    font-weight:   700;
    padding:       0 0 var(--bcc-s1);
  }
  .rladm-matrix-table td.rladm-col-role::after { content: none; }

  .rladm-matrix-table td.rladm-col-rank {
    font-size:     var(--bcc-t-xs);
    padding:       0 0 var(--bcc-s2);
    margin-bottom: var(--bcc-s2);
    border-bottom: 1px solid var(--bcc-border);
  }
  .rladm-matrix-table td.rladm-col-rank::before {
    content: 'Rank ';
    text-transform: uppercase;
    letter-spacing: .05em;
    font-weight: 600;
  }

  .rladm-matrix-table td.rladm-cap-cell { text-align: left; padding: 0; }

  .rladm-matrix-table td.rladm-cap-cell .rladm-cap-toggle {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    width:           100%;
    gap:             var(--bcc-s3);
    min-height:      44px;
    padding:         var(--bcc-s1) 0;
    border-bottom:   1px solid var(--bcc-border);
  }

  .rladm-cap-name {
    display:     inline;
    font-size:   var(--bcc-t-sm);
    color:       var(--bcc-ink-2);
    font-weight: 500;
  }

  .rladm-cap-cb { width: 28px; height: 28px; }

  .rladm-matrix-table td.rladm-cap-actions {
    display:         flex;
    justify-content: flex-end;
    padding-top:     var(--bcc-s2);
  }
  .rladm-del-role-btn { min-width: 44px; min-height: 44px; }
}

/* ================================================================
   STAFF ROSTER + AUDIT
=============================================================== */
.rladm-add-results { -webkit-overflow-scrolling: touch; }

@media (max-width: 767px) {
  .rladm-change-role-btn,
  .rladm-remove-staff-btn,
  .rladm-audit-view-btn { min-height: 44px; }
}