.app-shell:has(.users-page) { height: 100vh; height: 100dvh; min-height: 0; grid-template-rows: var(--ribbon-height) minmax(0, 1fr); }
.app-shell:has(.users-page) > .main-panel { display: grid; grid-template-rows: auto minmax(0, 1fr); min-width: 0; min-height: 0; }
.app-shell:has(.users-page) > .main-panel > .page-content { display: grid; grid-template-rows: minmax(0, 1fr); min-width: 0; min-height: 0; padding-block: 8px; }
.topbar.users-topbar { display: grid; grid-template-columns: minmax(120px, 1fr) minmax(220px, 620px) minmax(max-content, 1fr); flex-wrap: nowrap; }
.topbar.users-topbar .topbar-heading { grid-column: 1; min-width: 0; }
.topbar.users-topbar .topbar-tools-host { grid-column: 2; min-width: 0; width: 100%; }
.topbar.users-topbar .topbar-action { grid-column: 3; justify-self: end; }
.users-topbar-tools { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 6px; width: 100%; min-width: 0; }
.users-search-box { display: flex; align-items: center; gap: 6px; min-width: 0; padding: 0 8px; border: 1px solid var(--border-default); border-radius: var(--radius-sm); background: var(--surface); }
.users-search-box:focus-within { outline: 2px solid var(--brand); outline-offset: 2px; }
.users-search-box > svg { flex: 0 0 16px; width: 16px; height: 16px; fill: none; stroke: var(--text-muted); stroke-width: 1.7; }
.users-topbar-tools .users-count { display: inline-flex; align-items: center; justify-content: center; min-height: 26px; padding: 3px 8px; border: 1px solid var(--border-subtle); border-radius: 999px; background: var(--surface-subtle); color: var(--text-secondary); font-size: 11px; font-weight: 400; line-height: 1.2; white-space: nowrap; }
.users-topbar-tools input { flex: 1; width: 100%; min-width: 0; min-height: 32px; padding: 5px 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; font-size: 12px; }
.users-topbar-tools input:focus { outline: none; box-shadow: none; }
.users-search-box > input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.users-search-clear { display: grid; place-items: center; flex: 0 0 32px; width: 32px; height: 32px; padding: 8px; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--text-muted); }
.users-search-clear svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.users-page.stack { display: flex; flex-direction: column; gap: 8px; min-width: 0; min-height: 0; }
.users-page > .create-user-panel { flex: 0 1 auto; min-height: 0; max-height: 70%; overflow: auto; }
.users-listing { display: flex; flex-direction: column; flex: 1 1 0; gap: 0; min-width: 0; min-height: 0; }
.users-table-interactive { flex: 1 1 0; min-width: 0; min-height: 0; overflow: auto; max-height: none; scrollbar-gutter: stable; }
.users-table-interactive table { width: 100%; min-width: 0; table-layout: fixed; border-collapse: separate; border-spacing: 0; font-size: 12px; }
.users-table-interactive th { position: sticky; top: 0; z-index: 1; padding: 7px 10px 7px 8px; font-size: 10px; font-weight: 500; letter-spacing: .02em; }
.users-table-interactive .user-data-row > td { padding: 7px 8px; line-height: 1.3; font-weight: 400; vertical-align: middle; }
.users-table-interactive .users-cell-text { display: block; overflow: hidden; margin: 0; color: inherit; font-size: inherit; text-overflow: ellipsis; white-space: nowrap; }
.users-table-interactive .user-identity { gap: 7px; min-width: 0; }
.users-table-interactive .user-identity .avatar { flex: 0 0 28px; width: 28px; height: 28px; margin: 0; font-size: 10px; }
.users-table-interactive .user-identity strong { display: block; overflow: hidden; font-weight: 500; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.users-table-interactive .user-identity > div > span { display: block; overflow: hidden; margin: 1px 0 0; font-size: 10px; font-weight: 400; text-overflow: ellipsis; white-space: nowrap; }
.users-table-interactive .badge { display: inline-flex; align-items: center; max-width: 100%; margin: 0; padding: 3px 6px; font-size: 10px; font-weight: 500; line-height: 1.2; white-space: nowrap; }
.users-table-interactive .users-cell-id { font-variant-numeric: tabular-nums; }
.users-column-heading { display: flex; align-items: center; gap: 2px; min-width: 0; }
.users-actions-heading { gap: 4px; justify-content: space-between; }
.users-header-tools { display: flex; flex: 0 0 auto; align-items: center; gap: 2px; margin-left: auto; }
.users-header-action { display: inline-flex; flex: 0 0 28px; align-items: center; justify-content: center; width: 28px; min-width: 28px; height: 28px; padding: 4px; border: 1px solid transparent; border-radius: var(--radius-sm); background: transparent; color: var(--text-muted); }
.users-header-action svg { display: block; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.users-header-action:hover:not(:disabled) { border-color: var(--border-default); background: var(--brand-soft); color: var(--brand-hover); }
.users-header-action:disabled { opacity: .5; cursor: wait; }
.users-sort-button { display: flex; align-items: center; gap: 2px; flex: 1; min-width: 0; min-height: 26px; padding: 0; border: 0; background: transparent; color: inherit; font: inherit; text-align: left; }
.users-sort-button > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.users-sort-button svg { flex: 0 0 10px; width: 10px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.5; opacity: .45; }
.users-sort-button[data-direction="asc"] svg, .users-sort-button[data-direction="desc"] svg { opacity: 1; color: var(--brand); }
.users-sort-button[data-direction="asc"] svg { clip-path: inset(0 0 45%); }
.users-sort-button[data-direction="desc"] svg { clip-path: inset(45% 0 0); }
.users-filter-button { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; gap: 4px; width: 24px; min-height: 26px; padding: 3px; border: 1px solid transparent; border-radius: var(--radius-sm); background: transparent; color: var(--text-muted); }
.users-filter-button svg { display: block; flex: 0 0 12px; width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.users-filter-button:hover, .users-filter-button.is-active { color: var(--brand); background: var(--brand-soft); border-color: var(--border-default); }
.users-filter-button:disabled { opacity: .5; cursor: default; }
.users-column-resizer { position: absolute; top: 0; right: -4px; z-index: 2; width: 9px; height: 100%; cursor: col-resize; touch-action: none; }
.users-column-resizer::after { position: absolute; inset: 5px 4px; content: ""; background: var(--border-default); }
.users-column-resizer:hover::after, .users-column-resizer:focus-visible::after, .users-column-resizer.is-dragging::after { background: var(--brand); }
.users-table-interactive.is-resizing { user-select: none; cursor: col-resize; }
.users-table-interactive.is-resizing tr { transition: none; }
.users-table-interactive .users-cell-actions { container-type: inline-size; container-name: users-actions; }
.users-table-interactive .row-actions { justify-content: flex-end; flex-wrap: nowrap; gap: 4px; min-width: 0; }
.users-table-interactive .row-actions .record-action { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; gap: 4px; width: 32px; min-width: 32px; height: 32px; min-height: 32px; padding: 0; font-size: 11px; font-weight: 500; }
.users-table-interactive .row-actions .record-action-label { display: none; margin: 0; color: inherit; font: inherit; }
.users-table-interactive .row-actions .record-action svg { flex: 0 0 15px; width: 15px; height: 15px; }
.users-table-interactive .user-mobile-meta { display: none; }
@container users-actions (min-width: 146px) {
  .users-table-interactive .row-actions .record-action:first-of-type { width: auto; padding-inline: 7px; }
  .users-table-interactive .row-actions .record-action:first-of-type .record-action-label { display: inline; }
}
@container users-actions (min-width: 198px) {
  .users-table-interactive .row-actions .record-action:nth-of-type(2) { width: auto; padding-inline: 7px; }
  .users-table-interactive .row-actions .record-action:nth-of-type(2) .record-action-label { display: inline; }
}
@container users-actions (min-width: 280px) {
  .users-table-interactive .row-actions .record-action:last-of-type { width: auto; padding-inline: 7px; }
  .users-table-interactive .row-actions .record-action:last-of-type .record-action-label { display: inline; }
}
.users-table-interactive .inline-edit-row > td { padding: 0; }
.users-table-interactive .inline-edit-panel { margin: 8px; padding: 12px; }
.users-list-status { display: flex; flex: 0 0 auto; align-items: center; flex-wrap: wrap; gap: 6px; padding-top: 5px; }
.users-list-status .ghost-button { min-height: 30px; padding: 4px 9px; font-size: 11px; }
.users-list-feedback { flex: 1 1 0; min-width: 0; color: var(--text-muted); font-size: 12px; overflow-wrap: anywhere; }
.users-list-feedback:empty { display: none; }
.column-popover.users-filter-popover { width: 300px; max-width: calc(100vw - 20px); box-shadow: var(--shadow-sm); font: 400 12px/1.35 Aptos, "Segoe UI", sans-serif; }
.users-filter-popover .column-popover-header { align-items: center; gap: 6px; padding: 7px 8px; }
.users-filter-popover .column-popover-title { font-size: 12px; font-weight: 500; }
.users-filter-popover .column-popover-body { gap: 6px; padding: 8px; }
.users-filter-popover .column-popover-actions:empty { display: none; }
.users-filter-popover .column-popover-close::before, .users-filter-popover .column-popover-close::after { display: none; }
.users-filter-popover .column-popover-close { display: grid; place-items: center; }
.users-filter-popover .column-popover-close svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.users-filter-form { display: grid; gap: 9px; min-width: 0; }
.users-filter-form label { font-size: 12px; font-weight: 400; }
.users-filter-form input:not([type="checkbox"]) { width: 100%; min-width: 0; min-height: 34px; padding: 6px 8px; font-size: 13px; }
.users-filter-choices { display: grid; gap: 4px; max-height: 240px; overflow: auto; }
.users-filter-choice { display: flex; align-items: center; gap: 7px; min-height: 32px; padding: 4px; overflow-wrap: anywhere; }
.users-filter-choice input { flex: 0 0 auto; width: 16px; height: 16px; }
.users-filter-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 6px; }
.users-filter-actions .users-filter-clear-all { margin-right: auto; }
.users-filter-actions button { min-height: 32px; padding: 5px 10px; font-size: 12px; }
.users-mobile-controls { display: none; }
.users-mobile-order-trigger { display: none; }
.users-mobile-controls .users-clear-filters { display: none; }
.users-listing:has(.is-cards) > .users-mobile-controls { display: flex; flex: 0 0 auto; flex-wrap: wrap; align-items: center; gap: 4px; min-width: 0; padding-bottom: 6px; }
.users-mobile-controls .users-filter-button { width: auto; padding: 4px 7px; border-color: var(--border-default); background: var(--surface); font-size: 11px; }
.users-mobile-controls select { min-width: 0; max-width: 100%; min-height: 34px; padding: 4px 7px; font-size: 12px; }
.users-table-interactive.is-cards { max-height: none; overflow: auto; border: 0; background: transparent; box-shadow: none; }
.users-table-interactive.is-cards table { display: block; }
.users-table-interactive.is-cards colgroup { display: none; }
.users-table-interactive.is-cards thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.users-table-interactive.is-cards thead button, .users-table-interactive.is-cards .users-column-resizer { visibility: hidden; }
.users-table-interactive.is-cards tbody { display: grid; gap: 8px; }
.users-table-interactive.is-cards .user-data-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 7px; padding: 9px; border: 1px solid var(--border-default); border-radius: var(--radius-md); background: var(--surface); }
.users-table-interactive.is-cards .user-data-row > td { min-width: 0; padding: 0; border: 0; }
.users-table-interactive.is-cards .users-cell-name { grid-column: 1; grid-row: 1; }
.users-table-interactive.is-cards .users-cell-status { grid-column: 2; grid-row: 1; }
.users-table-interactive.is-cards .users-cell-id, .users-table-interactive.is-cards .users-cell-role, .users-table-interactive.is-cards .users-cell-company, .users-table-interactive.is-cards .users-cell-department, .users-table-interactive.is-cards .users-cell-jobTitle { display: none; }
.users-table-interactive.is-cards .users-cell-actions { grid-column: 1 / -1; grid-row: 2; padding-top: 5px; border-top: 1px solid var(--border-subtle); container-type: normal; }
.users-table-interactive.is-cards .row-actions { flex-wrap: wrap; }
.users-table-interactive.is-cards .user-mobile-meta { display: block; flex: 1 0 100%; min-width: 0; margin: 0; color: var(--text-secondary); font-size: 10px; font-weight: 400; line-height: 1.35; overflow-wrap: anywhere; }
.users-table-interactive.is-cards .row-actions .record-action { flex: 0 0 40px; width: 40px; min-width: 40px; height: 40px; min-height: 40px; padding: 0; }
.users-table-interactive.is-cards .row-actions .record-action-label { display: none; }
.users-table-interactive.is-cards .inline-edit-row:not([hidden]), .users-table-interactive.is-cards .inline-edit-row > td { display: block; min-width: 0; }
.users-table-interactive.is-cards .inline-edit-panel { margin: 0; }
.users-table-interactive.is-cards .users-empty-row, .users-table-interactive.is-cards .users-empty-row > td { display: block; min-width: 0; }
.users-topbar-tools [hidden], .users-listing [hidden], .users-filter-popover [hidden] { display: none !important; }
.users-sort-button:focus-visible, .users-filter-button:focus-visible, .users-column-resizer:focus-visible, .users-search-clear:focus-visible, .users-header-action:focus-visible, .users-filter-popover :is(button, input):focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
@media (min-width: 981px) {
  .app-shell:has(.users-page) > .sidebar { height: calc(100dvh - var(--ribbon-height)); min-height: 0; }
}
@media (min-width: 761px) and (max-width: 980px) {
  .topbar.users-topbar { grid-template-columns: 40px minmax(100px, 1fr) minmax(260px, 2fr) auto; }
  .topbar.users-topbar .mobile-menu-toggle { grid-column: 1; grid-row: 1; }
  .topbar.users-topbar .topbar-heading { grid-column: 2; grid-row: 1; }
  .topbar.users-topbar .topbar-tools-host { grid-column: 3; grid-row: 1; }
  .topbar.users-topbar .topbar-action { grid-column: 4; grid-row: 1; }
  .topbar.users-topbar.is-condensed:not(:focus-within):not(.tickets-topbar):not(.ticket-detail-topbar) .topbar-tools-host { display: flex; }
}
@media (max-width: 760px) {
  .topbar.users-topbar { grid-template-columns: 40px minmax(0, 1fr) auto; gap: 6px 8px; }
  .topbar.users-topbar .mobile-menu-toggle { grid-column: 1; grid-row: 1; }
  .topbar.users-topbar .topbar-heading { grid-column: 2; grid-row: 1; }
  .topbar.users-topbar .topbar-action { grid-column: 3; grid-row: 1; }
  .topbar.users-topbar .topbar-tools-host { grid-column: 1 / -1; grid-row: 2; }
  .topbar.users-topbar.is-condensed:not(:focus-within):not(.tickets-topbar):not(.ticket-detail-topbar) .topbar-tools-host { display: flex; }
  .users-topbar-tools input { min-height: 40px; font-size: 14px; }
  .users-mobile-controls .users-filter-button, .users-mobile-controls select { min-height: 40px; }
  .users-mobile-controls .users-header-action { flex-basis: 40px; width: 40px; min-width: 40px; height: 40px; }
}
@media (max-width: 767px), (max-width: 959px) and (max-height: 500px) and (pointer: coarse) and (orientation: landscape) {
  .users-search-clear { flex-basis: 40px; width: 40px; height: 40px; padding: 10px; }
  .users-topbar-tools { grid-template-columns: minmax(0, 1fr) auto 40px; }
  .users-topbar-tools .users-mobile-order-trigger { display: inline-flex; width: 40px; min-width: 40px; height: 40px; padding: 8px; border-color: var(--border-default); background: var(--surface); }
  .users-mobile-order-trigger.is-active, .users-mobile-order-trigger[aria-expanded=true] { color: var(--brand-hover); border-color: var(--brand); background: var(--brand-soft); }
  .users-listing:has(.is-cards) > .users-mobile-controls { display: none; }
  .users-mobile-controls .users-filter-button, .users-table-interactive .users-filter-button, .users-header-tools { display: none; }
  .column-popover.users-order-popover { width: min(280px, calc(100vw - 16px)); }
  .users-order-popover .column-popover-close { flex-basis: 40px; width: 40px; height: 40px; }
  .users-order-popover .column-popover-body { max-height: min(300px, 50dvh); padding: 5px; overscroll-behavior: contain; }
  .users-order-options { display: grid; gap: 2px; min-width: 0; }
  .users-order-option { display: flex; align-items: center; gap: 7px; min-width: 0; min-height: 40px; padding: 6px 8px; border: 1px solid transparent; border-radius: var(--radius-sm); background: var(--surface); color: var(--text-primary); font: inherit; text-align: start; }
  .users-order-option > svg { flex: 0 0 16px; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; visibility: hidden; }
  .users-order-option > span { min-width: 0; overflow-wrap: anywhere; }
  .users-order-option:hover, .users-order-option[aria-pressed=true] { border-color: var(--border-default); background: var(--brand-soft); color: var(--brand-hover); }
  .users-order-option[aria-pressed=true] > svg { visibility: visible; }
  .users-order-popover .column-popover-actions > .users-clear-filters { width: 40px; height: 40px; min-height: 40px; padding: 8px; border-color: var(--border-default); }
}