/* ==========================================================================
   Page Header — כותרת דף + dropdown תקופה + שורת metrics
   Figma 37431:23074 (App-Tickchak)
   RTL: DOM order שומר על הויזואלי (label ראשון = ימין)
   ========================================================================== */

.page-header{
  display:flex;
  flex-direction:column;
  align-items:flex-start;           /* RTL: flex-start = ימין */
  gap:var(--space-xl);
  width:100%;
  padding:var(--space-sm) 0 var(--space-xl);
  background:#fff;
  border-radius:var(--space-sm);
  font-family:var(--font-family-app);
}

/* ===== Row 1 — title + period dropdown ===== */
.page-header__top{
  display:flex;
  align-items:center;
  justify-content:flex-start;       /* RTL: start = ימין; DOM order: title first → rightmost */
  gap:var(--space-xl);
}

.page-header__title{
  font-size:28px;
  font-weight:300;                  /* Assistant Light */
  line-height:1.15;
  color:var(--ta-color-text-default);
  margin:0;
  white-space:nowrap;
}

/* Period dropdown — מבוסס Button System: btn category app
   override: width 150 + justify-between כדי שהחץ ייצמד לקצה */
.btn.page-header__period{
  width:150px;
  justify-content:space-between;
}
.page-header__period .btn-chev{
  width:16px;height:16px;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
  color:var(--ta-color-text-default);
}
.page-header__period .btn-chev svg{display:block;}

/* ===== Row 2 — metrics row ===== */
.page-header__metrics{
  display:flex;
  flex-direction:row-reverse;       /* RTL + row-reverse: DOM 1 (ביטולים) → שמאל, DOM 4 (LTV) → ימין */
  flex-wrap:wrap;
  align-items:flex-start;
  justify-content:flex-end;         /* RTL row-reverse: flex-end = ימין */
  gap:var(--space-3xl);             /* 48px */
}

.page-metric{
  display:flex;
  flex-direction:column;
  align-items:flex-start;           /* RTL: flex-start = ימין (text מיושר ימין) */
  gap:0;
}
.page-metric__head{
  display:flex;
  flex-direction:row-reverse;       /* icon on the right, label to its left */
  align-items:center;
  gap:4px;
}
.page-metric__label{
  font-size:var(--font-size-body-small, 14px);
  font-weight:400;
  line-height:20px;                 /* dimension-5 */
  color:var(--ta-color-text-subtle, rgba(0,0,0,0.4));
  white-space:nowrap;
}
.page-metric__icon{
  width:16px;height:16px;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
  color:var(--ta-color-text-default);
}
.page-metric__icon svg{width:100%;height:100%;display:block;}

.page-metric__value-row{
  display:flex;
  align-items:center;
  gap:4px;
  /* DOM order: value first → ימין (RTL), trend → שמאל */
}
.page-metric__value{
  font-size:var(--font-size-text-metric-primary, 32px);
  font-weight:700;
  line-height:1;
  color:var(--ta-color-text-default);
  white-space:nowrap;
  margin:0;
}

.page-metric__trend{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:0;
}
.page-metric__trend svg{width:18px;height:15px;display:block;}
.page-metric__trend-pct{
  font-size:11.5px;
  font-weight:700;
  line-height:1;
  color:var(--color-green-400, #b9ca20);
}