/* ═══════════════════════════════════════════════════════════════
   DATA TABLE — roster/list table + row cells + pills
   From the Admin deck's user-table. Reused for Users and Roles.
   ═══════════════════════════════════════════════════════════════ */
.user-table-wrap { flex: 1; overflow-y: auto; }
.user-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; }
.user-table thead th { position: sticky; top: 0; z-index: 2; background: var(--bg-sunken); font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-tertiary); font-weight: 500; text-align: left; padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--border-subtle); white-space: nowrap; }
.user-table thead th.center { text-align: center; }
.user-table thead th.right { text-align: right; }
.user-table tbody tr { cursor: pointer; }
.user-table tbody tr:hover { background: var(--bg-surface); }
.user-table tbody tr.selected { background: var(--accent-bg); }
.user-table tbody td { padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--border-subtle); vertical-align: middle; }
.user-table tbody td.right { text-align: right; }

.user-cell { display: flex; align-items: center; gap: var(--space-3); min-width: 0; text-decoration: none; }
.user-cell__avatar { width: 32px; height: 32px; border-radius: 50%; background: linear-gradient(135deg, var(--brand-orange), var(--brand-red)); color: white; display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: 11px; font-weight: 700; flex-shrink: 0; }
.user-cell__avatar--alt { background: linear-gradient(135deg, var(--info-color), var(--wine-400)); }
.user-cell__avatar--admin { background: linear-gradient(135deg, var(--brand-golden), var(--brand-orange)); color: var(--wine-400); }
.user-cell__avatar--system { background: linear-gradient(135deg, var(--gray-600), var(--gray-800)); }
.user-cell__body { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.user-cell__name { font-family: var(--font-display); font-size: 13px; font-weight: 600; color: var(--text-primary); letter-spacing: -0.01em; }
.user-cell__email { font-family: var(--font-mono); font-size: 11px; color: var(--text-tertiary); letter-spacing: 0.02em; }

.role-pill { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600; padding: 3px 8px; border-radius: var(--radius-sm); border: 1px solid; display: inline-flex; align-items: center; gap: 5px; }
.role-pill__dot { width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.role-pill--super { color: var(--accent-emphasis); border-color: var(--accent-border); background: var(--accent-bg); }
.role-pill--admin { color: var(--info-color); border-color: var(--info-border); background: var(--info-bg); }
.role-pill--finance { color: var(--warn-color); border-color: var(--warn-border); background: var(--warn-bg); }
.role-pill--crew { color: var(--pass-color); border-color: var(--pass-border); background: var(--pass-bg); }
.role-pill--cashier { color: var(--text-secondary); border-color: var(--border-default); background: var(--bg-elevated); }
.role-pills { display: flex; gap: 4px; flex-wrap: wrap; }

.id-pair { display: flex; gap: 4px; flex-wrap: wrap; }
.id-pair__pill { font-family: var(--font-mono); font-size: 9px; padding: 2px 5px; border-radius: 3px; border: 1px solid; font-weight: 600; letter-spacing: 0.04em; }
.id-pair__pill--drv { color: var(--accent-emphasis); border-color: rgba(233, 114, 76, 0.4); background: rgba(233, 114, 76, 0.08); }
.id-pair__pill--atd { color: var(--info-color); border-color: rgba(59, 130, 246, 0.4); background: rgba(59, 130, 246, 0.08); }
.id-pair__pill--admin { color: var(--text-tertiary); border-color: var(--border-default); background: var(--bg-elevated); }

.status-pill { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600; padding: 3px 8px; border-radius: var(--radius-sm); display: inline-flex; align-items: center; gap: 5px; border: 1px solid; }
.status-pill::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.status-pill--active { color: var(--pass-color); background: var(--pass-bg); border-color: var(--pass-border); }
.status-pill--leave { color: var(--info-color); background: var(--info-bg); border-color: var(--info-border); }
.status-pill--suspended { color: var(--warn-color); background: var(--warn-bg); border-color: var(--warn-border); }
.status-pill--inactive { color: var(--text-tertiary); background: var(--bg-elevated); border-color: var(--border-default); }

.last-active { font-family: var(--font-mono); font-size: 11px; color: var(--text-secondary); letter-spacing: 0.04em; }
.last-active strong { display: block; color: var(--text-primary); font-weight: 600; font-size: 12px; }
.last-active--never { color: var(--text-disabled); }

.user-table__actions { display: flex; justify-content: flex-end; gap: 4px; }
.user-table__action-btn { width: 28px; height: 28px; border: 1px solid transparent; background: transparent; color: var(--text-tertiary); border-radius: var(--radius-sm); display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
.user-table__action-btn:hover { background: var(--bg-elevated); color: var(--text-primary); border-color: var(--border-default); }
.user-table__action-btn svg { width: 14px; height: 14px; stroke: currentColor; stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; }

.table-empty { padding: var(--space-8) var(--space-6); text-align: center; color: var(--text-tertiary); font-family: var(--font-mono); font-size: 12px; }