/* ==========================================================================
   Sales & Cash Panel — חלונית "מכירות וקופה" לדשבורד
   מתואם פיגמה: tIGshAcTyBw7tLLptHDpy4 / 39048:22660 (Frame 22198)
   ----------------------------------------------------------------------
   Auto-layout:
     Card (VERTICAL, gap 24, padding 24, radius 20, bg white, shadow):
       Header (SPACE_BETWEEN):
         right-cluster (DOM 1): title + chip-היום (time filter)
         left-cluster  (DOM 2): chip-כללי (segment) + help "?"
       Body (VERTICAL gap 32):
         Metrics (VERTICAL gap 4, FIXED 184h):
           Row 1 (HORIZONTAL gap 24, padding 9 0): metric + col-divider + metric
           Row divider (1px FILL)
           Row 2: same pattern
         Chart (VERTICAL gap 12):
           Chart header (SPACE_BETWEEN): chip-כסף (toggle) + title "גרף מכירות"
           Canvas (152h) + X-axis days

   Dependencies: tokens.css, button.css (chip primary app icon-only)
   ========================================================================== */

.sc-panel{
  background:var(--ta-color-bg-base);
  border-radius:20px;
  padding:var(--space-xl);                    /* 24 */
  box-shadow:2px 4px 4px 2px rgba(191,191,191,0.25);
  display:flex;
  flex-direction:column;
  gap:var(--space-xl);                        /* 24 */
  font-family:var(--font-family-app);
  color:var(--ta-color-text-default);
  container-type:inline-size;
  container-name:scp;
}

/* ===== Header ===== */
.sc-panel__header{
  display:flex;
  align-items:flex-start;                     /* גם כשכותרת/תאריך עוברים שורה — left cluster תמיד למעלה */
  justify-content:space-between;
  gap:22px;
}
.sc-panel__header-right{
  display:flex;
  align-items:flex-start;                     /* title-block ראשון, time-filter לידו — מיושר לראש */
  gap:var(--space-lg);                        /* 16 */
}
.sc-panel__header-left{
  display:flex;
  align-items:center;
  gap:var(--space-sm);                        /* 8 */
}
.sc-panel__title{
  font-size:var(--font-size-h3);              /* 22 */
  font-weight:var(--font-weight-bold);
  line-height:1.3;
  color:var(--ta-color-text-default);
}
.sc-panel__title-time{
  font-weight:var(--font-weight-bold);
  color:var(--ta-color-text-subtle);
}
.sc-panel__title-block{
  display:flex;
  flex-direction:column;
  gap:var(--space-xs);
}
.sc-panel__title-date{
  font-size:var(--font-size-caption);   /* 12 */
  font-weight:var(--font-weight-regular);
  line-height:1;
  color:var(--ta-color-text-default);
  direction:ltr;                         /* תאריכים LTR גם ב-RTL */
  text-align:right;                      /* RTL: מתחיל מימין */
  font-variant-numeric:tabular-nums;
}

/* ===== Metrics table ===== */
.sc-panel__metrics{
  display:flex;
  flex-direction:column;
  gap:var(--space-xs);                        /* 4 */
}
.metrics-row{
  display:flex;
  align-items:center;
  gap:var(--space-xl);                        /* 24 */
  padding:9px 0;
}
.metrics-row-divider{
  width:100%;
  height:1px;
  background:var(--ta-color-border-subtle);
}
.metrics-col-divider{
  width:1px;
  height:72px;
  background:var(--ta-color-border-subtle);
  flex-shrink:0;
}

/* ===== Container query: בקונטיינר צר (פאנל פחות מ-640px) הופך לעמודה אחת
   כל KPI מקבל שורה מלאה. החוצצים האנכיים הופכים לקווים אופקיים בין שורות.
   מתפעל גם כשה-bottom-row stacked (תאבלט) וגם כשהפאנל באמת צר. */
@container scp (max-width: 640px){
  .metrics-row{
    flex-direction:column;
    gap:var(--space-md);                       /* 12 */
    align-items:stretch;
  }
  .metrics-col-divider{
    width:100%;
    height:1px;                                /* הופך לקו אופקי דק כמו row-divider */
  }
  .metric{
    width:100%;
  }
}

.metric{
  flex:1;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--space-xl);                        /* 24 (ב-figma 71 אבל ב-fluid מתאים יותר 24) */
  min-width:0;
}
.metric__text{
  flex:1;                                     /* תופס את שאר הרוחב — sparkline cubic LEFT ב-RTL */
  display:flex;
  flex-direction:column;
  gap:var(--space-xs);
  align-items:flex-start;                     /* RTL column cross-axis: start = ימין */
  min-width:0;
}
.metric__label{
  width:100%;                                 /* sizingH FILL */
  text-align:right;
  font-size:var(--font-size-caption);         /* 12 */
  font-weight:var(--font-weight-regular);
  line-height:var(--dim-4);                   /* 16 */
  color:var(--ta-color-text-default);
}
.metric__value{
  font-size:var(--font-size-text-metric-primary); /* 32 */
  font-weight:var(--font-weight-bold);
  line-height:1;
  color:var(--ta-color-text-default);
  font-variant-numeric:tabular-nums;
}
.metric__trend-strong{
  font-weight:var(--font-weight-bold);
}
.metric__trend{
  width:100%;
  display:flex;
  align-items:flex-start;                     /* יישור למעלה — trend pill צמוד לשורה הראשונה של ה-label שגולש */
  justify-content:flex-start;                 /* RTL: start = ימין */
  gap:var(--space-xs);
  font-size:var(--font-size-caption);
  line-height:var(--dim-4);
  color:var(--ta-color-text-subtle);
}
.metric__delta{
  display:inline-flex;
  align-items:center;
  gap:var(--space-xs);
  font-weight:var(--font-weight-bold);
  font-variant-numeric:tabular-nums;
}
.metric__delta--up{color:var(--ta-color-state-success-main, #465b17);}
.metric__delta--down{color:var(--ta-color-state-error-border, #ff0000);}
.metric__delta svg{width:16px;height:16px;flex-shrink:0;}

/* Conversion card — title + two "label value" rows, prominent value + trend arrow */
.metric__text--dual{gap:var(--space-sm);}
.metric__dual-since{
  font-size:var(--font-size-caption);
  line-height:var(--dim-4);
  color:var(--ta-color-text-subtle);
  flex-shrink:0;
}
.metric__dual{
  width:100%;
  display:flex;align-items:baseline;gap:var(--space-sm);
  justify-content:flex-start;                       /* RTL: start = ימין */
  font-size:var(--font-size-caption);               /* בסיס caption — ה-delta יורש 12 כמו בשאר הכרטיסים */
  line-height:1;
  color:var(--ta-color-text-default);
}
/* trend delta identical to the other cards (e.g. עסקאות) */
.metric__dual .metric__delta{
  font-size:var(--font-size-caption);
  line-height:var(--dim-4);
}
/* יחס ההמרה — שתי שורות: שם+ערך, ומתחת המיקרו-קופי (delta + תקופה) */
.metric__dual--stacked{ flex-direction:column; align-items:flex-start; gap:var(--space-xs); }
.metric__dual--stacked .metric__dual-line{ display:flex; align-items:baseline; gap:var(--space-sm); }
.metric__dual--stacked .metric__dual-sub{ display:flex; align-items:center; gap:var(--space-sm); }
.metric__dual-lbl{
  font-size:var(--font-size-caption);               /* 12 */
  line-height:var(--dim-4);
  color:var(--ta-color-text-subtle);
  flex-shrink:0;
}
.metric__dual-val{
  font-size:var(--font-size-text-metric-primary);   /* 32 — בגודל הערכים בשאר הכרטיסים */
  font-weight:var(--font-weight-bold);
  line-height:1;
  font-variant-numeric:tabular-nums;
}

/* Sparkline (SVG) */
.metric__spark{
  width:64px;
  height:28px;
  flex-shrink:0;
  display:block;
}
.metric__spark .spark-area{fill:rgba(96, 202, 218, 0.18);}
.metric__spark .spark-line{
  fill:none;
  stroke:var(--color-turquoise-500, #5dc5d7);
  stroke-width:1.5;
  stroke-linejoin:round;
  stroke-linecap:round;
}
.metric__spark .spark-baseline{
  stroke:var(--ta-color-border-subtle);
  stroke-width:1;
  stroke-dasharray:2 2;
}
.metric__spark .spark-dot{
  fill:var(--color-turquoise-500, #5dc5d7);
}

/* ===== Chart section ===== */
.sc-panel__chart{
  display:flex;
  flex-direction:column;
  gap:var(--space-md);                        /* 12 */
}
.sc-chart__header{
  display:flex;
  align-items:flex-start;                     /* title-block ראשון בראש, חזרי-בורר ליד */
  justify-content:space-between;
}
.sc-chart__title-block{
  display:flex;
  flex-direction:column;
  gap:var(--space-xs);
}
.sc-chart__title{
  font-size:var(--font-size-body-small);      /* 14 */
  font-weight:var(--font-weight-bold);
  line-height:var(--dim-4);
  color:var(--ta-color-text-default);
}
.sc-chart__title-date{
  font-size:var(--font-size-caption);          /* 12 */
  font-weight:var(--font-weight-regular);
  line-height:1;
  color:var(--ta-color-text-default);
  direction:ltr;
  text-align:right;
  font-variant-numeric:tabular-nums;
}
.sc-chart__canvas{
  position:relative;
  width:100%;
  height:152px;
  padding-left:56px;                          /* רזרבה לתוויות Y (₪14,080) כדי שלא יתנגשו עם 'א */
}
.sc-chart__canvas svg{
  width:100%;
  height:100%;
  display:block;
  overflow:visible;
}
.sc-chart__line{
  fill:none;
  stroke:var(--ta-color-chart-line, #5dc5d7);
  stroke-width:2;
  stroke-linejoin:round;
  stroke-linecap:round;
}
.sc-chart__area{
  fill:var(--ta-color-chart-area, rgba(93,197,215,0.18));
}
/* קו-מנחה אנכי ל-hover */
.sc-chart__guide{
  stroke:var(--ta-color-chart-line, #5dc5d7);
  stroke-width:1.5;
  stroke-dasharray:3 4;
  opacity:0;
  transition:opacity .15s ease;
}
.sc-chart__canvas.is-hovering .sc-chart__guide{ opacity:.7; }
.sc-chart__grid{
  stroke:var(--ta-color-border-subtle);
  stroke-width:1;
}
.sc-chart__grid--dashed{stroke-dasharray:4 4;}
.sc-chart__y-label{
  position:absolute;
  left:0;                                     /* בצד שמאל — כמו ב-Figma */
  font-size:var(--font-size-caption);
  color:var(--ta-color-text-default);
  line-height:var(--dim-4);
  pointer-events:none;
}
.sc-chart__tooltip{
  position:absolute;
  background:var(--ta-color-chart-tooltip-bg, #33a7b6);
  color:var(--ta-color-chart-tooltip-text, #f0fdff);
  font-size:var(--font-size-caption);
  font-weight:var(--font-weight-bold);
  line-height:var(--dim-4);
  padding:var(--space-xs) var(--space-sm);
  border-radius:999px;
  border:none;
  transform:translate(-50%, -50%);
  pointer-events:none;
  white-space:nowrap;
  z-index:1;
  transition:top .08s linear, left .08s linear;   /* עקיבה חלקה אחרי העכבר */
  /* גלים בצורת box-shadow rings מתפשטים — עדינים ורחבים */
  animation:sc-tooltip-ping 3s cubic-bezier(0.16, 1, 0.3, 1) infinite;
}

@keyframes sc-tooltip-ping{
  0%{
    box-shadow:
      0 0 0 0    rgba(96, 202, 218, 0.35),
      0 0 0 0    rgba(96, 202, 218, 0.25),
      0 0 0 0    rgba(96, 202, 218, 0.15);
  }
  100%{
    box-shadow:
      0 0 0 14px rgba(96, 202, 218, 0),
      0 0 0 28px rgba(96, 202, 218, 0),
      0 0 0 42px rgba(96, 202, 218, 0);
  }
}
.sc-chart__day-dot,
.sc-chart__now-dot{
  display:none;
}
.sc-chart__x-axis{
  display:flex;
  justify-content:space-between;
  font-size:11px;
  font-weight:var(--font-weight-regular);
  line-height:var(--dim-4);
  color:var(--ta-color-text-subtle);
  padding:0 var(--space-xs) 0 calc(56px + var(--space-xs));   /* רזרבה משמאל בדיוק כמו ה-canvas */
}