/**
 * UARDetailPage.css v1.0.0
 * Styles for UAR Campaign Detail Page
 * 
 * Features:
 * - Responsive layout
 * - Clean card-based design
 * - Expandable sections
 * - Professional color scheme
 * - Smooth animations
 */

/* ========================================
   CONTAINER & LAYOUT
   ======================================== */

.uar-detail-container {
  padding: 24px;
  max-width: 1400px;
  margin: 0 auto;
  animation: fadeIn 0.3s ease-in;
}

/* ========================================
   BREADCRUMB NAVIGATION
   ======================================== */

.detail-breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 24px;
  font-size: 14px;
}

.breadcrumb-link {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #6B7280;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
  transition: all 0.2s;
}

.breadcrumb-link:hover {
  color: #6366F1;
  background: #EEF2FF;
}

.breadcrumb-link svg {
  width: 16px;
  height: 16px;
}

.breadcrumb-separator {
  width: 14px;
  height: 14px;
  color: #D1D5DB;
}

.breadcrumb-current {
  color: #111827;
  font-weight: 500;
}

/* ========================================
   HEADER SECTION
   ======================================== */

.detail-header {
  background: white;
  border-radius: 12px;
  padding: 24px;
  margin-bottom: 24px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.detail-header-title {
  margin-bottom: 24px;
}

.title-main {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 12px;
}

.detail-title {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 28px;
  font-weight: 600;
  color: #111827;
  margin: 0;
}

.detail-title svg {
  width: 32px;
  height: 32px;
  color: #6366F1;
}

.title-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #6B7280;
  font-size: 14px;
}

.meta-item {
  display: flex;
  align-items: center;
  gap: 6px;
}

.meta-item svg {
  width: 16px;
  height: 16px;
}

.meta-separator {
  color: #D1D5DB;
}

/* ========================================
   STATUS BADGE
   ======================================== */

.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
}

.status-badge.ready {
  background: #D1FAE5;
  color: #065F46;
}

.status-badge.ready svg {
  color: #10B981;
}

.status-badge.critical {
  background: #FEE2E2;
  color: #991B1B;
}

.status-badge.critical svg {
  color: #EF4444;
}

.status-badge.warning {
  background: #FEF3C7;
  color: #92400E;
}

.status-badge.warning svg {
  color: #F59E0B;
}

.status-badge svg {
  width: 16px;
  height: 16px;
}

/* ========================================
   STATISTICS GRID
   ======================================== */

.detail-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}

.stat-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  background: #F9FAFB;
  border-radius: 8px;
  border: 1px solid #E5E7EB;
}

.stat-icon {
  width: 48px;
  height: 48px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.stat-icon.users {
  background: #EEF2FF;
  color: #6366F1;
}

.stat-icon.items {
  background: #DBEAFE;
  color: #3B82F6;
}

.stat-icon.reviewers {
  background: #D1FAE5;
  color: #10B981;
}

.stat-icon.issues {
  background: #FEE2E2;
  color: #EF4444;
}

.stat-icon svg {
  width: 24px;
  height: 24px;
}

.stat-content {
  flex: 1;
}

.stat-label {
  font-size: 13px;
  color: #6B7280;
  margin-bottom: 4px;
}

.stat-value {
  font-size: 24px;
  font-weight: 600;
  color: #111827;
}

/* ========================================
   ACTION BUTTONS
   ======================================== */

.detail-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.detail-actions button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 20px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  border: none;
  transition: all 0.2s;
  white-space: nowrap;
}

.detail-actions button i,
.detail-actions button svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.detail-actions .btn-success {
  background: #10B981;
  color: white;
}

.detail-actions .btn-success:hover {
  background: #059669;
}

.detail-actions .btn-secondary {
  background: #F3F4F6;
  color: #374151;
}

.detail-actions .btn-secondary:hover {
  background: #E5E7EB;
}

.detail-actions .btn-danger {
  background: #FEE2E2;
  color: #DC2626;
}

.detail-actions .btn-danger:hover {
  background: #FECACA;
}

/* ========================================
   TAB NAVIGATION
   ======================================== */

.detail-tabs {
  display: flex;
  gap: 4px;
  background: white;
  padding: 4px;
  border-radius: 12px;
  margin-bottom: 24px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.detail-tab {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  background: transparent;
  border: none;
  border-radius: 8px;
  color: #6B7280;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
  position: relative;
}

.detail-tab:hover {
  background: #F9FAFB;
  color: #374151;
}

.detail-tab.active {
  background: #6366F1;
  color: white;
}

.detail-tab svg {
  width: 18px;
  height: 18px;
}

.tab-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  background: #EF4444;
  color: white;
  font-size: 12px;
  font-weight: 600;
  border-radius: 10px;
}

.detail-tab.active .tab-badge {
  background: white;
  color: #6366F1;
}

/* ========================================
   TAB CONTENT
   ======================================== */

.detail-tab-content {
  background: white;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  animation: fadeIn 0.3s ease-in;
}

/* ========================================
   ISSUES EMPTY STATE
   ======================================== */

.issues-empty-state {
  text-align: center;
  padding: 60px 20px;
}

.success-icon {
  width: 80px;
  height: 80px;
  margin: 0 auto 24px;
  background: #D1FAE5;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.success-icon svg {
  width: 48px;
  height: 48px;
  color: #10B981;
}

.issues-empty-state h3 {
  font-size: 24px;
  font-weight: 600;
  color: #111827;
  margin-bottom: 12px;
}

.issues-empty-state p {
  font-size: 16px;
  color: #6B7280;
  margin-bottom: 24px;
}

.issues-empty-state .btn-success {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 24px;
  background: #10B981;
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
}

.issues-empty-state .btn-success:hover {
  background: #059669;
}

.issues-empty-state .btn-success svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

/* ========================================
   ISSUE SECTIONS
   ======================================== */

.issues-content {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.issue-section {
  border-radius: 8px;
  border: 2px solid #E5E7EB;
  overflow: hidden;
  transition: all 0.2s;
}

.issue-section.critical {
  border-color: #FCA5A5;
}

.issue-section.warning {
  border-color: #FCD34D;
}

.issue-section.ready {
  border-color: #6EE7B7;
}

.issue-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  background: #F9FAFB;
  cursor: pointer;
  transition: background 0.2s;
}

.issue-section-header:hover {
  background: #F3F4F6;
}

.issue-section.critical .issue-section-header {
  background: #FEF2F2;
}

.issue-section.warning .issue-section-header {
  background: #FFFBEB;
}

.issue-section.ready .issue-section-header {
  background: #ECFDF5;
}

.issue-section-title {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 18px;
  font-weight: 600;
  color: #111827;
}

.section-icon {
  width: 24px;
  height: 24px;
}

.issue-section.critical .section-icon {
  color: #EF4444;
}

.issue-section.warning .section-icon {
  color: #F59E0B;
}

.issue-section.ready .section-icon {
  color: #10B981;
}

.issue-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 28px;
  padding: 0 8px;
  border-radius: 14px;
  font-size: 14px;
  font-weight: 600;
}

.issue-count.critical {
  background: #FEE2E2;
  color: #991B1B;
}

.issue-count.warning {
  background: #FEF3C7;
  color: #92400E;
}

.issue-count.ready {
  background: #D1FAE5;
  color: #065F46;
}

.issue-section-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.section-toggle {
  width: 20px;
  height: 20px;
  color: #9CA3AF;
  transition: transform 0.3s;
}

.issue-section.collapsed .section-toggle {
  transform: rotate(-90deg);
}

.issue-section-content {
  max-height: 2000px;
  overflow: hidden;
  transition: max-height 0.3s ease-out;
}

.issue-section.collapsed .issue-section-content {
  max-height: 0;
}

.issue-description {
  display: flex;
  gap: 12px;
  padding: 16px 20px;
  background: #EFF6FF;
  border-bottom: 1px solid #DBEAFE;
  color: #1E40AF;
  font-size: 14px;
}

.issue-description svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  margin-top: 2px;
}

/* ========================================
   ISSUE ITEMS
   ======================================== */

.issue-items {
  display: flex;
  flex-direction: column;
}

.issue-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 20px;
  border-bottom: 1px solid #F3F4F6;
  transition: background 0.2s;
}

.issue-item:last-child {
  border-bottom: none;
}

.issue-item:hover {
  background: #F9FAFB;
}

.issue-item-info {
  display: flex;
  gap: 16px;
  flex: 1;
  min-width: 0;
}

.issue-item-icon {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.issue-item-icon.critical {
  background: #FEE2E2;
  color: #DC2626;
}

.issue-item-icon.warning {
  background: #FEF3C7;
  color: #D97706;
}

.issue-item-icon svg {
  width: 20px;
  height: 20px;
}

.issue-item-details {
  flex: 1;
  min-width: 0;
}

.issue-item-title {
  font-size: 15px;
  font-weight: 500;
  color: #111827;
  margin-bottom: 4px;
}

.issue-item-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #6B7280;
  margin-bottom: 4px;
}

.issue-item-reason {
  font-size: 13px;
  color: #9CA3AF;
}

.issue-item-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.reviewer-select {
  min-width: 200px;
  padding: 8px 12px;
  border: 1px solid #D1D5DB;
  border-radius: 6px;
  font-size: 14px;
  color: #374151;
  background: white;
  cursor: pointer;
  transition: all 0.2s;
}

.reviewer-select:hover {
  border-color: #6366F1;
}

.reviewer-select:focus {
  outline: none;
  border-color: #6366F1;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

/* ========================================
   CHANGE COMPARISON
   ======================================== */

.change-comparison {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 8px;
  font-size: 13px;
}

.old-value {
  padding: 4px 8px;
  background: #FEE2E2;
  color: #991B1B;
  border-radius: 4px;
  text-decoration: line-through;
}

.change-arrow {
  color: #9CA3AF;
}

.new-value {
  padding: 4px 8px;
  background: #D1FAE5;
  color: #065F46;
  border-radius: 4px;
  font-weight: 500;
}

.change-impact {
  font-size: 12px;
  color: #6B7280;
  font-style: italic;
  margin-top: 4px;
}

/* ========================================
   PLACEHOLDER TAB CONTENT
   ======================================== */

.placeholder-tab {
  text-align: center;
  padding: 60px 20px;
}

.placeholder-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 16px;
  color: #D1D5DB;
}

.placeholder-tab h3 {
  font-size: 20px;
  font-weight: 600;
  color: #374151;
  margin-bottom: 8px;
}

.placeholder-tab p {
  color: #6B7280;
  font-size: 14px;
}

/* ========================================
   RESPONSIVE DESIGN
   ======================================== */

@media (max-width: 768px) {
  .uar-detail-container {
    padding: 16px;
  }
  
  .detail-header {
    padding: 16px;
  }
  
  .detail-title {
    font-size: 22px;
  }
  
  .detail-stats-grid {
    grid-template-columns: 1fr;
  }
  
  .detail-tabs {
    overflow-x: auto;
    flex-wrap: nowrap;
  }
  
  .detail-tab {
    padding: 10px 16px;
    white-space: nowrap;
  }
  
  .issue-item {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .issue-item-actions {
    width: 100%;
  }
  
  .reviewer-select {
    width: 100%;
  }
}

/* ========================================
   ANIMATIONS
   ======================================== */

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ========================================
   UTILITY CLASSES
   ======================================== */

.btn-sm {
  padding: 6px 12px;
  font-size: 13px;
}

.btn-ghost {
  background: transparent;
  border: 1px solid #E5E7EB;
  color: #6B7280;
}

.btn-ghost:hover {
  background: #F9FAFB;
  border-color: #D1D5DB;
}

/* ========================================
   USERS TAB STYLES
   ======================================== */

.users-tab-content {
  padding: 0;
}

.users-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24px;
  border-bottom: 1px solid #E5E7EB;
  background: #F9FAFB;
}

.users-summary h3 {
  font-size: 18px;
  font-weight: 600;
  color: #111827;
  margin: 0 0 4px 0;
}

.users-summary p {
  font-size: 14px;
  color: #6B7280;
  margin: 0;
}

.users-actions {
  display: flex;
  gap: 12px;
}

.users-table-container {
  padding: 0;
  overflow-x: auto;
}

.users-table {
  width: 100%;
  border-collapse: collapse;
}

.users-table thead {
  background: #F9FAFB;
  border-bottom: 2px solid #E5E7EB;
}

.users-table th {
  padding: 12px 16px;
  text-align: left;
  font-size: 13px;
  font-weight: 600;
  color: #6B7280;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.users-table th.text-center {
  text-align: center;
}

.users-table tbody tr {
  border-bottom: 1px solid #E5E7EB;
  transition: background 0.15s ease;
}

.users-table tbody tr:hover {
  background: #F9FAFB;
}

.users-table tbody tr.user-unassigned {
  background: #FEF3F2;
}

.users-table tbody tr.user-unassigned:hover {
  background: #FEE4E2;
}

.users-table td {
  padding: 16px;
  font-size: 14px;
  color: #374151;
}

.users-table td.text-center {
  text-align: center;
}

/* User Info Cell */
.user-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.user-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, #6366F1, #8B5CF6);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 16px;
  flex-shrink: 0;
}

.user-name {
  font-weight: 500;
  color: #111827;
  margin-bottom: 2px;
}

.user-email {
  font-size: 13px;
  color: #6B7280;
}

.user-id-badge {
  display: inline-block;
  padding: 4px 8px;
  background: #EEF2FF;
  color: #4F46E5;
  border-radius: 4px;
  font-family: 'Monaco', 'Courier New', monospace;
  font-size: 12px;
  font-weight: 500;
}

/* Request ID Badge (v1.1.0 - Campaign-scoped IDs) */
.request-id-cell {
  display: flex;
  align-items: center;
  gap: 6px;
}

.request-id-badge {
  display: inline-block;
  padding: 4px 8px;
  background: linear-gradient(135deg, #059669 0%, #10B981 100%);
  color: white;
  border-radius: 4px;
  font-family: 'Monaco', 'Courier New', monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2px;
  white-space: nowrap;
}

.request-id-more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 6px;
  background: #F3F4F6;
  color: #6B7280;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 500;
  cursor: help;
}

/* Reviewer Info Cell */
.reviewer-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.reviewer-name {
  font-weight: 500;
  color: #111827;
}

.reviewer-email {
  font-size: 13px;
  color: #6B7280;
}

.count-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 24px;
  padding: 0 8px;
  background: #EFF6FF;
  color: #1E40AF;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 600;
}

.btn-icon {
  padding: 6px;
  background: transparent;
  border: 1px solid #E5E7EB;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
  color: #6B7280;
}

.btn-icon:hover {
  background: #F3F4F6;
  border-color: #D1D5DB;
  color: #111827;
}

.btn-icon i {
  width: 16px;
  height: 16px;
}

/* Empty State */
.tab-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  text-align: center;
}

.tab-empty-state h3 {
  font-size: 18px;
  font-weight: 600;
  color: #111827;
  margin: 16px 0 8px 0;
}

.tab-empty-state p {
  font-size: 14px;
  color: #6B7280;
  margin: 0;
}

/* User Details Modal */
.user-details-section {
  margin-bottom: 24px;
}

.user-details-section:last-child {
  margin-bottom: 0;
}

.user-details-section h3 {
  font-size: 16px;
  font-weight: 600;
  color: #111827;
  margin: 0 0 16px 0;
  padding-bottom: 8px;
  border-bottom: 2px solid #E5E7EB;
}

.detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
}

.detail-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.detail-item label {
  font-size: 12px;
  font-weight: 600;
  color: #6B7280;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.detail-item span {
  font-size: 14px;
  color: #111827;
}

.modal-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 12px;
}

.modal-table thead {
  background: #F9FAFB;
}

.modal-table th {
  padding: 10px 12px;
  text-align: left;
  font-size: 12px;
  font-weight: 600;
  color: #6B7280;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-bottom: 2px solid #E5E7EB;
}

.modal-table td {
  padding: 12px;
  font-size: 14px;
  color: #374151;
  border-bottom: 1px solid #E5E7EB;
}

.modal-table tbody tr:last-child td {
  border-bottom: none;
}


/* ========================================
   REVIEWERS TAB STYLES
   ======================================== */

.reviewers-tab-content {
  padding: 0;
}

.reviewers-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}

.reviewers-summary h3 {
  font-size: 18px;
  font-weight: 600;
  color: #111827;
  margin: 0 0 4px 0;
}

.reviewers-summary p {
  font-size: 14px;
  color: #6B7280;
  margin: 0;
}

.reviewers-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px;
}

.reviewer-card {
  background: white;
  border: 1px solid #E5E7EB;
  border-radius: 12px;
  overflow: hidden;
  transition: all 0.2s;
}

.reviewer-card:hover {
  border-color: #6366F1;
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.1);
}

.reviewer-card-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  background: #F9FAFB;
  border-bottom: 1px solid #E5E7EB;
}

.reviewer-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #6366F1;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 16px;
  flex-shrink: 0;
}

.reviewer-info {
  flex: 1;
  min-width: 0;
}

.reviewer-name {
  font-weight: 600;
  color: #111827;
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.reviewer-email {
  font-size: 12px;
  color: #6B7280;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.reviewer-type-badge {
  padding: 4px 10px;
  background: #EEF2FF;
  color: #6366F1;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
}

.reviewer-card-body {
  padding: 20px 16px;
  display: flex;
  justify-content: center;
}

.reviewer-stat {
  text-align: center;
}

.reviewer-stat .stat-number {
  display: block;
  font-size: 32px;
  font-weight: 700;
  color: #111827;
  line-height: 1;
}

.reviewer-stat .stat-label {
  font-size: 13px;
  color: #6B7280;
  margin-top: 4px;
}

.reviewer-card-footer {
  padding: 12px 16px;
  border-top: 1px solid #E5E7EB;
  display: flex;
  justify-content: center;
}

.btn-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  color: #6366F1;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  padding: 6px 12px;
  border-radius: 6px;
  transition: all 0.2s;
}

.btn-link:hover {
  background: #EEF2FF;
}

.btn-link svg {
  width: 16px;
  height: 16px;
}

.unassigned-warning {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 20px;
  padding: 12px 16px;
  background: #FEF3C7;
  border: 1px solid #F59E0B;
  border-radius: 8px;
  color: #92400E;
  font-size: 14px;
}

.unassigned-warning svg {
  width: 20px;
  height: 20px;
  color: #F59E0B;
  flex-shrink: 0;
}

.text-danger {
  color: #DC2626;
  font-weight: 500;
}

/* Reviewer Details Modal */
.reviewer-details-modal {
  padding: 0;
}

.reviewer-details-header {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid #E5E7EB;
  margin-bottom: 16px;
}

.reviewer-avatar-lg {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #6366F1;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 22px;
}

.reviewer-details-header h3 {
  margin: 0 0 4px 0;
  font-size: 18px;
  font-weight: 600;
  color: #111827;
}

.reviewer-details-header p {
  margin: 0;
  font-size: 14px;
  color: #6B7280;
}

.reviewer-items-summary {
  padding: 12px 16px;
  background: #F9FAFB;
  border-radius: 8px;
  margin-bottom: 16px;
  font-size: 14px;
  color: #374151;
}

.reviewer-items-list {
  max-height: 400px;
  overflow-y: auto;
}

.items-table {
  width: 100%;
  border-collapse: collapse;
}

.items-table thead {
  background: #F9FAFB;
  position: sticky;
  top: 0;
}

.items-table th {
  padding: 10px 12px;
  text-align: left;
  font-size: 12px;
  font-weight: 600;
  color: #6B7280;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-bottom: 2px solid #E5E7EB;
}

.items-table td {
  padding: 12px;
  font-size: 14px;
  color: #374151;
  border-bottom: 1px solid #E5E7EB;
}

.items-table tbody tr:hover {
  background: #F9FAFB;
}

.user-cell {
  display: flex;
  flex-direction: column;
}

.user-cell .user-name {
  font-weight: 500;
  color: #111827;
}

.user-cell .user-email {
  font-size: 12px;
  color: #6B7280;
}


/* ========================================
   SYSTEMS TAB STYLES
   ======================================== */

.systems-tab-content {
  padding: 0;
}

.systems-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}

.systems-summary h3 {
  font-size: 18px;
  font-weight: 600;
  color: #111827;
  margin: 0 0 4px 0;
}

.systems-summary p {
  font-size: 14px;
  color: #6B7280;
  margin: 0;
}

.systems-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}

.system-card {
  background: white;
  border: 1px solid #E5E7EB;
  border-radius: 12px;
  overflow: hidden;
  transition: all 0.2s;
}

.system-card:hover {
  border-color: #6366F1;
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.1);
}

.system-card-header {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px;
  background: #F9FAFB;
  border-bottom: 1px solid #E5E7EB;
}

.system-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: #EEF2FF;
  color: #6366F1;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.system-icon svg {
  width: 20px;
  height: 20px;
}

.system-info {
  flex: 1;
  min-width: 0;
}

.system-name {
  font-weight: 600;
  color: #111827;
  font-size: 14px;
  word-break: break-word;
}

.system-desc {
  font-size: 12px;
  color: #6B7280;
  margin-top: 2px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.system-card-body {
  padding: 20px 16px;
  display: flex;
  justify-content: center;
}

.system-stat {
  text-align: center;
}

.system-stat .stat-number {
  display: block;
  font-size: 32px;
  font-weight: 700;
  color: #111827;
  line-height: 1;
}

.system-stat .stat-label {
  font-size: 13px;
  color: #6B7280;
  margin-top: 4px;
}

.system-card-footer {
  padding: 12px 16px;
  border-top: 1px solid #E5E7EB;
  background: #FAFAFA;
}

.system-owner {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: #6B7280;
}

.system-owner svg {
  width: 14px;
  height: 14px;
}


/* ========================================
   User Row Overflow Menu
   ======================================== */

.user-action-overflow {
  position: relative;
}

.user-overflow-dropdown {
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  background: white;
  border: 1px solid #E5E7EB;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  min-width: 200px;
  z-index: 100;
  overflow: hidden;
}

.user-overflow-dropdown.show {
  display: block;
  animation: dropdownFadeIn 0.15s ease-out;
}

@keyframes dropdownFadeIn {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.user-overflow-dropdown .overflow-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 14px;
  border: none;
  background: none;
  font-size: 14px;
  color: #374151;
  cursor: pointer;
  text-align: left;
  transition: background 0.15s;
}

.user-overflow-dropdown .overflow-item:hover {
  background: #F3F4F6;
}

.user-overflow-dropdown .overflow-item svg {
  width: 16px;
  height: 16px;
  color: #6B7280;
}

.user-overflow-dropdown .overflow-item.overflow-item-danger {
  color: #DC2626;
}

.user-overflow-dropdown .overflow-item.overflow-item-danger:hover {
  background: #FEF2F2;
}

.user-overflow-dropdown .overflow-item.overflow-item-danger svg {
  color: #DC2626;
}

/* Btn-danger for modal */
.btn-danger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background: #DC2626;
  color: white;
  border: none;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s;
}

.btn-danger:hover {
  background: #B91C1C;
}

.btn-danger svg {
  width: 16px;
  height: 16px;
}


/* ========================================
   Users Filter Bar - Phase 1
   ======================================== */

.users-filter-bar {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 16px;
  background: #F9FAFB;
  border: 1px solid #E5E7EB;
  border-radius: 8px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.filter-search {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 250px;
  background: white;
  border: 1px solid #D1D5DB;
  border-radius: 6px;
  padding: 0 12px;
  transition: border-color 0.2s, box-shadow 0.2s;
  align-self: flex-end;
  height: 38px;
}

.filter-search:focus-within {
  border-color: #6366F1;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

.filter-search svg {
  width: 18px;
  height: 18px;
  color: #9CA3AF;
  flex-shrink: 0;
}

.filter-search input {
  flex: 1;
  border: none;
  outline: none;
  padding: 0;
  font-size: 14px;
  background: transparent;
  height: 100%;
}

.filter-search input::placeholder {
  color: #9CA3AF;
}

.filter-dropdowns {
  display: flex;
  align-items: flex-end;
  gap: 16px;
  flex-wrap: wrap;
}

.filter-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.filter-group label {
  font-size: 12px;
  font-weight: 500;
  color: #6B7280;
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  text-align: center;
}

.filter-group select {
  padding: 8px 32px 8px 12px;
  border: 1px solid #D1D5DB;
  border-radius: 6px;
  font-size: 14px;
  background: white;
  cursor: pointer;
  min-width: 150px;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  transition: border-color 0.2s;
}

.filter-group select:hover {
  border-color: #9CA3AF;
}

.filter-group select:focus {
  outline: none;
  border-color: #6366F1;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

.btn-text {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 8px 12px;
  background: transparent;
  border: none;
  color: #6B7280;
  font-size: 13px;
  cursor: pointer;
  border-radius: 4px;
  transition: background 0.15s, color 0.15s;
  align-self: flex-end;
  height: 38px;
}

.btn-text:hover {
  background: #E5E7EB;
  color: #374151;
}

.btn-text svg {
  width: 14px;
  height: 14px;
}

/* Filter Results Count */
.filter-results-count {
  padding: 8px 16px;
  font-size: 13px;
  color: #6B7280;
  background: #FEF3C7;
  border-radius: 6px;
  margin-bottom: 12px;
}

.filter-results-count span {
  font-weight: 600;
  color: #92400E;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .users-filter-bar {
    flex-direction: column;
    align-items: stretch;
  }
  
  .filter-search {
    min-width: 100%;
  }
  
  .filter-dropdowns {
    flex-wrap: wrap;
  }
  
  .filter-group select {
    min-width: 120px;
  }
}


/* ========================================
   Bulk Selection & Actions - Phase 2
   ======================================== */

/* Checkbox column */
.checkbox-col {
  width: 40px;
  text-align: center;
}

.checkbox-col input[type="checkbox"] {
  width: 18px;
  height: 18px;
  cursor: pointer;
  accent-color: #6366F1;
}

/* Bulk Selection Bar */
.bulk-selection-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: linear-gradient(135deg, #EEF2FF 0%, #E0E7FF 100%);
  border: 1px solid #C7D2FE;
  border-radius: 8px;
  margin-bottom: 16px;
  animation: slideDown 0.2s ease-out;
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.selection-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.selection-count {
  font-size: 14px;
  font-weight: 600;
  color: #4338CA;
}

.selection-count span {
  color: #312E81;
}

.bulk-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Bulk Actions Dropdown */
.bulk-actions-dropdown {
  position: relative;
}

.bulk-actions-dropdown .btn-secondary {
  display: flex;
  align-items: center;
  gap: 6px;
}

.bulk-actions-dropdown .btn-secondary svg {
  width: 16px;
  height: 16px;
}

.bulk-actions-menu {
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 4px;
  background: white;
  border: 1px solid #E5E7EB;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  min-width: 220px;
  z-index: 100;
  overflow: hidden;
}

.bulk-actions-menu.show {
  display: block;
  animation: dropdownFadeIn 0.15s ease-out;
}

.bulk-actions-menu .menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 14px;
  border: none;
  background: none;
  font-size: 14px;
  color: #374151;
  cursor: pointer;
  text-align: left;
  transition: background 0.15s;
}

.bulk-actions-menu .menu-item:hover {
  background: #F3F4F6;
}

.bulk-actions-menu .menu-item svg {
  width: 16px;
  height: 16px;
  color: #6B7280;
}

.bulk-actions-menu .menu-item.menu-item-danger {
  color: #DC2626;
}

.bulk-actions-menu .menu-item.menu-item-danger:hover {
  background: #FEF2F2;
}

.bulk-actions-menu .menu-item.menu-item-danger svg {
  color: #DC2626;
}

.bulk-actions-menu .menu-divider {
  height: 1px;
  background: #E5E7EB;
  margin: 4px 0;
}

/* Selected row highlight */
.user-row:has(.user-checkbox:checked) {
  background: #F5F3FF;
}

.user-row:has(.user-checkbox:checked):hover {
  background: #EDE9FE;
}


/* ========================================
   Bulk Reviewer Upload - Phase 3
   ======================================== */

/* Outline button style */
.btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: white;
  border: 1px solid #D1D5DB;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  color: #374151;
  cursor: pointer;
  transition: all 0.15s;
}

.btn-outline:hover {
  background: #F9FAFB;
  border-color: #9CA3AF;
}

.btn-outline svg {
  width: 14px;
  height: 14px;
}

/* Upload zone */
.upload-zone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32px;
  border: 2px dashed #D1D5DB;
  border-radius: 8px;
  background: #F9FAFB;
  cursor: pointer;
  transition: all 0.2s;
}

.upload-zone:hover {
  border-color: #6366F1;
  background: #F5F3FF;
}

.upload-zone.dragover {
  border-color: #6366F1;
  background: #EEF2FF;
  border-style: solid;
}

/* Upload summary */
.upload-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.summary-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 14px;
}

.summary-item svg {
  width: 18px;
  height: 18px;
}

.summary-item.summary-success {
  background: #ECFDF5;
  color: #065F46;
}

.summary-item.summary-success svg {
  color: #10B981;
}

.summary-item.summary-skip {
  background: #F3F4F6;
  color: #4B5563;
}

.summary-item.summary-skip svg {
  color: #9CA3AF;
}

.summary-item.summary-error {
  background: #FEF2F2;
  color: #991B1B;
}

.summary-item.summary-error svg {
  color: #EF4444;
}

/* Spinning loader */
.spin {
  animation: spin 1s linear infinite;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Users actions row */
.users-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}