/* RESET (IMPORTANT FOR MOBILE FIX) */
* {box-sizing: border-box;}
.dashboard 
{
  display: grid;
  gap: 16px;
  padding: 16px;
  scroll-behavior: smooth;
  /* ? FULL WIDTH MOBILE */
  width: 100%;
  max-width: 100%;
  /* Mobile first */
  grid-template-columns: 1fr;
}
/* Tablet */
@media (min-width: 576px) 
{
  .dashboard {
    grid-template-columns: repeat(2, 1fr);
    max-width: 100%;
     padding: 12px;
    gap: 12px;
  }
}
/* Laptop */
@media (min-width: 992px) 
{
  .dashboard {
    grid-template-columns: repeat(3, 1fr);
    max-width: 1100px;
    margin: 0 auto; /* center only on large screens */
  }
}
/* Desktop */
@media (min-width: 1200px) 
{
  .dashboard {
    grid-template-columns: repeat(5, 1fr);
    max-width: 1200px;
    margin: 0 auto;
}
}
/* Card */
.card 
{
  background: #fff;
  border-radius: 14px;
  padding: 16px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.08);
  width: 100%;
  min-width: 0; /* prevents overflow issues */
  overflow: visible; /* ?? REQUIRED */    
  transition: all 0.2s ease;
  opacity: 0;
  transform: none; /* ?? FIX TOOLTIP ISSUE */
  animation: fadeUp 0.5s ease forwards;
}
@keyframes fadeUp 
{
  from {
    opacity: 0;
    transform: translateY(20px);
}
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* Tap effect */
.card:active 
{
  transform: scale(0.98);
}
/* Stagger effect */
.card:nth-child(1) { animation-delay: 0.1s; }
.card:nth-child(2) { animation-delay: 0.2s; }
.card:nth-child(3) { animation-delay: 0.3s; }
.card:nth-child(4) { animation-delay: 0.4s; }
.card h3 
{
  margin-bottom: 10px;
  color: #333;
  font-size: 15px;
  font-weight: 600;
}
/* Best Badge */
.best 
{
  font-size: 11px;
  color: #fff;
  background: linear-gradient(90deg,#f59e0b,#f97316);
  padding: 4px 10px;
  border-radius: 20px;
  display: inline-block;
  margin-bottom: 8px;
  font-weight: 500;
}
/* KPI */
.kpi 
{
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.return 
{
  font-size: 24px;
  font-weight: bold;
}
.positive { color: #16a34a; }
.negative { color: #dc2626; }
/* Badge Fix */
.badge 
{
  font-size: 12px;
  padding: 3px 8px;
  border-radius: 6px;
  gap: 4px;
  height: 22px;
  display: flex;
  align-items: center;
}
.badge .icon 
{
  font-size: 10px;
}
.strong { background: #dcfce7; color: #166534; }
.good { background: #e0f2fe; color: #0369a1; }
.low { background: #fef3c7; color: #92400e; }
/* Text */
.profit 
{
  font-size: 18px;
  font-weight: bold;
  margin-top: 6px;
}
.header 
{
  position: sticky;
  top: 0;
  z-index: 100;
  background: #ffffff;
  padding: 12px 16px;
  border-bottom: 1px solid #e5e7eb;
  width: 100%;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}
.header h2 
{
  margin: 0;
  font-size: 16px;
  font-weight: 600;
}
/* ===== META LAYOUT ===== */
.meta 
{
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 13px;
}
/* ROW ALIGNMENT */
.meta-row 
{
  display: flex;
  justify-content: space-between;
  align-items: center;
}
/* LABEL */
.meta-row span:first-child 
{
  color: #6b7280;
}
/* VALUE */
.meta-row span:last-child 
{
  font-weight: 500;
  color: #111827;
  display: flex;
  align-items: center;
  gap: 6px;
}
/* ===== PROGRESS ===== */
.progress 
{
  height: 6px;
  background: #e5e7eb;
  border-radius: 6px;
  overflow: hidden;
}
.progress-fill 
{
  height: 100%;
  border-radius: 6px;
}
/* spacing fix */
.progress + .meta-row 
{
  margin-top: 8px;
}
/* ===== TOOLTIP FIXED VERSION ===== */ header
/* Container for the tooltip */
.tooltip
{
  position: relative;
  display: inline-block;
  margin-left: 6px;
  cursor: pointer;
}
/* Hidden tooltip text */
.tooltip .tooltiptext 
{
  visibility: hidden;
  width: 170px;
  background-color: #333;
  color: #fff;
  text-align: center;
  border-radius: 5px;
  padding: 5px;
  /* Positioning */
  position: absolute;
  z-index: 9999;
  bottom: 125%; /* Places it above the text */
  left: 50%;
  transform: translateX(-50%);
  margin-left: -60px;
  opacity: 0;
  font-size: 10px;
  transition: opacity 0.3s;
}
/* Show tooltip on hover */
.tooltip:hover .tooltiptext 
{
  visibility: visible;
  opacity: 1;
  background-color: #333;
  color: #fff;
}
/* CENTER CONTENT PROPERLY */
.header-content 
{
  text-align: center;
}
/* TITLE */
.header h2 
{
  margin: 0;
  font-size: 16px;
  font-weight: 600;
}
/* MINI NOTE (FIXED) */
.mini-note 
{
  font-size: 11px;
  color: #6b7280;
  margin-top: 4px;
  line-height: 1.3;
}
/* ============== BROKERAGE PLAN TAG ======================== */
.tag {
  font-size: 11px;
  background: rgba(255,255,255,0.2);
  padding: 3px 6px;
  border-radius: 4px;
  margin-left: 6px;
}
/* NOTE */
.note {
  margin-top: 12px;
  font-size: 11px;
  opacity: 0.8;
}