/* [Windsurf AI Update] Overview Card Component CSS per mockup requirements */
/* Scope everything under #overview-card */
#overview-card { 
  --oc-radius: 18px; 
  --oc-shadow: 0 12px 30px rgba(2, 8, 23, 0.12);
  --oc-bg: #ffffff; 
  --oc-text: #0f172a; 
  --oc-subtle: #475569; 
  --oc-border: #eef2f7;
  --oc-orange-1: #ffb54a; 
  --oc-orange-2: #ff8a00;
  --oc-green-1: #59d382; 
  --oc-green-2: #18a558;
  --oc-blue-1:  #77a7ff; 
  --oc-blue-2:  #3d7bff;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  color: var(--oc-text);
}

#overview-card .oc-surface {
  background: var(--oc-bg);
  border-radius: 24px;
  padding: 20px 20px 24px;
  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: 28px; 
  line-height: 1.2; 
  letter-spacing: -0.02em; 
  margin: 0; 
}

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

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

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

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

#overview-card .oc-stat {
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--oc-border);
  min-height: 150px; /* increased height for better text visibility */
  display: grid;
  grid-template-rows: 40% 60%; /* adjusted ratio for more bottom space */
  box-shadow: 0 6px 18px rgba(2,8,23,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; /* increased padding for better text spacing */
  text-align: center;
}

#overview-card .oc-number { 
  font-size: 36px; 
  font-weight: 800; 
  margin-bottom: 6px; /* increased margin for better spacing */
}

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

/* Color themes for the top band */
#overview-card .oc-stat--orange .oc-stat-top { 
  background: linear-gradient(180deg, var(--oc-orange-1), var(--oc-orange-2)); 
  color: #fff; 
}

#overview-card .oc-stat--green .oc-stat-top  { 
  background: linear-gradient(180deg, var(--oc-green-1), var(--oc-green-2)); 
  color: #fff; 
}

#overview-card .oc-stat--blue .oc-stat-top   { 
  background: linear-gradient(180deg, var(--oc-blue-1),  var(--oc-blue-2));  
  color: #fff; 
}

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

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

#overview-card .oc-activity-title h3 { 
  font-size: 20px; 
  letter-spacing: -0.01em; 
  margin: 0; 
}

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

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

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

#overview-card .oc-activity-text { 
  font-size: 16px; 
}

/* 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: 30px; 
  }
  
  #overview-card .oc-number { 
    font-size: 38px; 
  }
}