harshapitla/stackoverflow

1/* ================= KPI OVERVIEW CONTAINER ================= */2.kpi-overview-container {3  max-width: 1400px;4  margin: 0 auto;5  padding: 20px;6  background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);7  min-height: 100vh;8}9 10/* ================= HEADER SECTION ================= */11.kpi-header-section {12  display: flex;13  justify-content: space-between;14  align-items: flex-start;15  margin-bottom: 32px;16  padding: 24px;17  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);18  border-radius: 20px;19  color: white;20  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1),21    0 10px 10px -5px rgba(0, 0, 0, 0.04);22}23 24.kpi-title-area h1 {25  margin: 0 0 8px 0;26  font-size: 2.5rem;27  font-weight: 700;28  background: linear-gradient(135deg, #ffffff 0%, #f0f9ff 100%);29  -webkit-background-clip: text;30  -webkit-text-fill-color: transparent;31  background-clip: text;32}33 34.kpi-subtitle {35  display: flex;36  align-items: center;37  gap: 8px;38  font-size: 1rem;39  opacity: 0.9;40}41 42.live-indicator {43  color: #10b981;44  animation: pulse 2s infinite;45}46 47@keyframes pulse {48  0%,49  100% {50    opacity: 1;51  }52  50% {53    opacity: 0.5;54  }55}56 57.kpi-controls {58  display: flex;59  gap: 8px;60}61 62.view-toggle {63  padding: 8px 16px;64  background: rgba(255, 255, 255, 0.1);65  border: 1px solid rgba(255, 255, 255, 0.2);66  border-radius: 8px;67  color: white;68  cursor: pointer;69  transition: all 0.3s ease;70  font-size: 14px;71}72 73.view-toggle:hover {74  background: rgba(255, 255, 255, 0.2);75  transform: translateY(-1px);76}77 78.view-toggle.active {79  background: rgba(255, 255, 255, 0.3);80  border-color: rgba(255, 255, 255, 0.4);81}82 83/* ================= FEATURED METRICS ================= */84.featured-metrics-row {85  display: grid;86  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));87  gap: 20px;88  margin-bottom: 32px;89}90 91.featured-metric {92  display: flex;93  align-items: center;94  gap: 20px;95  padding: 24px;96  background: white;97  border-radius: 16px;98  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),99    0 4px 6px -2px rgba(0, 0, 0, 0.05);100  transition: all 0.3s ease;101  border: 1px solid transparent;102  background-clip: padding-box;103  position: relative;104}105 106.featured-metric::before {107  content: "";108  position: absolute;109  top: 0;110  left: 0;111  right: 0;112  bottom: 0;113  border-radius: 16px;114  padding: 2px;115  background: linear-gradient(135deg, #667eea, #764ba2, #f093fb);116  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);117  -webkit-mask-composite: xor;118  mask-composite: exclude;119  opacity: 0.5;120}121 122.featured-metric:hover {123  transform: translateY(-4px);124  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.15),125    0 10px 10px -5px rgba(0, 0, 0, 0.04);126}127 128.featured-icon {129  font-size: 3rem;130  width: 80px;131  height: 80px;132  display: flex;133  align-items: center;134  justify-content: center;135  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);136  border-radius: 16px;137  flex-shrink: 0;138}139 140.featured-content {141  flex: 1;142}143 144.featured-title {145  font-size: 0.875rem;146  color: #64748b;147  text-transform: uppercase;148  letter-spacing: 0.05em;149  margin-bottom: 4px;150}151 152.featured-value {153  font-size: 2rem;154  font-weight: 700;155  color: #1e293b;156  margin-bottom: 4px;157}158 159.featured-subtitle {160  font-size: 0.875rem;161  color: #64748b;162  margin-bottom: 8px;163}164 165.featured-description {166  font-size: 0.75rem;167  color: #94a3b8;168  line-height: 1.4;169}170 171/* ================= KPI GRID ================= */172.kpi-grid {173  display: grid;174  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));175  gap: 20px;176  margin-bottom: 32px;177}178 179.kpi-grid.list {180  grid-template-columns: 1fr;181}182 183.kpi-card {184  background: white;185  border-radius: 16px;186  padding: 24px;187  border: 2px solid #e2e8f0;188  cursor: pointer;189  transition: all 0.3s ease;190  position: relative;191  overflow: hidden;192}193 194.kpi-card::before {195  content: "";196  position: absolute;197  top: 0;198  left: 0;199  right: 0;200  height: 4px;201  background: linear-gradient(90deg, #667eea, #764ba2);202  transform: scaleX(0);203  transition: transform 0.3s ease;204}205 206.kpi-card:hover {207  transform: translateY(-2px);208  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),209    0 4px 6px -2px rgba(0, 0, 0, 0.05);210  border-color: #cbd5e1;211}212 213.kpi-card:hover::before {214  transform: scaleX(1);215}216 217.kpi-card.active {218  border-color: #667eea;219  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);220}221 222.kpi-header {223  display: flex;224  justify-content: space-between;225  align-items: center;226  margin-bottom: 12px;227}228 229.kpi-icon {230  font-size: 1.5rem;231  display: inline-block;232  transition: transform 0.3s ease;233}234 235.kpi-icon.bounce {236  animation: bounce 0.6s ease;237}238 239@keyframes bounce {240  0%,241  100% {242    transform: translateY(0);243  }244  50% {245    transform: translateY(-10px);246  }247}248 249.kpi-title {250  font-size: 0.875rem;251  color: #475569;252  font-weight: 600;253  text-transform: uppercase;254  letter-spacing: 0.025em;255}256 257.kpi-trend {258  font-size: 0.75rem;259  font-weight: 600;260  padding: 2px 6px;261  border-radius: 4px;262}263 264.kpi-trend.positive {265  color: #10b981;266  background: rgba(16, 185, 129, 0.1);267}268 269.kpi-trend.negative {270  color: #ef4444;271  background: rgba(239, 68, 68, 0.1);272}273 274.kpi-value-container {275  margin-bottom: 12px;276}277 278.kpi-value {279  font-size: 2rem;280  font-weight: 700;281  color: #1e293b;282  margin-bottom: 8px;283}284 285.kpi-progress-bar {286  height: 6px;287  background: #f1f5f9;288  border-radius: 3px;289  overflow: hidden;290}291 292.kpi-progress-fill {293  height: 100%;294  background: linear-gradient(90deg, #667eea, #764ba2);295  border-radius: 3px;296  transition: width 0.6s ease;297}298 299.kpi-sub {300  font-size: 0.875rem;301  color: #64748b;302}303 304/* ================= ACCENT COLORS ================= */305.kpi-card.accent-primary {306  border-color: #667eea;307}308 309.kpi-card.accent-primary:hover {310  border-color: #5a67d8;311}312 313.kpi-card.accent-secondary {314  border-color: #48bb78;315}316 317.kpi-card.accent-secondary:hover {318  border-color: #38a169;319}320 321.kpi-card.accent-success {322  border-color: #10b981;323}324 325.kpi-card.accent-success:hover {326  border-color: #059669;327}328 329.kpi-card.accent-warning {330  border-color: #f59e0b;331}332 333.kpi-card.accent-warning:hover {334  border-color: #d97706;335}336 337.kpi-card.accent-danger {338  border-color: #ef4444;339}340 341.kpi-card.accent-danger:hover {342  border-color: #dc2626;343}344 345.kpi-card.accent-info {346  border-color: #3b82f6;347}348 349.kpi-card.accent-info:hover {350  border-color: #2563eb;351}352 353/* ================= INSIGHTS SECTION ================= */354.insights-section {355  margin-bottom: 32px;356}357 358.insights-header {359  margin-bottom: 20px;360}361 362.insights-header h2 {363  margin: 0 0 8px 0;364  font-size: 1.5rem;365  color: #1e293b;366}367 368.insights-subtitle {369  color: #64748b;370  font-size: 0.875rem;371}372 373.insights-grid {374  display: grid;375  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));376  gap: 16px;377}378 379.insight-card {380  display: flex;381  align-items: flex-start;382  gap: 12px;383  padding: 16px;384  border-radius: 12px;385  transition: all 0.3s ease;386}387 388.insight-card:hover {389  transform: translateY(-2px);390}391 392.insight-card.insight-success {393  background: linear-gradient(394    135deg,395    rgba(16, 185, 129, 0.1),396    rgba(16, 185, 129, 0.05)397  );398  border: 1px solid rgba(16, 185, 129, 0.2);399}400 401.insight-card.insight-warning {402  background: linear-gradient(403    135deg,404    rgba(245, 158, 11, 0.1),405    rgba(245, 158, 11, 0.05)406  );407  border: 1px solid rgba(245, 158, 11, 0.2);408}409 410.insight-card.insight-info {411  background: linear-gradient(412    135deg,413    rgba(59, 130, 246, 0.1),414    rgba(59, 130, 246, 0.05)415  );416  border: 1px solid rgba(59, 130, 246, 0.2);417}418 419.insight-icon {420  font-size: 1.25rem;421  flex-shrink: 0;422  margin-top: 2px;423}424 425.insight-text {426  font-size: 0.875rem;427  line-height: 1.5;428  color: #374151;429}430 431/* ================= SUMMARY STATS ================= */432.summary-stats {433  display: grid;434  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));435  gap: 20px;436  padding: 24px;437  background: white;438  border-radius: 16px;439  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),440    0 4px 6px -2px rgba(0, 0, 0, 0.05);441}442 443.stat-item {444  text-align: center;445  padding: 16px;446  border-radius: 12px;447  background: linear-gradient(135deg, #f8fafc, #e2e8f0);448  transition: all 0.3s ease;449}450 451.stat-item:hover {452  transform: translateY(-2px);453  background: linear-gradient(135deg, #e2e8f0, #cbd5e1);454}455 456.stat-label {457  font-size: 0.75rem;458  color: #64748b;459  text-transform: uppercase;460  letter-spacing: 0.05em;461  margin-bottom: 8px;462}463 464.stat-value {465  font-size: 1.5rem;466  font-weight: 700;467  color: #1e293b;468  margin-bottom: 4px;469}470 471.stat-period {472  font-size: 0.75rem;473  color: #94a3b8;474}475 476/* ================= RANK (Legacy Support) ================= */477.rank-grid {478  display: grid;479  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));480  gap: 16px;481}482 483.rank-card {484  background: #fff;485  border-radius: 14px;486  padding: 18px;487  border: 1px solid #e5e7eb;488}489 490.rank-header h3 {491  margin: 0;492  font-size: 16px;493}494 495.rank-header p {496  margin: 4px 0 14px;497  font-size: 13px;498  color: #64748b;499}500 501/* ================= PROGRESS (Legacy Support) ================= */502.progress-row {503  margin-bottom: 14px;504}505 506.progress-top {507  display: flex;508  justify-content: space-between;509  font-size: 14px;510  margin-bottom: 4px;511}512 513.progress-name {514  flex: 1;515  margin-left: 6px;516  white-space: nowrap;517  overflow: hidden;518  text-overflow: ellipsis;519}520 521.progress-bar {522  height: 6px;523  background: #eef2ff;524  border-radius: 4px;525}526 527.progress-fill {528  height: 100%;529  background: linear-gradient(90deg, #6366f1, #a5b4fc);530  border-radius: 4px;531}532 533.view-all {534  margin-top: 10px;535  font-size: 13px;536  color: #2563eb;537  cursor: pointer;538}539 540/* ================= RESPONSIVE DESIGN ================= */541@media (max-width: 768px) {542  .kpi-overview-container {543    padding: 12px;544  }545 546  .kpi-header-section {547    flex-direction: column;548    gap: 16px;549    padding: 20px;550  }551 552  .kpi-title-area h1 {553    font-size: 1.75rem;554  }555 556  .featured-metrics-row {557    grid-template-columns: 1fr;558  }559 560  .kpi-grid {561    grid-template-columns: 1fr;562  }563 564  .insights-grid {565    grid-template-columns: 1fr;566  }567 568  .summary-stats {569    grid-template-columns: repeat(2, 1fr);570    gap: 12px;571  }572}573 574@media (max-width: 480px) {575  .summary-stats {576    grid-template-columns: 1fr;577  }578 579  .featured-metric {580    flex-direction: column;581    text-align: center;582  }583 584  .featured-icon {585    margin: 0 auto;586  }587}588