/* ==========================================================================
   Task Card — קומפוננט קוביית משימה לסרגל ה-Insights / popup משימות
   Figma: 36448:10111 (App-Tickchak) — Component "Task Card"
   Props: Number / Label / Caption / Show Caption / Icon
   Usage: רקע inverse (Grays/700 / #333) — הקארד שקוף עם border, טקסט לבן
   ========================================================================== */

.task-card{
  min-width:140px;
  height:156px;                       /* Figma master h=156 (was 140) */
  border:1px solid var(--ta-color-border-inverse-subtle, rgba(255,255,255,0.2));
  border-radius:var(--space-md, 12px);
  padding:var(--space-lg, 16px);
  display:flex;
  flex-direction:column;
  gap:var(--space-lg, 16px);          /* Figma itemSpacing between top section and CTA */
  align-items:flex-start;             /* RTL: flex-start = right edge */
  box-sizing:border-box;
  font-family:var(--font-family-app);
}

/* ===== Top stack: meta row + label + optional caption — fills the available space (≈80 in 156 card) ===== */
.task-card__top{
  flex:1 0 0;
  display:flex;
  flex-direction:column;
  gap:var(--space-xs, 4px);
  align-items:flex-start;             /* RTL: flex-start = right */
  width:100%;
  min-height:0;
}

/* ===== Number + icon row (icon RIGHT, number LEFT in RTL) ===== */
.task-card__meta{
  display:flex;
  flex-direction:row-reverse;         /* swap: icon right, number left */
  gap:var(--space-sm, 8px);
  align-items:center;
  justify-content:flex-end;           /* with row-reverse: flex-end pins group to right */
}

.task-card__num{
  font-size:var(--font-size-text-metric-primary, 32px);
  font-weight:var(--font-weight-bold, 700);
  line-height:24px;
  color:var(--ta-color-text-inverse-default, #fff);
  margin:0;
  text-align:center;
  white-space:nowrap;
}

.task-card__icon{
  width:24px;
  height:24px;
  color:var(--ta-color-text-inverse-default, #fff);
  flex-shrink:0;
  display:inline-flex;
}
.task-card__icon svg,
.task-card__icon img{width:100%;height:100%;display:block;}

/* ===== Label (main text) ===== */
.task-card__label{
  font-size:var(--font-size-body, 16px);
  font-weight:var(--font-weight-regular, 400);
  line-height:1.4;
  color:var(--ta-color-text-inverse-default, #fff);
  text-align:right;
  margin:0;
  white-space:nowrap;
}

/* ===== Caption (optional sub-label "X+ היום") ===== */
.task-card__caption{
  font-size:var(--font-size-caption, 12px);
  font-weight:var(--font-weight-semibold, 600);
  line-height:var(--dimension-4, 16px);
  color:var(--ta-color-text-disabled-brand, #b1b1b1);
  text-align:right;
  margin:0;
  white-space:nowrap;
}

/* ===== CTA Button — h-28, pill, px-lg (16px), gap-sm (8px) per Figma ===== */
.task-card__cta{
  width:100%;
  height:28px;
  padding:0 var(--space-lg, 16px);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:var(--space-sm, 8px);
  background:var(--ta-color-brand-main, #8eedff);
  color:var(--ta-color-text-default, #000);
  border:none;
  border-radius:100px;
  font-family:inherit;
  font-size:var(--font-size-button-chip, 12px);
  font-weight:var(--font-weight-bold, 700);
  line-height:16px;
  cursor:pointer;
  transition:background .15s ease;
}
.task-card__cta:hover{background:var(--ta-color-brand-hover, #c0f6ff);}