/* V35.9 TARGETED — Employee Management mobile usability + theme parity.
 * Scope: #usersPane only. Intentionally contains NO menu/navigation selectors.
 * Fixes: reliable vertical/horizontal table scrolling on phone, all action
 * buttons remain reachable, and table surfaces follow light/dark admin theme.
 */

/* Give Users pane the same flex/scroll contract used by Message Management. */
#adminModal #usersPane.active{
  display:flex !important;
  flex-direction:column !important;
  flex:1 1 0 !important;
  min-height:0 !important;
  height:0 !important;
  overflow:hidden !important;
}
#adminModal #usersPane .panel-section-box{
  flex:0 0 auto !important;
}
#adminModal #usersPane .table-responsive{
  flex:1 1 0 !important;
  height:0 !important;
  min-height:0 !important;
  max-height:none !important;
  width:100% !important;
  max-width:100% !important;
  overflow:auto !important;
  -webkit-overflow-scrolling:touch !important;
  overscroll-behavior:contain !important;
  scrollbar-width:auto !important;
  background:var(--bg-main) !important;
}

/* Theme-correct table surface; the previous fallback to #fff made dark mode white. */
:root[data-theme="light"] #adminModal #usersPane .table-responsive,
body[data-theme="light"] #adminModal #usersPane .table-responsive{
  background:#f8fafc !important;
}
:root[data-theme="dark"] #adminModal #usersPane .table-responsive,
body[data-theme="dark"] #adminModal #usersPane .table-responsive{
  background:#120f0b !important;
}
#adminModal #usersPane .admin-table{
  background:var(--bg-main) !important;
  color:var(--text-main) !important;
}
:root[data-theme="light"] #adminModal #usersPane .admin-table,
body[data-theme="light"] #adminModal #usersPane .admin-table{
  background:#fff !important;
}
:root[data-theme="dark"] #adminModal #usersPane .admin-table,
body[data-theme="dark"] #adminModal #usersPane .admin-table{
  background:#120f0b !important;
}
#adminModal #usersPane .admin-table th{
  background:var(--bg-header) !important;
  color:var(--text-sub) !important;
}
#adminModal #usersPane .admin-table td{
  background:transparent !important;
  color:var(--text-main) !important;
}

/* Keep the action column intact; never clip buttons at the cell edge. */
#adminModal #usersPane .admin-table td:nth-child(4){
  overflow:visible !important;
  text-overflow:clip !important;
}
#adminModal #usersPane .admin-user-actions{
  flex-wrap:nowrap !important;
  width:max-content !important;
  min-width:max-content !important;
  overflow:visible !important;
}

@media (max-width:1024px){
  #adminModal #usersPane .table-responsive{
    flex:1 1 0 !important;
    height:0 !important;
    min-height:0 !important;
    overflow:auto !important;
  }
}

@media (max-width:767px){
  /* Mobile gets a compact but fully scrollable table. */
  #adminModal #usersPane .table-responsive{
    flex:1 1 0 !important;
    height:0 !important;
    min-height:0 !important;
    overflow-x:auto !important;
    overflow-y:auto !important;
    -webkit-overflow-scrolling:touch !important;
    scrollbar-width:auto !important;
    border-radius:10px !important;
  }
  #adminModal #usersPane .admin-table{
    width:max-content !important;
    min-width:300px !important;
    max-width:none !important;
    table-layout:auto !important;
    font-size:10px !important;
  }
  #adminModal #usersPane .admin-table th,
  #adminModal #usersPane .admin-table td{
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    padding:8px 6px !important;
  }
  #adminModal #usersPane .admin-table th:nth-child(1),
  #adminModal #usersPane .admin-table td:nth-child(1){min-width:58px !important;max-width:88px !important;}
  #adminModal #usersPane .admin-table th:nth-child(2),
  #adminModal #usersPane .admin-table td:nth-child(2){min-width:78px !important;max-width:110px !important;}
  #adminModal #usersPane .admin-table th:nth-child(3),
  #adminModal #usersPane .admin-table td:nth-child(3){min-width:54px !important;max-width:70px !important;}
  #adminModal #usersPane .admin-table th:nth-child(4),
  #adminModal #usersPane .admin-table td:nth-child(4){min-width:110px !important;width:110px !important;max-width:none !important;overflow:visible !important;}
  #adminModal #usersPane .admin-user-actions{
    gap:5px !important;
    flex-wrap:nowrap !important;
    width:max-content !important;
    min-width:max-content !important;
  }
  #adminModal #usersPane #adminUserTable .action-btn,
  #adminModal #usersPane #adminUserTable .kick-btn{
    width:32px !important;
    height:32px !important;
    min-width:32px !important;
    min-height:32px !important;
    flex:0 0 32px !important;
  }
}