/* ==========================================================================
   Dashboard Show Card — Tickchak App
   מתואם לפיגמה: tIGshAcTyBw7tLLptHDpy4 / Component Set 38564:7268
   ----------------------------------------------------------------------
   API:
     base: .show-card
     modifiers (combinable):
       .show-card--inactive     → Status=Inactive (טקסטים מעומעמים)
       .show-card--sold-out     → SoldOut=Yes (progress 100% + badge אזל)
       .show-card--hover        → Interaction=Hover (כפתור עריכה על התמונה)
       .show-card--add          → Interaction=Add (כרטיס "הוספה אירוע": border מקווקו + עיגול + תכלת)
       .show-card--mobile       → Breakpoint=Mobile (לעתיד)
   StatusBadge variants:
       .status-badge--active    (פעיל, ירוק)
       .status-badge--inactive  (לא פעיל, אפור)
       .status-badge--sold-out  (אזל, צהוב/כתום)
   ========================================================================== */

.show-card{
  width:510px;
  height:128px;                                /* פיגמה נייח: תמונה 104 + padding 12×2 = 128 */
  display:flex;
  flex-direction:row;
  background:var(--ta-color-bg-base);
  border:1px solid var(--ta-color-border-subtle);
  border-radius:var(--r-xl);                   /* 16 */
  overflow:hidden;
  font-family:var(--font-family-app);
  color:var(--ta-color-text-default);
  position:relative;
  /* גוף הקובייה לחיץ תמיד — עם מועדות נפתחת רשימת-המועדות, בלעדיהן מנווטים
     לניהול-האירוע (br.my_events.cube_navigation). בלי הסמן אי-אפשר להרגיש
     שהלבן לחיץ בכלל (אסף, 29/07). */
  cursor:pointer;
}

/* ===== Interaction=Add — כרטיס "הוספה אירוע" (Figma 42293:4617) ===== */
.show-card--add{
  border:2px dashed var(--ta-color-brand-main, #8eedff);   /* border מקווקו תכלת */
  background:var(--ta-color-bg-base);                       /* רקע לבן */
}
.show-card__add{
  flex:1; width:100%;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:var(--space-xs);                                     /* 4 */
  border:none; background:transparent; cursor:pointer;
  font-family:var(--font-family-app);
}
.show-card__add-circle{                                    /* עיגול + תכלת 28px (Button) */
  width:28px; height:28px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  border-radius:100px;
  background:var(--ta-color-brand-main, #8eedff);
  color:var(--ta-color-text-default, #000);
}
.show-card__add-circle svg{ width:16px; height:16px; }
.show-card__add-text{
  font-size:var(--font-size-caption);                      /* 12 */
  line-height:var(--dim-4);                                /* 16 */
  color:var(--ta-color-text-default);
}

.show-card__inner{
  flex:1;
  display:flex;
  flex-direction:row;
  gap:var(--space-md);                         /* 12 — Item Card gap */
  padding:0;                                   /* פיגמה 38485:22514: התמונה full-bleed, ה-padding על Details בלבד */
  align-items:stretch;
  background:var(--ta-color-bg-base);
}

/* ===== Image side ===== */
.show-card__image{
  width:160px;                                 /* פיגמה מעודכן 160 (היה 130) — התמונה גדלה */
  align-self:stretch;                          /* full-bleed: גובה = גובה הכרטיס המלא (128), נוגעת בקצוות */
  flex-shrink:0;
  border-radius:var(--r-md) 0 0 var(--r-md);   /* 8 בפינות הפנימיות (שמאל) בלבד; הקצה הימני נחתך ע"י radius הכרטיס */
  overflow:hidden;
  background:linear-gradient(135deg, #ffe3c2 0%, #e2c4a3 40%, #84c1c2 100%);
  position:relative;
}
.show-card__image img{
  width:100%;height:100%;
  object-fit:cover;
  display:block;
}

/* תגית סוג אירוע — StatusBadge מהפיגמה (40297:2955, בתוך Image Container של הכרטיס):
   שחור 60% + מסגרת לבנה 1 (INSIDE), radius 5, גובה 24, padding 0/8, טקסט Assistant Regular 12/16,
   ממוקמת 4 מלמטה ו-4 משמאל. נמדד ישירות מהצומת 28/07 — הערכים הקודמים (גובה 20, line-height 1,
   מרווח 8) לא תאמו, והטקסט ישב לא-מרוכז. */
.show-card__type-tag{
  position:absolute;
  bottom:var(--space-xs);
  left:var(--space-xs);
  height:24px;
  display:inline-flex;
  align-items:center;
  box-sizing:border-box;
  background:rgba(0,0,0,0.6);
  color:#fff;
  border:1px solid #fff;
  border-radius:5px;
  font-family:var(--font-family-app);
  font-size:var(--font-size-caption);   /* 12 */
  font-weight:var(--font-weight-regular);
  line-height:var(--line-height-caption);   /* 16 — כמו בפיגמה */
  padding:0 var(--space-sm);
  white-space:nowrap;
  pointer-events:none;
}

/* Inactive — הכרטיס נשאר צבעוני רגיל; החיווי היחיד = נקודת הסטטוס האפורה (החלטת אסף 02.07) */

/* Hover pencil button — overlay on image (only when .show-card--hover)
   משתמש ב-Button System: .btn.cta.brand.app.icon-only */
.show-card__edit-btn{
  position:absolute;
  inset:0;
  margin:auto;                                 /* מרכוז אופקי (הכפתור 44 קבוע) */
  top:41px; bottom:auto;                       /* פיגמה נייח: 41 מלמעלה — 1 מעל המרכז, כדי לפנות 15 מתגית-הסוג */
  display:none;                                /* hidden by default; .btn ברירת מחדל inline-flex */
}
.show-card--hover .show-card__edit-btn{ display:inline-flex; }

/* Real mouse hover — חשיפת כפתור העריכה בלבד (בלי צללית/מסגרת/הרמה) */
.show-card:hover .show-card__edit-btn{ display:inline-flex; }
.show-card:hover .show-card__image img{ filter:brightness(0.82); transition:filter .2s ease; }

/* ===== Details side ===== */
.show-card__details{
  flex:1;
  min-width:0;
  display:flex;
  flex-direction:column;
  justify-content:space-between;               /* התוכן "חופשי" — top למעלה, bottom לתחתית, בלי gap שמשבש */
  align-items:flex-start;                      /* RTL column → ימין ויזואלית */
  align-self:stretch;
  padding:var(--space-md);                     /* 12 — פיגמה: ה-padding על Details Container (התמונה full-bleed) */
}

/* ===== Bottom Row (Frame 23304) — נייח: שקוף (display:contents), הקבב הנייד מוסתר ===== */
.show-card__bottom-row{ display:contents; }
.show-card .show-card__kebab-mob{ display:none; flex-shrink:0; }
.show-card__kebab-mob .btn-ico{ width:var(--dim-4); height:var(--dim-4); }   /* 16 */

.show-card__top{
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:flex-start;                      /* ימין ב-RTL */
  gap:var(--space-sm);                         /* 8 — פיגמה: Main Info gap 8 */
}

/* ===== Title row — קבב צמוד לכותרת (פיגמה 39497:3639) ===== */
.show-card__title-row{
  width:100%;
  display:flex;
  flex-direction:row;                          /* RTL טבעי: DOM כותרת→קבב → כותרת ימין, קבב שמאל */
  align-items:flex-start;
  gap:var(--space-sm);                         /* 8 */
}

/* Kebab — משתמש ב-Button System: .btn.chip.primary.app.icon-only */
.show-card__kebab{ flex-shrink:0; }
.show-card__kebab .btn-ico{width:var(--dim-4);height:var(--dim-4);}  /* chip icon 16, פר זיכרון */

/* ===== StatusBadge — מיובא מ-general/status-badge.css =====
   Show Card הוא קומפוננט App ⇒ ה-StatusBadge בתוכו עובר ל-Assistant (במקום Rubik של DS).
   ראה general/status-badge.css לכל ה-types/appearances. */
.show-card .status-badge{
  font-family:var(--font-family-app);
  padding-top:var(--space-2xs); padding-bottom:var(--space-2xs);   /* 2 — תג קומפקטי ~18px בתוך כרטיס */
}

/* ===== Title ===== */
.show-card__title{
  flex:1;                                      /* ממלא ליד הקבב */
  min-width:0;
  font-family:var(--font-family-app);
  font-size:var(--font-size-body);             /* 16 */
  font-weight:var(--font-weight-bold);
  line-height:20px;
  color:var(--ta-color-text-default);
  text-align:right;
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  overflow:hidden;
  word-break:break-word;
}

/* ===== Meta row ===== */
.show-card__meta{
  display:flex;
  flex-direction:row;                          /* RTL: DOM ראשון=ימין. סדר DOM: תאריך→שעה→ספירה-לאחור (פיגמה 38564:7268) */
  align-items:center;
  gap:var(--space-xs);                         /* 4 — רווח סימטרי סביב הנקודה (תאריך•שעה) */
  justify-content:flex-start;
}
.meta-item,
.meta-chip{
  display:inline-flex;
  flex-direction:row;                          /* פיגמה 38564:7268: תאריך/שעה ללא אייקון; ספירה לאחור "00:00:00 ⏳" (אייקון אחרי הטקסט) */
  align-items:center;
  gap:var(--space-xs);
  padding:0;
  background:transparent;
  border:none;
  font-family:var(--font-family-app);
  font-size:var(--font-size-caption);          /* 12 */
  font-weight:var(--font-weight-regular);
  line-height:120%;
  color:var(--ta-color-text-default);
}
.meta-item__ico,
.meta-chip__ico{width:12px;height:12px;display:inline-block;color:currentColor;}
/* מפריד נקודה עגולה • בקוטר 4 — בין תאריך/שעה וגם לפני הספירה-לאחור (במקום אייקון שעון) */
.show-card__meta .meta-item + .meta-item::before,
.show-card__meta .meta-item + .meta-chip::before{
  content:"";
  width:4px;
  height:4px;
  border-radius:50%;
  background:currentColor;
  flex-shrink:0;
  align-self:center;
}
/* ===== ריבוי מועדים — קובייה שמחזיקה כמה מועדות =====
   br.my_events.card_granularity (מוטי 13/07) · gap.my_events.multi_date_tag.
   מיקום: בשורת-המטא, **במקום** התאריך+שעה — כשלאירוע יש מועדות,
   "12.06.2026 · 11:00" הוא תאריך של מועדה אחת מתוך כמה, כלומר מידע שגוי.
   הנוסח: **"3 מועדים" בלבד** — מוטי, בעל-פה 29/07 (מסר אסף).
   הצורה: **טקסט רגיל בשורת-המטא**, לא תג. אין הובר ואין רשימה.
   🔄 מה שבוטל ב-29/07 מהגרסה של 28/07 (ההיסטוריה בגיט, קומיט 6d48203):
     · הצורה הייתה תג — StatusBadge, טיפוס multiDate + appearance soft.
     · התג בלע את תאריך המועדה הבאה — "3 מועדים ‹ 12.06".
     · צ'ברון 12px, וחלונית #cardDatesPop שנפתחה בהובר/הקשה.
   ⚠️ multiDate ו-soft נשארו ב-status-badge.css ואינם בשימוש עוד —
   ההחלטה אם למחוק אותם מה-DS טרם התקבלה. */
.show-card__dates{
  white-space:nowrap;
}


/* הכנסה בשורת המכירות (פיגמה: "22,021₪" + Line 843 לפני "נמכרו") */
.show-card__revenue{
  display:inline-flex;
  align-items:center;
  gap:var(--space-xs);
  direction:ltr;
  font-variant-numeric:tabular-nums;
  font-weight:var(--font-weight-bold);         /* הכנסה מודגשת */
}
.show-card__revenue::after{                    /* ::after כי ההכנסה direction:ltr — הנקודה בצד הפונה ל"נמכרו" (ימין) */
  content:"";
  width:4px;
  height:4px;
  border-radius:50%;                           /* נקודה עגולה • (לא קו) — קוטר 4 */
  background:currentColor;
  flex-shrink:0;
  align-self:center;
}

/* ===== Bottom: sold info + progress ===== */
.show-card__bottom{
  width:100%;
  display:flex;
  flex-direction:column;
  gap:var(--space-xs);                         /* 4 */
  align-items:flex-start;
}
.show-card__sold{
  width:100%;
  display:flex;
  flex-direction:row-reverse;                  /* cluster(נקודה+%+אזל) ימין, count שמאל */
  align-items:center;                          /* קו אמצע אחד — cluster וטקסט הנמכרו (מוטי 02.07) */
  justify-content:space-between;
  gap:var(--space-xs);
  min-height:18px;                             /* גובה אחיד עם/בלי תג אזל (התג הקומפקטי ≈18px) */
}
/* cluster ימני: [נקודה+אחוז] ואז אזל משמאל (פיגמה 39515:26485, gap 8) */
.show-card__sold-cluster{
  display:flex;
  flex-direction:row-reverse;                  /* DOM: pct-group→אזל; pct-group ימין, אזל שמאל */
  align-items:center;                          /* הכל על קו אמצע אחד — נקודה, %, תג אזל (מוטי 02.07) */
  gap:var(--space-sm);                         /* 8 */
}
.show-card__sold-pct-group{
  display:flex;
  flex-direction:row-reverse;                  /* DOM: נקודה→%; נקודה ימין, אחוז שמאל */
  align-items:center;
  gap:var(--space-xs);                         /* 4 */
}
/* ===== Active Status — קומפוננט פיגמה 38074:25536 (State=Active|Off) =====
   עיגול חיצוני אפור 16×16 + עיגול פנימי 8×8 צבעוני:
   Active = ירוק #b9ca20 · Off = אפור rgba(0,0,0,0.3) */
.show-card__status-dot{
  width:16px;height:16px;
  flex-shrink:0;
  border-radius:50%;
  background:var(--ta-color-bg-surface-disabled, rgba(0,0,0,0.05));   /* עיגול חיצוני אפור */
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.show-card__status-dot::before{
  content:"";
  width:8px;height:8px;
  border-radius:50%;
  background:var(--ta-color-state-success-bg, #b9ca20);              /* פנימי — Active ירוק */
}
.show-card__status-dot.is-off::before,
.show-card--inactive .show-card__status-dot::before{
  background:var(--ta-color-state-inactive-bg, rgba(0,0,0,0.3));     /* פנימי — Off (טוקן, מקביל ל-success-bg) */
}
.show-card__count{
  display:inline-flex;
  align-items:baseline;
  gap:var(--space-xs);
  font-family:var(--font-family-app);
  font-size:var(--font-size-caption);
  line-height:16px;
  color:var(--ta-color-text-default);
}
.show-card__qty{                             /* "165 / 220" — LTR קבוע כדי שלא יתהפך ב-RTL (165=נמכר, 220=סה״כ) */
  direction:ltr;
  unicode-bidi:isolate;
  font-variant-numeric:tabular-nums;
}
.show-card__count strong{
  font-weight:var(--font-weight-bold);       /* רק כמות שנמכרו (165) מודגשת — לא הסך-הכל */
  font-variant-numeric:tabular-nums;
}
.show-card__percent{
  font-family:var(--font-family-app);
  font-size:var(--font-size-caption); /* 12 */
  font-weight:var(--font-weight-bold);
  line-height:1;
  color:var(--ta-color-text-default);
  font-variant-numeric:tabular-nums;
  direction:ltr;
}
/* סטטוס כ-pill אפור (כמו הטבעת האפורה של העיגול) — נקודה צבעונית + מילה בפנים */
.show-card__status{
  display:inline-flex;
  align-items:center;
  gap:var(--space-xs);                                            /* 4 */
  padding:3px var(--space-sm);                                    /* 3/8 */
  border-radius:var(--border-radius-full, 100px);
  background:var(--ta-color-bg-surface-disabled, rgba(0,0,0,0.05)); /* אפור — זהה לטבעת העיגול */
}
.show-card__status .show-card__status-dot{
  width:8px;height:8px;                                           /* רק הנקודה הצבעונית, בלי הטבעת */
  background:transparent;
}
.show-card__status-text{
  font-family:var(--font-family-app);
  font-size:var(--font-size-caption); /* 12 */
  font-weight:var(--font-weight-bold);
  line-height:1;
  color:var(--color-green-600, #465b17);  /* פעיל — ירוק כהה קריא */
  white-space:nowrap;
}
.show-card__status-text--off{
  color:var(--ta-color-text-subtle);      /* כבוי — אפור */
}
/* בתוך כרטיס אירוע: רק הנקודה; המילה ("פעיל"/"כבוי") מופיעה כ-tooltip בהובר (helper).
   ה-tooltip עצמו מוזרק ל-body ב-position:fixed (card-status-tooltip.js) כי לכרטיס overflow:hidden.
   ממוקד ל-.show-card בלבד — ה-pill בכותרת הדשבורד נשאר עם המילה. */
.show-card .show-card__status{
  background:transparent;                 /* בלי ה-pill האפור — רק נקודה */
  padding:0; gap:0;
  cursor:default;
}
.show-card .show-card__status .show-card__status-text{ display:none; }   /* מוסתר — נקרא ע"י ה-JS ל-tooltip */
/* בכרטיס הנקודה חוזרת למבנה המלא של Active Status (38074:25536): טבעת אפורה 16 + נקודה 8 */
.show-card .show-card__status .show-card__status-dot{
  width:16px;height:16px;
  background:var(--ta-color-bg-surface-disabled, rgba(0,0,0,0.05));
}
/* ה-tooltip הצף (אחד משותף, מחוץ לכרטיס) */
#cardStatusTip{
  position:fixed; z-index:9999; pointer-events:none;
  background:#333; color:#fff;
  font-family:'Google Sans',var(--font-family-app, Assistant), sans-serif;
  font-size:12px; font-weight:var(--font-weight-bold, 700);
  padding:4px 10px; border-radius:8px;
  box-shadow:0 2px 6px rgba(0,0,0,.25); white-space:nowrap;
  opacity:0; transform:translate(-50%, 4px);
  transition:opacity .12s ease, transform .12s ease;
}
#cardStatusTip.is-on{ opacity:1; transform:translate(-50%, 0); }
#cardStatusTip::after{   /* חץ כלפי מטה אל הנקודה */
  content:""; position:absolute; top:100%; left:50%; transform:translateX(-50%);
  border:5px solid transparent; border-top-color:#333;
}

/* ============================================================
   Variant: Inactive — בלי האפרה כללית; רק נקודת הסטטוס אפורה
   ============================================================ */

/* ============================================================
   Variant: Mobile — 320×203 hug (תואם פיגמה 38955:1930)
   Auto-layout מהפיגמה:
     Root (padding 16, gap 12):
       Mobile Details Container (gap 8):
         Top Info Container (HORIZONTAL, gap 12): [main-info-col] [image 103×94]
           ↳ main-info-col (gap 8): badges + title
         Event Details Container (WRAP, gap 12, cross-gap 4): meta
       Bottom Info Container (gap 4): sold-info + progress
   Grid mapping (display:contents שופך ל-flat grid):
     row-gap בסיסי 8 ל-badges/title/meta, + margin-top 4 ל-bottom (סה"כ 12)
   ============================================================ */
.show-card--mobile{
  width:320px;
  height:auto;                                 /* hug — פיגמה 203 לתוכן הזה */
}
/* פיגמה 38955:1930 — מבנה זהה לנייח: image ליד main(title+meta), bottom רוחב-מלא מתחת.
   Top Info Container (HORIZONTAL) = [Main Info(title+meta) | image]; Bottom Info נפרד למטה. */
.show-card--mobile .show-card__inner{
  display:grid;
  grid-template-columns:103px 1fr;             /* בRTL: 103=ימין (image), 1fr=שמאל (main=title+meta) */
  grid-template-rows:auto auto;
  grid-template-areas:
    "image  main"
    "bottom bottom";
  column-gap:var(--space-md);                  /* 12 — Top Info gap */
  row-gap:var(--space-xs);                     /* 4 — פיגמה 38955:1930: Root gap בין גוש התמונה לשורת הקבב+מד = 4 */
  padding:var(--space-md);                     /* 12 — פיגמה: Root padding נייד */
  align-items:start;
}
/* details בלבד contents — top נשאר container (title+meta כ-unit אחד ליד image, כמו נייח) */
.show-card--mobile .show-card__details{
  display:contents;
}
.show-card--mobile .show-card__top{
  grid-area:main;                              /* Main Info — title-row מעל, meta מתחת */
}
.show-card--mobile .show-card__image{
  grid-area:image;
  width:103px;
  height:94px;
  align-self:start;
  border-radius:var(--r-md);                   /* נייד: thumbnail צף → 8 בכל הפינות (לא full-bleed) */
}
/* נייד — עיגול-העריכה מוגבה 7 מעל המרכז (18 במקום 25). בתמונה של 94 גובה, מרכוז מלא
   היה מכניס את הכפתור לתוך תגית-הסוג. פיגמה 38564:7268 · Mobile/Hover: top=18,
   ובדיוק 4 בין תחתית-הכפתור לראש-התגית. (נמדד 28/07 אחרי שאסף ראה נגיעה בדמו.) */
.show-card--mobile .show-card__edit-btn{ top:18px; }
.show-card--mobile .show-card__title{
  -webkit-line-clamp:2;                        /* 2 שורות תמיד (כמו נייח) — לבקשת אסף */
}
.show-card--mobile .show-card__meta{
  flex-wrap:wrap;                              /* meta תחת title ברוחב main הצר → countdown יורד לשורה 2 */
  column-gap:var(--space-xs);                  /* 4 — רווח סימטרי סביב הנקודה (אין ספירה-לאחור במובייל) */
  row-gap:var(--space-xs);                     /* 4 — counterAxisSpacing בעת wrap */
}
.show-card--mobile .meta-item,
.show-card--mobile .meta-chip{
  font-size:var(--font-size-caption);          /* 12 במובייל (vs 14 דסקטופ) */
  line-height:140%;                            /* פיגמה: 139.99% */
}
.show-card--mobile .meta-chip{
  display:none;                                /* פיגמה מובייל 38955:1930: אין ספירה-לאחור (שעון עצר) — רק "16:00 │ 25.02.2026" */
}
/* ===== נייד: שורה תחתונה (Frame 23304) = [bottom-info | קבב] =====
   הקבב יורד משורת-הכותרת לשורה התחתונה, משמאל ליד מד ההתקדמות (פיגמה 38955:1930). */
.show-card--mobile .show-card__bottom-row{
  grid-area:bottom;
  display:flex;
  flex-direction:row;                          /* RTL: bottom (DOM ראשון)=ימין, קבב (DOM שני)=שמאל */
  align-items:flex-end;                         /* פיגמה C:MAX — יישור לתחתית */
  gap:var(--space-md);                          /* 12 — Frame 23304 gap */
}
.show-card--mobile .show-card__bottom{
  flex:1;                                       /* Bottom Info Container ממלא, הקבב hug משמאל */
  min-width:0;
}
.show-card--mobile .show-card__title-row .show-card__kebab{ display:none; }   /* הקבב העליון מוסתר בנייד */
.show-card--mobile .show-card__kebab-mob{ display:inline-flex; }              /* הקבב התחתון מוצג */