/* Users list and dialogs, adapted from the UsersPage design handoff. */
.users-page { max-width: 1560px; margin: 0 auto; }
.users-page .page-header { gap: 20px; }
.users-page .page-title { font-size: 22px; font-weight: 600; letter-spacing: -.01em; }
.users-description { margin: 5px 0 0; color: var(--text-muted); font-size: 12.5px; }
.users-page .btn { gap: 7px; white-space: nowrap; }
.users-stats { display: grid; grid-template-columns: repeat(var(--users-stat-count), minmax(0, 1fr)); margin-bottom: 16px; overflow: hidden; border: 1px solid var(--border); border-radius: 10px; background: var(--bg-card); }
.users-stat { padding: 13px 18px; border-right: 1px solid var(--border); }
.users-stat:last-child { border-right: 0; }
.users-label { color: var(--text-muted); font: 600 9.5px var(--font-mono); letter-spacing: .1em; text-transform: uppercase; }
.users-stat-value { display: block; margin-top: 4px; color: var(--text-primary); font: 600 19px var(--font-mono); }
.users-stat-value--active { color: var(--green); }
.users-stat-value--invited { color: var(--orange); }
.users-stat-value--disabled { color: var(--text-secondary); }
.users-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 14px; }
.users-search { display: flex; flex: 1 1 260px; align-items: center; gap: 9px; max-width: 340px; padding: 8px 11px; border: 1px solid var(--border); border-radius: 7px; background: var(--bg-surface); color: var(--text-muted); }
.users-search input { width: 100%; min-width: 0; padding: 0; background: transparent; border: 0; color: var(--text-primary); font: 12px var(--font-sans); outline: none; }
.users-search:focus-within { border-color: var(--green); }
.users-filters, .users-group-control { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; }
.users-filters > .users-label, .users-group-control > .users-label { margin-right: 3px; }
.users-pill { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border: 1px solid var(--border); border-radius: 7px; background: var(--bg-surface); color: var(--text-secondary); font: 500 11.5px var(--font-sans); cursor: pointer; white-space: nowrap; }
.users-pill.active { border-color: rgba(74,222,128,.4); background: rgba(74,222,128,.1); color: var(--green); }
.users-group-control { margin-left: auto; }
.users-segments { display: flex; padding: 2px; border: 1px solid var(--border); border-radius: 7px; background: var(--bg-surface); }
.users-segments button { padding: 5px 10px; border: 0; border-radius: 5px; background: transparent; color: var(--text-secondary); font: 500 12px var(--font-sans); cursor: pointer; }
.users-segments [aria-pressed="true"] { background: var(--border); color: var(--text-primary); }
.users-table-card { border: 1px solid var(--border); border-radius: 10px; background: var(--bg-card); }
.users-table-scroll { overflow-x: auto; min-height: 230px; border-radius: 10px 10px 0 0; }
.users-list { width: 100%; min-width: 960px; table-layout: fixed; border-collapse: collapse; }
.users-list th, .users-list td { padding: 11px 10px; text-align: left; vertical-align: middle; }
.users-list thead th { border-bottom: 1px solid var(--border); color: var(--text-muted); font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }
.users-list thead th:nth-child(1) { width: 26%; }
.users-list thead th:nth-child(2) { width: 134px; }
.users-list thead th:nth-child(3) { width: 17%; }
.users-list thead th:nth-child(4) { width: 100px; }
.users-list thead th:nth-child(5) { width: 74px; }
.users-list thead th:nth-child(6) { width: 98px; }
.users-list thead th:nth-child(7) { width: 100px; }
.users-list thead th:nth-child(8) { width: 100px; }
.users-list th button { display: flex; align-items: center; gap: 5px; width: 100%; padding: 0; border: 0; background: none; color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; white-space: nowrap; }
.users-list th button span { color: var(--green); }
.users-row { border-bottom: 1px solid var(--border); }
.users-row:hover, .users-row:focus-within { background: var(--bg-elevated); }
.users-row:hover td:first-child, .users-row:focus-within td:first-child { box-shadow: inset 3px 0 var(--blue); }
.users-identity { display: flex; align-items: center; gap: 10px; min-width: 0; padding-left: calc(4px + var(--users-section-depth, 0) * 20px); }
.users-avatar { display: flex; flex: 0 0 28px; height: 28px; align-items: center; justify-content: center; border: 1px solid; border-radius: 7px; font: 700 10px var(--font-mono); }
.users-identity-text { min-width: 0; }
.users-name { display: block; width: 100%; overflow: hidden; padding: 0; border: 0; background: none; color: var(--text-primary); font: 500 13px var(--font-sans); text-align: left; text-overflow: ellipsis; white-space: nowrap; }
button.users-name { cursor: pointer; }
.users-email { display: block; overflow: hidden; margin-top: 2px; color: var(--text-muted); font: 10.5px var(--font-mono); text-overflow: ellipsis; white-space: nowrap; }
.users-badge { display: inline-flex; align-items: center; gap: 6px; padding: 3px 7px; border: 1px solid var(--border); border-radius: 5px; color: var(--text-secondary); font-size: 10.5px; font-weight: 600; white-space: nowrap; }
.users-badge--platform_admin, .users-badge--active { color: var(--green); background: rgba(74,222,128,.1); border-color: rgba(74,222,128,.25); }
.users-badge--reseller_admin { color: #a78bfa; background: rgba(139,92,246,.12); border-color: rgba(139,92,246,.28); }
.users-badge--customer_admin { color: #60a5fa; background: rgba(59,130,246,.12); border-color: rgba(59,130,246,.28); }
.users-badge--customer_viewer, .users-badge--invited { color: #fbbf24; background: rgba(245,158,11,.1); border-color: rgba(245,158,11,.28); }
.users-badge--disabled { color: var(--text-secondary); background: rgba(139,153,181,.08); border-color: var(--border); }
.users-role-dot, .users-status-dot { width: 5px; height: 5px; flex-shrink: 0; border-radius: 50%; background: currentColor; }
.users-customer { overflow: hidden; color: var(--text-secondary); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.users-meta { color: var(--text-muted); font: 11px var(--font-mono); white-space: nowrap; }
.users-list .users-number { text-align: right; justify-content: flex-end; }
.users-actions { display: flex; position: relative; justify-content: flex-end; align-items: center; gap: 2px; }
.users-icon-button { display: inline-flex; width: 26px; height: 26px; align-items: center; justify-content: center; padding: 0; border: 1px solid transparent; border-radius: 6px; background: transparent; color: var(--text-secondary); cursor: pointer; }
.users-icon-button:hover { border-color: var(--border); background: var(--bg-input); color: var(--text-primary); }
.users-invite { color: #fbbf24; }
.users-menu { position: fixed; z-index: 350; width: 190px; padding: 5px; border: 1px solid var(--border-light); border-radius: 8px; background: var(--bg-elevated); box-shadow: 0 12px 32px rgba(0,0,0,.45); }
.users-menu button { display: block; width: 100%; padding: 8px 9px; border: 0; border-radius: 5px; background: none; color: var(--text-secondary); font: 12px var(--font-sans); text-align: left; cursor: pointer; }
.users-menu button:hover, .users-menu button:focus-visible { background: var(--border); color: var(--text-primary); }
.users-menu .users-danger { color: var(--red); }
.users-group-row th { background: var(--bg-surface); border-bottom: 1px solid var(--border); padding-left: calc(10px + var(--users-section-depth, 0) * 20px); }
.users-group-row--nested th { background: var(--bg-card); }
.users-list .users-group-toggle { gap: 9px; color: var(--text-secondary); font: 600 12px var(--font-sans); letter-spacing: normal; text-transform: none; }
.users-list .users-group-toggle span { color: inherit; }
.users-group-toggle .sensitive { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.users-group-toggle:hover { color: var(--text-primary); }
.users-section-chevron { flex-shrink: 0; transition: transform .15s ease; }
.users-group-toggle[aria-expanded="true"] .users-section-chevron { transform: rotate(90deg); }
.users-section-controls { display: flex; justify-content: flex-end; gap: 6px; margin-bottom: 10px; }
.users-section-controls button:disabled { opacity: .45; cursor: default; }
.users-group-count { padding: 1px 6px; border: 1px solid var(--border); border-radius: 3px; color: var(--text-muted); font: 10px var(--font-mono); }
.users-list-footer { display: flex; justify-content: space-between; gap: 12px; padding: 11px 16px; border-top: 1px solid var(--border); color: var(--text-muted); font: 11px var(--font-mono); }
.users-empty { padding: 36px 20px; text-align: center; color: var(--text-muted); }
.users-empty h2 { margin: 12px 0 4px; font-size: 15px; color: var(--text-secondary); }
.users-empty p { font-size: 12.5px; }
.users-page button:focus-visible, .users-modal-overlay button:focus-visible, .users-table-scroll:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.users-modal-overlay [hidden] { display: none !important; }
.users-edit-modal, .users-create-modal { max-width: 660px; }
.users-confirm-modal { max-width: 480px; }
.users-modal-header .project-modal-heading { align-items: flex-start; }
.users-modal-header .project-modal-heading > div { min-width: 0; }
.users-modal-header p { overflow-wrap: anywhere; }
.users-modal-tabs { display: flex; gap: 2px; overflow-x: auto; padding: 0 20px; border-bottom: 1px solid var(--border); }
.users-modal-tabs button { flex-shrink: 0; padding: 12px 10px; border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--text-muted); font: 600 12px var(--font-sans); cursor: pointer; }
.users-modal-tabs [aria-selected="true"] { border-bottom-color: var(--green); color: var(--text-primary); }
.users-modal-tabs [data-user-tab="danger"][aria-selected="true"] { border-bottom-color: var(--red); color: var(--red); }
.users-field-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.users-enabled-field { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 13px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-surface); cursor: pointer; }
.users-enabled-field strong { display: block; font-size: 12.5px; font-weight: 600; color: var(--text-primary); }
.users-enabled-field span span { display: block; margin-top: 3px; color: var(--text-muted); font-size: 11.5px; }
.users-enabled-field input { width: 17px; height: 17px; accent-color: var(--green); }
.users-identity-note { margin: 14px 0 0; padding: 11px 13px; border: 1px solid rgba(59,130,246,.2); border-radius: 8px; background: rgba(59,130,246,.07); color: var(--text-secondary); font-size: 11.5px; }
.users-help { margin: 6px 0 0; color: var(--text-muted); font-size: 11.5px; line-height: 1.5; }
.users-modal-footer { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; }
.users-footer-spacer { flex: 1; }
.users-form-errors { margin: 14px 20px 0; padding: 10px 13px; border: 1px solid rgba(239,68,68,.3); border-radius: 7px; background: rgba(239,68,68,.08); color: var(--red); font-size: 12px; }
.users-modal-overlay .modal-body > .users-form-errors { margin: 0 0 14px; }
.users-activity-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0 0 20px; }
.users-activity-stats > div { padding: 13px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-surface); }
.users-activity-stats dt { color: var(--text-muted); font: 600 9px var(--font-mono); text-transform: uppercase; letter-spacing: .08em; }
.users-activity-stats dd { margin: 7px 0 0; color: var(--text-primary); font: 12px var(--font-mono); }
.users-milestones { list-style: none; padding: 0; margin: 10px 0 0; border: 1px solid var(--border); border-radius: 8px; }
.users-milestones:empty { display: none; }
.users-milestones li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px; border-bottom: 1px solid var(--border); color: var(--text-secondary); font-size: 12px; }
.users-milestones li:last-child { border-bottom: 0; }
.users-milestones time { color: var(--text-muted); font: 10px var(--font-mono); }
.users-danger-row { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 14px; margin-bottom: 12px; border: 1px solid rgba(245,158,11,.22); border-radius: 8px; background: rgba(245,158,11,.06); }
.users-danger-row h3 { margin: 0 0 4px; font-size: 12.5px; color: #fbbf24; }
.users-danger-row p { margin: 0; color: var(--text-secondary); font-size: 11.5px; line-height: 1.5; }
.users-danger-row--delete { border-color: rgba(239,68,68,.22); background: rgba(239,68,68,.06); }
.users-danger-row--delete h3 { color: var(--red); }
.users-confirm-message { margin: 0; color: var(--text-secondary); font-size: 13px; line-height: 1.6; overflow-wrap: anywhere; }
.users-edit-modal .customer-access-panel { margin: 0; border: 0; border-radius: 0; }
.users-edit-modal .customer-access-header { display: none; }
/* The 660px dialog needs the compact grid even on a wide desktop viewport. */
.users-edit-modal .customer-access-membership { grid-template-columns: minmax(0, 1fr) auto; }
.users-edit-modal .customer-access-membership-form { grid-column: 1 / -1; grid-row: 2; }
.users-edit-modal .customer-access-remove { grid-column: 2; grid-row: 1; align-self: center; }
.users-edit-modal .customer-access-add-form { grid-template-columns: minmax(0, 1fr) minmax(145px, .62fr); }
.users-edit-modal .customer-access-add-form .customer-access-field--products { grid-column: 1; }
@media (max-width: 680px) {
  .users-edit-modal .customer-access-add-form { grid-template-columns: minmax(0, 1fr); }
  .users-edit-modal .customer-access-add-form .customer-access-field--products { grid-column: auto; }
}
@media (hover: hover) and (pointer: fine) {
  .users-actions { opacity: 0; }
  .users-row:hover .users-actions, .users-row:focus-within .users-actions, .users-actions.is-open { opacity: 1; }
}
@media (max-width: 640px) {
  .users-stat { padding: 11px 8px; }
  .users-stats .users-label { font-size: 8px; letter-spacing: .02em; }
  .users-search { max-width: none; }
  .users-group-control { margin-left: 0; }
  .users-page .page-header { align-items: flex-start; }
  .users-list-footer { font-size: 9.5px; }
  .users-field-grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .users-activity-stats { grid-template-columns: minmax(0, 1fr); }
  .users-modal-tabs { padding: 0 12px; }
  .users-modal-tabs button { padding: 11px 9px; font-size: 11px; }
  .users-modal-header.project-modal-header { padding: 18px 16px; }
}