/* ==========================================================================
   Insights Bar — סרגל סקירה
   - תמיד מציג metrics סטטיסטיים (LTV, עסקאות, לקוחות, הכנסות)
   - כשיש משימות לביצוע: banner conditional מופיע מעל "יש לך X משימות"
   Figma: 34493:52109 (App-Tickchak)
   ========================================================================== */

/* ===== Wrapper ===== */
.insights-wrap{
  display:flex;
  flex-direction:column;
  direction:rtl;
}

/* ============================================================
   TASKS BANNER — בתוך ה-greeting, מופיע רק עם .has-tasks
   ============================================================ */
.ib-tasks-banner{
  display:none;
  align-items:center;
  gap:var(--space-sm);
  padding:var(--space-sm);
  background:var(--ta-color-state-warning-bg);
  border:1px solid var(--ta-color-state-warning-main);
  border-radius:var(--border-radius-full,999px);
  font-family:var(--font-family-app);
  animation:ib-banner-in .35s cubic-bezier(.2,.9,.3,1);
}
.insights-wrap.has-tasks .ib-tasks-banner{display:inline-flex;}

.ib-tasks-banner__icon{
  width:28px;height:28px;
  display:flex;align-items:center;justify-content:center;
  background:var(--ta-color-state-warning-main);
  border-radius:100px;
  color:#fff;
  flex-shrink:0;
  font-size:16px;
  font-weight:700;
}
.ib-tasks-banner__text{
  display:flex;
  flex-direction:column;
  gap:2px;
}
.ib-tasks-banner__title{
  font-size:var(--font-size-body-small);
  color:var(--ta-color-text-default);
  font-weight:700;
  line-height:14px;
  margin:0;
  white-space:nowrap;
}
.ib-tasks-banner__sub{
  font-size:var(--font-size-body-small);
  color:var(--ta-color-text-default);
  font-weight:400;
  line-height:14px;
  margin:0;
  white-space:nowrap;
}

@keyframes ib-banner-in{
  from{opacity:0;transform:translateY(-4px);}
  to{opacity:1;transform:translateY(0);}
}

/* ============ Banner variants — default vs tasks-mode ============ */
.ib-tasks-banner__variant{
  display:none;
  align-items:center;
  gap:var(--space-md);
}
.insights-wrap.has-tasks:not(.is-tasks-mode) .ib-tasks-banner__variant--default{display:flex;}
.insights-wrap.is-tasks-mode .ib-tasks-banner__variant--tasks{display:flex;}

/* In tasks-mode, banner takes a different (calmer) look */
.insights-wrap.is-tasks-mode .ib-tasks-banner{
  background:var(--ta-color-bg-surface);
  border-color:var(--ta-color-border-subtle);
}
.insights-wrap.is-tasks-mode .ib-tasks-banner__icon{
  background:var(--color-grays-700);
}

/* ============================================================
   THE BAR ITSELF
   ============================================================ */
.insights-bar{
  position:relative;
  background:var(--ta-color-bg-base);
  border-radius:var(--space-sm);
  padding:var(--space-lg) var(--space-lg);
  display:flex;
  align-items:flex-start;
  justify-content:flex-end;
  gap:var(--space-2xl);
  min-height:156px;
  font-family:var(--font-family-app);
  transition:min-height .35s cubic-bezier(.4,0,.2,1);
}

/* ===== Collapse button — toggles the whole bar ===== */
.ib-collapse-btn{
  position:absolute;
  top:var(--space-sm);
  left:var(--space-sm);
  z-index:1;
}
.ib-collapse-btn svg{
  width:var(--dim-4);
  height:var(--dim-4);
  transition:transform .3s ease;
}
.insights-wrap.is-collapsed .ib-collapse-btn svg{transform:rotate(180deg);}

/* ===== Collapsed state: כל הסרגל מתכווץ ל-pill ===== */
.insights-wrap.is-collapsed .insights-bar{
  height:var(--dim-11);
  cursor:pointer;
}

/* ===== Greeting (right side in RTL) ===== */
.ib-greeting{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:var(--space-md);
  text-align:right;
  flex-shrink:0;
}
.ib-greeting__top{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
}
.ib-greeting__title{
  font-size:28px;
  line-height:1.15;
  margin:0;
  color:var(--ta-color-text-default);
  white-space:nowrap;
}
.ib-greeting__title .light{font-weight:300;}
.ib-greeting__title .name{font-weight:700;}
.ib-greeting__sub{
  font-size:var(--font-size-body);
  font-weight:400;
  line-height:1.4;
  color:var(--ta-color-text-subtle);
  margin:0;
  white-space:nowrap;
}

/* ===== Vertical divider ===== */
.ib-divider{
  width:1px;
  align-self:stretch;
  margin-block:var(--space-lg);
  background:var(--ta-color-border-subtle);
  flex-shrink:0;
}

/* ===== Cards row ===== */
.ib-cards{
  flex:1 1 0;
  min-width:0;
  display:flex;
  flex-wrap:wrap;
  align-items:flex-start;
  align-content:flex-start;
  justify-content:flex-end;
  gap:var(--space-lg);
}

.ib-card{
  flex:1 1 auto;
  min-width:130px;
  max-width:calc(50% - var(--space-lg) / 2);
  min-height:108px;
  padding:0 var(--space-sm);
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:var(--space-sm);
  border-radius:var(--space-md);
  transition:background .2s ease;
  text-align:right;
}
.ib-card.is-clickable{cursor:pointer;}

.ib-card__head{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
}
.ib-card__label{
  display:flex;
  flex-direction:row-reverse;
  align-items:center;
  gap:4px;
  font-size:var(--font-size-body);
  font-weight:400;
  line-height:1.4;
  color:var(--ta-color-text-subtle);
  white-space:nowrap;
}
.ib-card__label svg{width:16px;height:16px;flex-shrink:0;}

.ib-card__value-row{
  display:flex;
  align-items:center;
  gap:4px;
}
.ib-card__value{
  font-size:var(--font-size-text-metric-primary);
  font-weight:700;
  line-height:1;
  color:var(--ta-color-text-default);
  white-space:nowrap;
  margin:0;
}

.ib-trend{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:0;
}
.ib-trend svg{width:18px;height:15px;}
.ib-trend__pct{
  font-size:11.5px;
  font-weight:700;
  line-height:1;
  color:var(--color-green-400);
}

/* ===== Filters ===== */
.ib-filters{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:var(--space-sm);
  flex-shrink:0;
}
.ib-filter{
  background:var(--ta-color-bg-surface);
  height:32px;
  width:160px;
  border-radius:100px;
  padding:0 var(--space-lg);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--space-md);
  cursor:pointer;
  border:none;
  font-family:inherit;
}
.ib-filter:hover{background:var(--ta-color-bg-surface-hover);}
.ib-filter__label{
  font-size:var(--font-size-button-category);
  font-weight:700;
  line-height:16px;
  color:var(--ta-color-text-default);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  min-width:0;
}
.ib-filter__chev{
  width:16px;height:16px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
}

/* ============================================================
   MODE SWITCHING — data cards vs tasks cards
   ============================================================ */
.ib-cards--tasks{display:none;}
.insights-wrap.is-tasks-mode .ib-cards--data{display:none;}
.insights-wrap.is-tasks-mode .ib-cards--tasks{display:flex;}

/* Task card variant */
.ib-card.is-task .ib-card__label{
  color:var(--color-oranges-400);
  font-weight:700;
}
.ib-card.is-task.is-danger .ib-card__label{
  color:var(--color-reds-400);
}
.ib-card.is-task .ib-card__value{
  color:var(--ta-color-text-default);
}
.ib-card.is-task .btn.chip{
  margin-top:0;
}