/* Professional Portfolio & Pipeline Styles */

/* Executive Summary Metrics */
.portfolio-executive-summary .summary-metric {
  @apply flex flex-col items-center space-y-2 relative;
}

.portfolio-executive-summary .metric-icon {
  @apply mb-2;
}

.portfolio-executive-summary .metric-icon i {
  @apply text-2xl;
}

/* Professional Portfolio Filters */
.portfolio-filter-system .portfolio-filter {
  @apply px-4 py-2 bg-gray-800/40 text-gray-300 rounded-xl border border-gray-700/30 transition-all duration-300;
}

.portfolio-filter-system .portfolio-filter.active {
  @apply bg-electric-blue text-navy border-electric-blue;
}

.portfolio-filter-system .sector-filter {
  @apply px-3 py-1.5 bg-gray-700/30 text-gray-400 text-sm rounded-lg border border-gray-600/30 transition-all duration-300;
}

.portfolio-filter-system .sector-filter:hover {
  @apply bg-gray-600/40 text-gray-300 border-gray-500/40;
}

/* Section Headers */
.portfolio-section .section-header {
  @apply relative;
}

.portfolio-section .section-stats {
  @apply flex space-x-6;
}

.portfolio-section .stat-item {
  @apply text-center;
}

.portfolio-section .stat-value {
  @apply text-xl font-bold;
}

.portfolio-section .stat-label {
  @apply text-sm text-gray-400;
}

/* Flagship Company Card */
.flagship-company-card {
  position: relative;
  overflow: hidden;
}

.flagship-company-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.05) 0%, rgba(0, 212, 255, 0.05) 100%);
  pointer-events: none;
}

.flagship-designation .flagship-badge-premium {
  @apply bg-gradient-to-r from-gold/20 to-gold/10 border border-gold/30 rounded-full px-4 py-2 flex items-center;
}

/* Company Logo Animation */
.company-logo-flagship-enhanced {
  @apply relative;
}

.logo-animation-ring {
  @apply absolute inset-0 rounded-full border-2 border-gold/30;
  animation: logoRingPulse 3s ease-in-out infinite;
}

@keyframes logoRingPulse {
  0%, 100% { 
    transform: scale(1); 
    opacity: 0.3; 
  }
  50% { 
    transform: scale(1.2); 
    opacity: 0.7; 
  }
}

.logo-container {
  @apply w-16 h-16 bg-gradient-to-br from-gold/20 to-electric-blue/20 rounded-full flex items-center justify-center relative z-10;
}

/* Live Status Indicator */
.live-status-indicator .status-badge.active-premium {
  @apply bg-gradient-to-r from-success/20 to-success/10 border border-success/30 rounded-full px-4 py-2 flex items-center space-x-2;
}

.pulse-dot {
  @apply w-2 h-2 bg-success rounded-full;
  animation: pulseDot 2s ease-in-out infinite;
}

@keyframes pulseDot {
  0%, 100% { opacity: 0.5; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.2); }
}

/* Executive Summary */
.executive-summary .key-differentiators .differentiator-item {
  @apply flex items-start space-x-3 p-3 bg-gray-800/20 rounded-lg;
}

.executive-summary .differentiator-icon {
  @apply w-8 h-8 rounded-lg flex items-center justify-center flex-shrink-0;
}

/* Performance Dashboard */
.performance-dashboard-comprehensive .flagship-metric {
  @apply bg-gray-800/30 rounded-xl p-4 relative overflow-hidden;
}

.flagship-metric .metric-header {
  @apply flex items-center justify-between mb-3;
}

.flagship-metric .metric-icon {
  @apply w-8 h-8 rounded-lg flex items-center justify-center;
}

.flagship-metric .metric-trend {
  @apply flex items-center space-x-1 text-xs font-medium;
}

.flagship-metric .metric-trend.positive {
  @apply text-success;
}

.flagship-metric .metric-trend.exceptional {
  @apply text-gold;
}

.flagship-metric.primary::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: linear-gradient(180deg, var(--electric-blue), transparent);
}

.flagship-metric.success::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: linear-gradient(180deg, var(--gold), transparent);
}

.flagship-metric.premium::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: linear-gradient(180deg, var(--success), transparent);
}

.flagship-metric.highlight::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: linear-gradient(180deg, var(--warning), transparent);
}

/* Performance Chart */
.premium-chart-container {
  position: relative;
}

.chart-controls .chart-period {
  @apply px-3 py-1 text-sm text-gray-400 border border-gray-600/30 rounded-lg transition-all duration-300;
}

.chart-controls .chart-period.active {
  @apply bg-electric-blue text-navy border-electric-blue;
}

.performance-line {
  stroke-dasharray: 800;
  stroke-dashoffset: 800;
  animation: drawLine 2s ease-out forwards;
}

@keyframes drawLine {
  to {
    stroke-dashoffset: 0;
  }
}

.data-point {
  animation: fadeInPoint 0.5s ease-out forwards;
  opacity: 0;
}

.data-point:nth-child(1) { animation-delay: 0.5s; }
.data-point:nth-child(2) { animation-delay: 0.8s; }
.data-point:nth-child(3) { animation-delay: 1.1s; }
.data-point:nth-child(4) { animation-delay: 1.4s; }
.data-point:nth-child(5) { animation-delay: 1.7s; }
.data-point:nth-child(6) { animation-delay: 2.0s; }

@keyframes fadeInPoint {
  to { opacity: 1; }
}

.data-point.pulse {
  animation: fadeInPoint 0.5s ease-out 2.0s forwards, pulseDot 2s ease-in-out 2.5s infinite;
}

/* Strategic Impact */
.strategic-impact .impact-bar {
  @apply relative overflow-hidden;
}

.strategic-impact .impact-bar > div {
  @apply transition-all duration-1000 ease-out;
  animation: fillBar 1.5s ease-out forwards;
}

@keyframes fillBar {
  from { width: 0%; }
}

/* Future Outlook */
.future-outlook .outlook-milestone {
  @apply relative pl-4;
}

.future-outlook .milestone-indicator {
  @apply absolute left-0 top-1;
}

/* Action Buttons */
.btn-primary-premium {
  @apply bg-gradient-to-r from-electric-blue to-blue-600 text-white px-6 py-3 rounded-xl font-semibold transition-all duration-300 hover:shadow-lg hover:shadow-blue-500/25 hover:-translate-y-0.5;
}

.btn-secondary-premium {
  @apply bg-gradient-to-r from-gray-700 to-gray-800 text-white px-6 py-3 rounded-xl font-semibold transition-all duration-300 hover:bg-gradient-to-r hover:from-gray-600 hover:to-gray-700 hover:-translate-y-0.5;
}

.btn-tertiary-premium {
  @apply border-2 border-gray-600 text-gray-300 px-6 py-3 rounded-xl font-semibold transition-all duration-300 hover:border-electric-blue hover:text-electric-blue hover:-translate-y-0.5;
}

/* Active Companies */
.active-company-card {
  position: relative;
  transition: all 0.3s ease;
}

.active-company-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
}

.company-logo-small {
  @apply w-12 h-12 rounded-xl flex items-center justify-center text-lg;
}

.pulse-dot.active {
  @apply w-2 h-2 bg-success rounded-full;
  animation: pulseDot 2s ease-in-out infinite;
}

.metric-compact {
  @apply p-2;
}

.tag-compact {
  @apply px-2 py-1 bg-gray-700/40 text-gray-400 text-xs rounded-md border border-gray-600/30;
}

.tag-compact.active {
  @apply bg-success/20 text-success border-success/30;
}

.progress-track {
  @apply relative overflow-hidden;
}

.progress-track > div {
  @apply transition-all duration-1000 ease-out;
  animation: fillProgress 1.5s ease-out forwards;
}

@keyframes fillProgress {
  from { width: 0%; }
}

.milestone-progress {
  @apply relative;
}

/* Exit Companies */
.exit-company-card {
  @apply relative transition-all duration-300;
}

.exit-company-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
}

.exit-badge {
  @apply flex items-center space-x-2 px-3 py-1 rounded-full text-sm font-semibold;
}

.company-logo-exit {
  @apply w-10 h-10 rounded-lg flex items-center justify-center;
}

.investment-summary {
  @apply relative;
}

.tag-exit {
  @apply px-2 py-1 text-xs rounded-md border;
}

.tag-exit.success {
  @apply bg-success/20 text-success border-success/30 font-semibold;
}

.tag-exit:not(.success) {
  @apply bg-gray-700/40 text-gray-400 border-gray-600/30;
}

/* Pipeline Styles */
.pipeline-executive-dashboard .pipeline-metric {
  @apply flex flex-col items-center space-y-2;
}

.pipeline-metric .metric-icon {
  @apply mb-2;
}

.pipeline-metric .metric-icon i {
  @apply text-2xl;
}

/* Due Diligence Framework */
.framework-stages .stage-card {
  @apply relative transition-all duration-300;
}

.framework-stages .stage-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
}

.stage-number {
  @apply relative z-10;
}

.stage-criteria .criteria-item {
  @apply transition-all duration-300;
}

.stage-criteria .criteria-item:hover {
  @apply text-white;
}

/* Pipeline Companies */
.pipeline-company-card {
  @apply bg-gradient-to-br from-gray-800/60 to-gray-900/60 backdrop-blur-sm rounded-2xl p-6 border border-gray-700/30 relative transition-all duration-300;
}

.pipeline-company-card.high-priority {
  @apply border-electric-blue/20;
}

.pipeline-company-card.high-priority::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: linear-gradient(180deg, var(--electric-blue), var(--gold));
  border-radius: 0 0 0 1rem;
}

.pipeline-company-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
}

.stage-indicator {
  @apply flex items-center space-x-2 px-3 py-1 rounded-full text-sm;
}

.stage-indicator.technical {
  @apply bg-gold/20 text-gold border border-gold/30;
}

.stage-indicator.market {
  @apply bg-success/20 text-success border border-success/30;
}

.stage-indicator.financial {
  @apply bg-warning/20 text-warning border border-warning/30;
}

.stage-indicator .stage-dot {
  @apply w-2 h-2 rounded-full;
}

.stage-indicator.technical .stage-dot {
  @apply bg-gold;
  animation: pulseDot 2s ease-in-out infinite;
}

.stage-indicator.market .stage-dot {
  @apply bg-success;
  animation: pulseDot 2s ease-in-out infinite;
}

.stage-indicator.financial .stage-dot {
  @apply bg-warning;
  animation: pulseDot 2s ease-in-out infinite;
}

.priority-badge {
  @apply flex items-center space-x-1 px-3 py-1 rounded-full text-sm font-semibold;
}

.priority-badge.high {
  @apply bg-electric-blue/20 text-electric-blue border border-electric-blue/30;
}

.priority-badge.medium {
  @apply bg-gold/20 text-gold border border-gold/30;
}

.company-logo-pipeline {
  @apply w-12 h-12 rounded-xl flex items-center justify-center;
}

.tag-pipeline {
  @apply px-2 py-1 text-xs rounded-md border;
}

.tag-pipeline.technical {
  @apply bg-gold/20 text-gold border-gold/30;
}

.tag-pipeline.market {
  @apply bg-success/20 text-success border-success/30;
}

.tag-pipeline.financial {
  @apply bg-warning/20 text-warning border-warning/30;
}

/* Pipeline Filters */
.pipeline-filters .filter-tabs {
  @apply flex flex-wrap gap-2;
}

.pipeline-stage-filter {
  @apply px-4 py-2 text-sm rounded-xl transition-all duration-300 flex items-center space-x-2;
}

.pipeline-stage-filter.active {
  @apply bg-electric-blue text-navy;
}

.pipeline-stage-filter:not(.active) {
  @apply text-gray-400 hover:text-gray-300;
}

.pipeline-stage-filter .count {
  @apply bg-gray-700 text-white text-xs px-2 py-0.5 rounded-full;
}

.pipeline-stage-filter.active .count {
  @apply bg-navy text-electric-blue;
}

/* Analytics Dashboard */
.analytics-card .conversion-funnel .funnel-stage {
  @apply mb-4;
}

.analytics-card .funnel-bar {
  @apply relative overflow-hidden;
}

.analytics-card .funnel-bar > div {
  @apply transition-all duration-1000 ease-out;
  animation: fillBar 1.5s ease-out forwards;
}

.analytics-card .sector-distribution .sector-item {
  @apply mb-4;
}

.analytics-card .sector-bar {
  @apply relative overflow-hidden;
}

.analytics-card .sector-bar > div {
  @apply transition-all duration-1000 ease-out;
  animation: fillBar 1.5s ease-out forwards;
}

/* Responsive Design */
@media (max-width: 768px) {
  .flagship-company-card {
    @apply p-6;
  }
  
  .performance-dashboard-comprehensive .metrics-grid {
    @apply grid-cols-2 gap-4;
  }
  
  .framework-stages {
    @apply grid-cols-1 gap-4;
  }
  
  .pipeline-companies-grid {
    @apply grid-cols-1 gap-4;
  }
  
  .analytics-grid {
    @apply grid-cols-1 gap-6;
  }
}

@media (max-width: 640px) {
  .portfolio-executive-summary .grid {
    @apply grid-cols-2;
  }
  
  .pipeline-executive-dashboard .grid {
    @apply grid-cols-2;
  }
  
  .performance-dashboard-comprehensive .metrics-grid {
    @apply grid-cols-1 gap-4;
  }
}