/* ==========================================================================
   Active Shows Column — עמודת "ההופעות הפעילות שלך"
   מתואם לפיגמה: tIGshAcTyBw7tLLptHDpy4 / 38564:13204
   ----------------------------------------------------------------------
   Auto-layout:
     Root (537×986, VERTICAL, gap 24, padding 24, radius 20, bg white):
       Header (row, space-between):
         left-cluster: HelpCircle + View Toggle (גם בורר תצוגה)
         title: "ההופעות הפעילות שלך" (h3 22 Bold)
       KPI grid (3 cols, gap 16): 3× tile (padding 16, gap 8, radius 12, border subtle)
       Show cards list (column, gap 16, fluid): N × dashboard-show-card

   Dependencies: tokens.css, button.css, dashboard-show-card.css,
                 status-badge.css, progress-bar.css
   ========================================================================== */

.active-shows-col{
  width:100%;
  max-width:537px;
  height:100%;                                   /* תופס את גובה ה-grid cell */
  min-height:0;                                  /* מאפשר לילד לקבוע overflow */
  background:var(--ta-color-bg-base);
  border-radius:20px;
  padding:var(--space-xl) var(--space-xl) 0 var(--space-xl); /* בלי padding תחתון — list ממשיך עד הקצה */
  display:flex;
  flex-direction:column;
  gap:var(--space-xl);                           /* 24 */
  box-shadow:2px 4px 4px 2px rgba(191,191,191,0.25);
  font-family:var(--font-family-app);
  color:var(--ta-color-text-default);
  overflow:clip;                                 /* כמו hidden אך לא יוצר scrolling context — מאפשר sticky לילדים */
}

/* ===== Header ===== */
.active-shows-col__header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--space-md);
  width:100%;
}
.active-shows-col__header-left{
  display:flex;
  align-items:center;
  gap:5px;
}
.active-shows-col__title-group{
  display:flex;
  align-items:center;
  gap:var(--space-sm);   /* 8 — כפתור "כל אירועים" צמוד לכותרת */
}
.active-shows-col__title{
  font-size:var(--font-size-h3);                 /* 22 */
  font-weight:var(--font-weight-bold);
  line-height:1.2;
  color:var(--ta-color-text-default);
}

/* HelpCircle: עיגול שחור 24 עם "?" לבן */
.help-circle{
  width:24px;height:24px;
  border-radius:50%;
  background:var(--color-solids-black, #000);
  color:var(--ta-color-bg-base);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:13.333px;
  font-weight:var(--font-weight-bold);
  line-height:1.1;
  cursor:pointer;
  flex-shrink:0;
}

/* View Toggle — pill container עם 3 כפתורי chip */
.view-toggle{
  display:inline-flex;
  align-items:center;
  background:var(--color-grays-100,#f5f5f5);
  padding:var(--space-xs);                       /* 4 */
  gap:var(--space-xs);                           /* 4 */
  border-radius:999px;
  height:32px;
}
.view-toggle__btn{
  border:0;background:transparent;
  font-family:var(--font-family-app);
  font-size:var(--font-size-button-chip);        /* 12 */
  font-weight:var(--font-weight-bold);
  line-height:1;
  padding:var(--space-xs) var(--space-md);       /* 4 12 */
  border-radius:999px;
  cursor:pointer;
  color:var(--ta-color-text-disabled-brand, #b1b1b1);
  height:24px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  transition:background .2s, color .2s, box-shadow .2s;
}
.view-toggle__btn.is-active{
  background:var(--ta-color-bg-base, #fff);
  color:var(--ta-color-text-default);
  box-shadow:0 1px 1px rgba(0,0,0,0.08);
}

/* ===== KPI tiles =====
   פיגמה Frame 23239: VERTICAL gap 8 padding 16, primary MIN, counter MAX
     ⇒ ב-RTL: align-items: flex-start (cross-axis START ב-RTL = ימין)
   Inside:
     value-row HUG width (לא FILL), HORIZONTAL gap 4, primary MAX center → text 32 Bold
     label-row FILL width, HORIZONTAL gap 4 → label flex:1 text-right + icon 16 (DOM שני = שמאל ב-RTL)
*/
.active-shows-col__kpis{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(130px, 1fr));   /* מינ' 130, שובר שורות */
  gap:var(--space-lg);                           /* 16 */
}
.kpi-tile{
  display:flex;
  flex-direction:column;
  gap:var(--space-sm);                           /* 8 */
  padding:var(--space-lg);                       /* 16 */
  border:1px solid var(--ta-color-border-subtle);
  border-radius:var(--space-md);                 /* 12 */
  min-width:0;
}
.kpi-tile__value-row{
  width:100%;
  text-align:right;                              /* פיזית ימין — תואם פיגמה counter MAX */
}
.kpi-tile__value{
  display:inline-block;
  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;
}
.kpi-tile__label-row{
  display:flex;
  align-items:flex-start;
  gap:var(--space-xs);
  width:100%;                                    /* FILL — תואם פיגמה sizingH FILL */
}
.kpi-tile__label{
  flex:1;
  min-width:0;
  font-size:var(--font-size-body-small);         /* 14 */
  font-weight:var(--font-weight-regular);
  line-height:var(--dim-5);                      /* 20 */
  color:var(--ta-color-text-subtle);
  text-align:right;                              /* טקסט נצמד ימין בתוך ה-flex:1 */
}
.kpi-tile__ico{
  width:16px;height:16px;
  flex-shrink:0;
  color:var(--ta-color-text-subtle);
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.kpi-tile__ico svg{width:100%;height:100%;}

/* ===== Show cards list ===== */
.active-shows-col__list{
  display:flex;
  flex-direction:column;
  gap:var(--space-md);                           /* 12 — רווח בין כרטיסי האירוע */
  flex:1;
  min-height:0;
  overflow-y:auto;                               /* גלילה פנימית כשהתוכן ארוך מהגובה */
  /* scrollbar עדין */
  scrollbar-width:thin;
  scrollbar-color:rgba(0,0,0,0.15) transparent;
  /* gutter כדי שה-card לא יילחץ ב-scroll */
  padding-inline-start:var(--space-xs);
  margin-inline-start:calc(-1 * var(--space-xs));
  padding-bottom:var(--space-xl);                /* 24 — מחזיר רווח scroll-padding בתוך ה-list, כך שלא נשאר פס לבן */
}
.active-shows-col__list::-webkit-scrollbar{
  width:6px;
}
.active-shows-col__list::-webkit-scrollbar-thumb{
  background:rgba(0,0,0,0.15);
  border-radius:999px;
}
.active-shows-col__list::-webkit-scrollbar-thumb:hover{
  background:rgba(0,0,0,0.25);
}

/* show-card הסטנדרטי הוא 510px — בקונטקסט העמודה הוא fluid ברוחב
   אבל גובה קבוע! flex-shrink:0 מונע דחיסה אנכית כשהרשימה מוגבלת בגובה — במקום
   זה ה-list עושה overflow-y:auto והקלפים שומרים על הגובה הטבעי שלהם */
.active-shows-col__list .show-card{
  width:100%;
  max-width:none;
  flex-shrink:0;
}

/* ===== Mobile: מחיל layout של .show-card--mobile (image 103px בצד + טקסט) =====
   מסונכרן עם dashboard-show-card.css → .show-card--mobile (grid image|main / bottom).
   __top נשאר container (grid-area:main, title-row+meta כ-unit), רק __details=contents. */
@media (max-width: 900px){
  .active-shows-col__list .show-card{
    width:100%;
    height:auto;
  }
  .active-shows-col__list .show-card .show-card__inner{
    display:grid;
    grid-template-columns:103px 1fr;             /* בRTL: 103=ימין (image), 1fr=שמאל (main) */
    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: gap בין גוש התמונה לשורת הקבב+מד */
    padding:var(--space-md);                     /* 12 — רווח פנימי במובייל */
    align-items:start;
  }
  .active-shows-col__list .show-card .show-card__details{
    display:contents;
  }
  .active-shows-col__list .show-card .show-card__top{
    grid-area:main;                              /* title-row מעל, meta מתחת */
  }
  .active-shows-col__list .show-card .show-card__image{
    grid-area:image;
    width:103px;
    height:94px;
    align-self:start;
    border-radius:var(--r-md);                   /* נייד: thumbnail צף → 8 בכל הפינות */
  }
  .active-shows-col__list .show-card .show-card__title{
    -webkit-line-clamp:2;                              /* 2 שורות (כמו נייח/קומפוננט) */
  }
  .active-shows-col__list .show-card .show-card__meta{
    flex-wrap:wrap;
    column-gap:var(--space-md);
    row-gap:var(--space-xs);
    justify-content:flex-start;
  }
  .active-shows-col__list .show-card .meta-item,
  .active-shows-col__list .show-card .meta-chip{
    font-size:var(--font-size-caption);                /* 12 */
    line-height:140%;
  }
  .active-shows-col__list .show-card .meta-chip{
    padding:var(--space-xs) 0;
  }
  /* שורה תחתונה נייד (Frame 23304): [bottom-info ממלא | קבב משמאל] */
  .active-shows-col__list .show-card .show-card__bottom-row{
    grid-area:bottom;
    display:flex;
    flex-direction:row;                          /* RTL: bottom=ימין, קבב=שמאל */
    align-items:flex-end;
    gap:var(--space-md);                          /* 12 */
  }
  .active-shows-col__list .show-card .show-card__bottom{
    flex:1;
    min-width:0;
  }
  .active-shows-col__list .show-card .show-card__title-row .show-card__kebab{ display:none; }
  .active-shows-col__list .show-card .show-card__kebab-mob{ display:inline-flex; }
}

/* מובייל — כרטיסי ה-KPI סליידר אופקי (גלילה + snap) */
@media (max-width: 720px){
  .active-shows-col__kpis{
    display:flex;
    grid-template-columns:none;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    gap:var(--space-lg);                          /* רווח בין כרטיסים = 16 */
    padding-bottom:var(--space-sm);
    scrollbar-width:none;
    margin-inline-end:calc(-1 * var(--space-lg)); /* גולש עד הקצה השמאלי (מבטל padding ה-col) */
  }
  .active-shows-col__kpis::-webkit-scrollbar{ display:none; }
  .active-shows-col__kpis > .kpi-tile{
    flex:0 0 auto;                                /* hug — רוחב לפי תוכן */
    min-width:130px;
    scroll-snap-align:start;
  }
  .active-shows-col__kpis > .kpi-tile:last-child{ margin-inline-end:var(--space-lg); }
}

/* כפתור "תן לי עוד" — מוסתר בדסקטופ/נייח, מופיע רק במובייל */
.active-shows-col__more{ display:none; }

/* מובייל/טאבלט (≤1024, כשהכל ערימה) — 3 כרטיסים + "תן לי עוד" */
@media (max-width: 1024px){
  /* col בגובה טבעי כדי שהכפתור ייראה מתחת לרשימה; gap 16 אחיד + padding תחתון לכפתור */
  .active-shows-col{ height:auto; overflow-x:clip; overflow-y:visible; gap:var(--space-xl); padding-bottom:var(--space-lg); }
  .active-shows-col__list{
    flex:0 0 auto;
    overflow-y:visible;
    gap:var(--space-xl);                 /* 24 בין כרטיסים */
    padding-bottom:0;
  }
  /* הצג רק 3 כרטיסים, כרטיס ראשון רוחב מלא */
  .active-shows-col__list .show-card:nth-child(n+4){ display:none; }
  .active-shows-col__list.is-expanded .show-card:nth-child(n+4){ display:flex; }
  .active-shows-col__list .show-card:first-child{ width:100%; }
  .active-shows-col__more{ display:inline-flex !important; width:100%; margin-top:0; }  /* gap של ה-col מטפל ברווח */
  .active-shows-col__all{ display:none; }   /* מובייל: הכפתור התחתון "כל אירועים" מחליף את זה שליד הכותרת */
}