/* Overview Card Component CSS - Clean Professional Style */
#overview-card { 
  --oc-radius: 12px; 
  --oc-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  --oc-bg: #ffffff; 
  --oc-text: #2d3748; 
  --oc-subtle: #718096; 
  --oc-border: #e2e8f0;
  --oc-orange-1: #f6ad55; 
  --oc-orange-2: #ed8936;
  --oc-green-1: #68d391; 
  --oc-green-2: #48bb78;
  --oc-blue-1:  #63b3ed; 
  --oc-blue-2:  #4A90E2;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  color: var(--oc-text);
}

#overview-card .oc-surface {
  background: var(--oc-bg);
  border-radius: 12px;
  padding: 20px;
  box-shadow: var(--oc-shadow);
  border: 1px solid var(--oc-border);
}

/* Header */
#overview-card .oc-header { 
  margin-bottom: 16px; 
}

#overview-card .oc-title-wrap { 
  display: flex; 
  align-items: center; 
  gap: 10px; 
}

#overview-card .oc-title { 
  font-size: 18px; 
  font-weight: 600;
  line-height: 1.2; 
  color: #2d3748;
  margin: 0; 
}

#overview-card .oc-title-icon svg rect:nth-child(1) { 
  fill: #336699; 
}

#overview-card .oc-title-icon svg rect:nth-child(2) { 
  fill: #4A90E2; 
}

#overview-card .oc-title-icon svg rect:nth-child(3) { 
  fill: #6CA0DC; 
}

/* Stats row */
#overview-card .oc-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin: 12px 0 18px;
}

#overview-card .oc-stat {
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--oc-border);
  min-height: 130px;
  display: grid;
  grid-template-rows: 36% 64%;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

#overview-card .oc-stat-top {
  display: flex; 
  align-items: center; 
  justify-content: center;
}

#overview-card .oc-stat-bottom {
  display: grid; 
  place-items: center;
  padding: 8px 8px 12px;
  text-align: center;
}

#overview-card .oc-number { 
  font-size: 32px; 
  font-weight: 700; 
  color: #2d3748;
  margin-bottom: 4px;
}

#overview-card .oc-label { 
  font-size: 13px; 
  color: var(--oc-subtle); 
  line-height: 1.1; 
}

/* Color themes for the top band */
#overview-card .oc-stat--orange .oc-stat-top { 
  background: #f6ad55; 
  color: #fff; 
}

#overview-card .oc-stat--green .oc-stat-top  { 
  background: #48bb78; 
  color: #fff; 
}

#overview-card .oc-stat--blue .oc-stat-top   { 
  background: #4A90E2;  
  color: #fff; 
}

#overview-card .oc-emoji { 
  font-size: 20px; 
}

/* Recent Activity */
#overview-card .oc-activity-title { 
  display: flex; 
  align-items: center; 
  gap: 8px; 
  margin: 6px 0 8px; 
}

#overview-card .oc-activity-title h3 { 
  font-size: 16px; 
  font-weight: 600;
  color: #2d3748;
  margin: 0; 
}

#overview-card .oc-activity-list { 
  list-style: none; 
  padding: 0; 
  margin: 0; 
  display: grid; 
  gap: 8px; 
}

#overview-card .oc-activity-item {
  display: grid; 
  grid-template-columns: 28px 1fr; 
  align-items: start; 
  gap: 10px;
  padding: 10px 12px; 
  border-radius: 8px; 
  border: 1px solid var(--oc-border); 
  background: #f8fafc;
}

#overview-card .oc-activity-icon-badge { 
  font-size: 16px; 
  line-height: 1; 
  margin-top: 2px; 
}

#overview-card .oc-activity-text { 
  font-size: 14px; 
  color: #4a5568;
}

/* Responsive */
@media (max-width: 420px) {
  #overview-card .oc-stats { 
    grid-template-columns: 1fr; 
  }
}

@media (min-width: 421px) and (max-width: 767px) {
  #overview-card .oc-stats { 
    grid-template-columns: repeat(3, 1fr); 
  }
}

@media (min-width: 768px) {
  #overview-card .oc-title { 
    font-size: 20px; 
  }
  
  #overview-card .oc-number { 
    font-size: 36px; 
  }
}