/* ========================================== ISSUE DISCOVERY STYLES ========================================== */ /* Discovery Manager Container */ .discovery-manager { width: 100%; } .discovery-manager.loading { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 300px; color: hsl(var(--muted-foreground)); } /* Discovery Header */ .discovery-header { margin-bottom: 1.5rem; } .discovery-back-btn { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.5rem 1rem; border-radius: 0.5rem; font-size: 0.875rem; font-weight: 500; color: hsl(var(--muted-foreground)); background: hsl(var(--muted)); border: none; cursor: pointer; transition: all 0.15s ease; } .discovery-back-btn:hover { color: hsl(var(--foreground)); background: hsl(var(--hover)); } /* Discovery List */ .discovery-list-container { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 1rem; } /* Discovery Card */ .discovery-card { background: hsl(var(--card)); border: 1px solid hsl(var(--border)); border-radius: 0.75rem; padding: 1rem; cursor: pointer; transition: all 0.15s ease; } .discovery-card:hover { border-color: hsl(var(--primary) / 0.5); box-shadow: 0 4px 12px hsl(var(--foreground) / 0.05); } .discovery-card.running { border-color: hsl(var(--warning) / 0.5); } .discovery-card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.75rem; } .discovery-id { display: flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; font-weight: 600; color: hsl(var(--foreground)); } .discovery-phase { padding: 0.25rem 0.5rem; border-radius: 9999px; font-size: 0.75rem; font-weight: 500; text-transform: capitalize; } .discovery-phase.complete { background: hsl(var(--success) / 0.1); color: hsl(var(--success)); } .discovery-phase.parallel, .discovery-phase.external, .discovery-phase.aggregation { background: hsl(var(--warning) / 0.1); color: hsl(var(--warning)); } .discovery-phase.initialization { background: hsl(var(--primary) / 0.1); color: hsl(var(--primary)); } .discovery-card-body { display: flex; flex-direction: column; gap: 0.75rem; } .discovery-target { display: flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; } /* Perspective Badges */ .discovery-perspectives { display: flex; flex-wrap: wrap; gap: 0.375rem; } .perspective-badge { padding: 0.125rem 0.5rem; border-radius: 9999px; font-size: 0.625rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.025em; } .perspective-badge.bug { background: hsl(0 84% 60% / 0.1); color: hsl(0 84% 60%); } .perspective-badge.ux { background: hsl(262 84% 60% / 0.1); color: hsl(262 84% 60%); } .perspective-badge.test { background: hsl(200 84% 50% / 0.1); color: hsl(200 84% 50%); } .perspective-badge.quality { background: hsl(142 76% 36% / 0.1); color: hsl(142 76% 36%); } .perspective-badge.security { background: hsl(0 84% 50% / 0.1); color: hsl(0 84% 50%); } .perspective-badge.performance { background: hsl(38 92% 50% / 0.1); color: hsl(38 92% 50%); } .perspective-badge.maintainability { background: hsl(280 60% 50% / 0.1); color: hsl(280 60% 50%); } .perspective-badge.best-practices { background: hsl(170 60% 45% / 0.1); color: hsl(170 60% 45%); } .perspective-badge.more { background: hsl(var(--muted)); color: hsl(var(--muted-foreground)); } /* Progress Bar */ .discovery-progress-bar { height: 4px; background: hsl(var(--muted)); border-radius: 2px; overflow: hidden; } .discovery-progress-bar .progress-fill { height: 100%; background: hsl(var(--primary)); transition: width 0.3s ease; } /* Stats */ .discovery-stats { display: flex; gap: 1.5rem; } .discovery-stats .stat { display: flex; flex-direction: column; } .discovery-stats .stat-value { font-size: 1.25rem; font-weight: 700; color: hsl(var(--foreground)); } .discovery-stats .stat-label { font-size: 0.75rem; color: hsl(var(--muted-foreground)); } /* Priority Distribution Bar */ .discovery-priority-bar { display: flex; height: 4px; border-radius: 2px; overflow: hidden; } .discovery-priority-bar .priority-segment { height: 100%; } .discovery-priority-bar .priority-segment.critical { background: hsl(0 84% 60%); } .discovery-priority-bar .priority-segment.high { background: hsl(38 92% 50%); } .discovery-priority-bar .priority-segment.medium { background: hsl(48 96% 53%); } .discovery-priority-bar .priority-segment.low { background: hsl(142 76% 36%); } .discovery-card-footer { display: flex; justify-content: flex-end; margin-top: 0.75rem; padding-top: 0.75rem; border-top: 1px solid hsl(var(--border)); } .discovery-action-btn { padding: 0.375rem; border-radius: 0.375rem; color: hsl(var(--muted-foreground)); background: transparent; border: none; cursor: pointer; transition: all 0.15s ease; } .discovery-action-btn:hover { color: hsl(var(--destructive)); background: hsl(var(--destructive) / 0.1); } /* Empty State */ .discovery-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 300px; text-align: center; color: hsl(var(--muted-foreground)); } .discovery-empty .empty-icon { margin-bottom: 1rem; opacity: 0.5; } /* Discovery Detail Container */ .discovery-detail-container { display: grid; grid-template-columns: 1fr 400px; gap: 1.5rem; height: calc(100vh - 200px); min-height: 500px; } @media (max-width: 1024px) { .discovery-detail-container { grid-template-columns: 1fr; height: auto; } } /* Findings Panel */ .discovery-findings-panel { display: flex; flex-direction: column; background: hsl(var(--card)); border: 1px solid hsl(var(--border)); border-radius: 0.75rem; overflow: hidden; } .discovery-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.75rem 1rem; border-bottom: 1px solid hsl(var(--border)); flex-wrap: wrap; } .toolbar-filters { display: flex; gap: 0.5rem; } .filter-select { padding: 0.375rem 0.75rem; border-radius: 0.375rem; font-size: 0.75rem; color: hsl(var(--foreground)); background: hsl(var(--muted)); border: 1px solid hsl(var(--border)); cursor: pointer; } .toolbar-search { display: flex; align-items: center; gap: 0.5rem; padding: 0.375rem 0.75rem; border-radius: 0.375rem; background: hsl(var(--muted)); border: 1px solid hsl(var(--border)); flex: 1; max-width: 250px; } .toolbar-search input { flex: 1; background: transparent; border: none; font-size: 0.75rem; color: hsl(var(--foreground)); outline: none; } .findings-count { display: flex; align-items: center; justify-content: space-between; padding: 0.5rem 1rem; font-size: 0.75rem; color: hsl(var(--muted-foreground)); border-bottom: 1px solid hsl(var(--border)); } .findings-count-left { display: flex; align-items: center; gap: 0.5rem; } .findings-count .selected-count { color: hsl(var(--primary)); font-weight: 500; } .findings-count-actions { display: flex; gap: 0.5rem; } .select-action-btn { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.25rem 0.5rem; border-radius: 0.25rem; font-size: 0.625rem; font-weight: 500; color: hsl(var(--muted-foreground)); background: transparent; border: 1px solid hsl(var(--border)); cursor: pointer; transition: all 0.15s ease; } .select-action-btn:hover { color: hsl(var(--foreground)); background: hsl(var(--muted)); border-color: hsl(var(--primary) / 0.3); } /* Findings List */ .findings-list { flex: 1; overflow-y: auto; padding: 0.5rem; } .findings-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 200px; color: hsl(var(--muted-foreground)); text-align: center; } /* Finding Item */ .finding-item { display: flex; gap: 0.75rem; padding: 0.75rem; border-radius: 0.5rem; cursor: pointer; transition: all 0.15s ease; } .finding-item:hover { background: hsl(var(--muted) / 0.5); } .finding-item.active { background: hsl(var(--primary) / 0.1); border: 1px solid hsl(var(--primary) / 0.3); } .finding-item.selected { background: hsl(var(--primary) / 0.05); } .finding-item.dismissed { opacity: 0.5; } .finding-item.exported { opacity: 0.6; background: hsl(var(--success) / 0.05); border: 1px solid hsl(var(--success) / 0.2); } .finding-item.exported:hover { background: hsl(var(--success) / 0.08); } /* Exported Badge */ .exported-badge { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.125rem 0.5rem; border-radius: 9999px; font-size: 0.625rem; font-weight: 600; text-transform: uppercase; background: hsl(var(--success) / 0.1); color: hsl(var(--success)); } .finding-checkbox input:disabled { opacity: 0.5; cursor: not-allowed; } .finding-checkbox { display: flex; align-items: flex-start; padding-top: 0.125rem; } .finding-checkbox input { width: 16px; height: 16px; cursor: pointer; } .finding-content { flex: 1; min-width: 0; } .finding-header { display: flex; gap: 0.375rem; margin-bottom: 0.375rem; } .finding-title { font-size: 0.875rem; font-weight: 500; color: hsl(var(--foreground)); line-height: 1.3; margin-bottom: 0.25rem; } .finding-location { display: flex; align-items: center; gap: 0.25rem; font-size: 0.75rem; color: hsl(var(--muted-foreground)); } /* Priority Badge */ .priority-badge { padding: 0.125rem 0.375rem; border-radius: 0.25rem; font-size: 0.625rem; font-weight: 600; text-transform: uppercase; } .priority-badge.critical { background: hsl(0 84% 60% / 0.1); color: hsl(0 84% 60%); } .priority-badge.high { background: hsl(38 92% 50% / 0.1); color: hsl(38 92% 50%); } .priority-badge.medium { background: hsl(48 96% 53% / 0.1); color: hsl(48 70% 40%); } .priority-badge.low { background: hsl(142 76% 36% / 0.1); color: hsl(142 76% 36%); } /* Bulk Actions */ .bulk-actions { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 1rem; border-top: 1px solid hsl(var(--border)); background: hsl(var(--muted) / 0.3); } .bulk-count { font-size: 0.75rem; font-weight: 500; color: hsl(var(--foreground)); } .bulk-action-btn { display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.375rem 0.75rem; border-radius: 0.375rem; font-size: 0.75rem; font-weight: 500; border: none; cursor: pointer; transition: all 0.15s ease; } .bulk-action-btn.export { background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); } .bulk-action-btn.export:hover { opacity: 0.9; } .bulk-action-btn.dismiss { background: hsl(var(--muted)); color: hsl(var(--muted-foreground)); } .bulk-action-btn.dismiss:hover { background: hsl(var(--destructive) / 0.1); color: hsl(var(--destructive)); } /* Preview Panel */ .discovery-preview-panel { background: hsl(var(--card)); border: 1px solid hsl(var(--border)); border-radius: 0.75rem; overflow: hidden; } .preview-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; min-height: 300px; color: hsl(var(--muted-foreground)); text-align: center; } /* Finding Preview */ .finding-preview { padding: 1.25rem; height: 100%; overflow-y: auto; } .preview-header { margin-bottom: 1.25rem; } .preview-badges { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 0.75rem; } .confidence-badge { padding: 0.125rem 0.5rem; border-radius: 9999px; font-size: 0.625rem; font-weight: 500; background: hsl(var(--muted)); color: hsl(var(--muted-foreground)); } .preview-title { font-size: 1.125rem; font-weight: 600; color: hsl(var(--foreground)); line-height: 1.3; } .preview-section { margin-bottom: 1rem; } .preview-section h4 { display: flex; align-items: center; gap: 0.5rem; font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: hsl(var(--muted-foreground)); margin-bottom: 0.5rem; } .preview-location code { padding: 0.25rem 0.5rem; border-radius: 0.25rem; font-size: 0.75rem; background: hsl(var(--muted)); color: hsl(var(--primary)); } .preview-snippet { padding: 0.75rem; border-radius: 0.5rem; background: hsl(var(--muted)); overflow-x: auto; } .preview-snippet code { font-size: 0.75rem; white-space: pre; } .preview-description, .preview-impact, .preview-recommendation { font-size: 0.875rem; line-height: 1.5; color: hsl(var(--foreground)); } /* Suggested Issue */ .preview-section.suggested-issue { padding: 0.75rem; background: hsl(var(--primary) / 0.05); border: 1px solid hsl(var(--primary) / 0.2); border-radius: 0.5rem; } .suggested-issue-content { margin-top: 0.5rem; } .suggested-issue-content .issue-title { font-size: 0.875rem; font-weight: 500; color: hsl(var(--foreground)); margin-bottom: 0.5rem; } .suggested-issue-content .issue-meta { display: flex; flex-wrap: wrap; gap: 0.375rem; } .issue-type, .issue-priority, .issue-label { padding: 0.125rem 0.5rem; border-radius: 0.25rem; font-size: 0.625rem; font-weight: 500; } .issue-type { background: hsl(var(--primary) / 0.1); color: hsl(var(--primary)); } .issue-priority { background: hsl(var(--warning) / 0.1); color: hsl(var(--warning)); } .issue-label { background: hsl(var(--muted)); color: hsl(var(--muted-foreground)); } /* Preview Actions */ .preview-actions { display: flex; gap: 0.75rem; margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid hsl(var(--border)); } .preview-action-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.5rem 1rem; border-radius: 0.5rem; font-size: 0.875rem; font-weight: 500; border: none; cursor: pointer; transition: all 0.15s ease; flex: 1; } .preview-action-btn.primary { background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); } .preview-action-btn.primary:hover { opacity: 0.9; } .preview-action-btn.secondary { background: hsl(var(--muted)); color: hsl(var(--muted-foreground)); } .preview-action-btn.secondary:hover { color: hsl(var(--destructive)); background: hsl(var(--destructive) / 0.1); }