/* MEZOLA v27: compact mobile layouts without horizontal table scrolling.
   Desktop is untouched; no changes to rights, DB schema, PHP write operations. */
@media (max-width:900px) {
  .staffContainer, .staffList, .staffEditor, .staffForm, .staffFields,
  .staffPhotoUpload, .staffPhotoField, .rightsGroups, .branchGrid {min-width:0;max-width:100%;}
  .staffTableWrap {overflow:visible!important;min-width:0;width:100%;}
  .staffTable, .staffTable.branchTable {display:block;min-width:0!important;width:100%;border-collapse:separate;}
  .staffTable thead {display:none;}
  .staffTable tbody {display:flex;flex-direction:column;gap:12px;padding:12px;min-width:0;}
  .staffTable tbody tr {display:block;min-width:0;overflow:hidden;border:1px solid var(--work-border,#d3e5ee);border-radius:12px;}
  .staffTable tbody td,
  .staffTable tbody td:last-child {display:grid;grid-template-columns:minmax(85px,36%) minmax(0,1fr);align-items:center;gap:12px;min-width:0;min-height:43px;
    padding:11px 13px;text-align:left;border-top:1px solid #dbe9f1;line-height:1.45;
    overflow-wrap:anywhere;word-break:normal;}
  .staffTable tbody td:first-child {border-top:0;}
  .staffTable tbody td::before {content:attr(data-label);font-size:12px;font-weight:650;color:#687e8b;min-width:0;}
  .staffTable tbody tr td {background:#f6fafc!important;}
  .staffTable tbody tr:nth-child(odd) td {background:var(--work-stripe,#f2f8fc)!important;}
  .staffTable tbody td[data-label=""] {display:flex;justify-content:flex-end;align-items:center;gap:0;padding:11px 13px;}
  .staffTable tbody td[data-label=""]::before {display:none;}
  .staffTable .staffNameCell {min-width:0;gap:9px;}
  .staffTable .staffNameCell span:last-child {min-width:0;overflow-wrap:anywhere;}
  .staffTable .staffEdit {display:inline-flex;gap:7px;align-items:center;justify-content:center;
    border:1px solid #c8dce6;border-radius:9px;background:#eaf3f8;padding:10px 16px;min-height:44px;text-decoration:none;}
  .staffTable .staffStatus {display:inline-flex;max-width:100%;width:max-content;}
  .staffFields input:not([type=checkbox]), .staffFields textarea,
  .photoCard input, .ap-card input, .loginModal input {max-width:100%;font-size:16px!important;}
  .staffFormFoot {flex-direction:column-reverse;align-items:stretch;gap:8px;}
  .staffFormFoot .staffSave {width:100%;min-height:45px;}
  .staffFormFoot .staffCancel {text-align:center;min-height:44px;}
  .permissionToolbar button {min-height:44px;}
  .photoCard, .ap-card {max-width:100%;}
  footer.siteFooter, footer.ap-footer {padding-bottom:max(15px, env(safe-area-inset-bottom));}
}
@media (max-width:600px) {
  .staffTop {flex-direction:column;align-items:stretch;gap:15px;}
  .staffCreate {align-self:flex-start;white-space:normal;}
  /* Branch access needs two large tap targets, not three squeezed columns. */
  .branchGrid .branchHeader {display:none;}
  .branchGrid .branchRow {grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;gap:9px;padding:12px;}
  .branchGrid .branchName {grid-column:1/-1;min-width:0;margin-bottom:3px;}
  .branchGrid .branchCheck {display:flex;justify-content:flex-start;gap:8px;min-width:0;min-height:44px;
    border:1px solid #d3e5ee;border-radius:9px;padding:8px;background:#f3fafe;}
  .branchGrid .branchCheck .srOnly {position:static;width:auto;height:auto;clip:auto;clip-path:none;overflow:visible;white-space:normal;
    color:#516a76;font-size:12px;line-height:1.3;overflow-wrap:anywhere;}
  .branchGrid .branchCheck input {flex:0 0 18px;}
  .staffListHeader {padding:15px 17px;}
  .staffTable tbody {padding:11px;}
}
@media (max-width:360px) {
  .staffTable tbody td, .staffTable tbody td:last-child {grid-template-columns:minmax(75px,35%) minmax(0,1fr);gap:8px;padding:10px;}
  .staffTable tbody {padding:8px;}
  .branchGrid .branchCheck {gap:5px;padding:7px 5px;}
}