/* User management responsive containment for 14-inch notebook viewports. */
#usersView {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
}
#usersView .user-page-title {
  min-width: 0;
  gap: 16px;
  flex-wrap: wrap;
}
.user-workbench {
  width: 100%;
  max-width: 100%;
  grid-template-columns: clamp(220px, 16vw, 240px) minmax(0, 1fr);
  overflow: hidden;
}
.user-department-pane {
  min-width: 0;
  max-width: 240px;
  overflow: hidden;
}
.user-department-tree {
  max-height: calc(100vh - 310px);
  overflow: auto;
  overscroll-behavior: contain;
}
.user-directory-pane {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  container-type: inline-size;
  container-name: user-directory;
}
.user-filter-grid { min-width: 0; }
.user-filter-actions {
  align-items: center;
  white-space: nowrap;
}
.user-filter-actions button {
  flex: 0 0 auto;
  white-space: nowrap;
  line-height: 1;
}
.user-toolbar {
  min-width: 0;
  gap: 10px;
  flex-wrap: wrap;
}
.user-toolbar > div {
  min-width: 0;
  flex-wrap: wrap;
}
.user-table-wrap {
  position: relative;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}
.user-table {
  width: max-content;
  min-width: 1180px;
}
.user-table thead th {
  position: sticky;
  top: 0;
  z-index: 3;
}
.user-table th:first-child,
.user-table td:first-child {
  position: sticky;
  left: 0;
  z-index: 2;
  background: inherit;
}
.user-table th:nth-child(2),
.user-table td:nth-child(2) {
  position: sticky;
  left: 38px;
  z-index: 2;
  background: inherit;
}
.user-table thead th:first-child,
.user-table thead th:nth-child(2) {
  z-index: 5;
  background: #f8fafc;
}
.user-table tbody tr:hover td:first-child,
.user-table tbody tr:hover td:nth-child(2) { background: #f8fbff; }
.user-pagination {
  min-width: 0;
  flex-wrap: wrap;
  row-gap: 8px;
}
.user-pagination > * { flex: 0 0 auto; }

@container user-directory (max-width: 1100px) {
  .user-filter-grid { grid-template-columns: repeat(3, minmax(170px, 1fr)); }
  .user-date-filter {
    grid-column: 1 / -1;
    grid-template-columns: 72px minmax(150px, 1fr) 16px minmax(150px, 1fr) !important;
  }
  .user-filter-actions {
    grid-column: auto;
    justify-self: start;
  }
}
@container user-directory (max-width: 780px) {
  .user-filter-grid { grid-template-columns: repeat(2, minmax(180px, 1fr)); }
  .user-date-filter,
  .user-filter-actions { grid-column: 1 / -1; }
}
@media (max-width: 1600px) {
  .user-filter-grid { grid-template-columns: repeat(3, minmax(160px, 1fr)); }
  .user-date-filter { grid-column: 1 / -1; }
}
@media (max-width: 980px) {
  .user-workbench {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
  }
  .user-department-pane {
    border-right: 1px solid #e3e9f3;
    border-bottom: 0;
  }
  .user-department-tree { max-height: calc(100vh - 280px); }
  .user-filter-grid { grid-template-columns: repeat(2, minmax(170px, 1fr)); }
  .user-date-filter { grid-column: 1 / -1; }
}