/* ============================================================
   Sidebar — Event Management
   Figma: tIGshAcTyBw7tLLptHDpy4 / node 28398:921
   App theme, inverse styling (dark bg, white text).
   ============================================================ */

/* ===== All buttons in sidebar use Regular weight (Figma override) ===== */
.sidebar .btn{font-weight:var(--font-weight-regular);}

/* ===== Container ===== */
.sidebar{
  width:250px;
  flex-shrink:0;  /* fixed 250 — never shrink */
  height:100vh;  /* full viewport height */
  position:fixed;
  top:0;
  right:0;  /* always glued to the right edge of the screen */
  background:var(--color-grays-700);  /* Figma: --color/grays/700 = #333 */
  /* Rounded only on the inner (left) edge */
  border-top-left-radius:var(--border-radius-2xl);
  border-bottom-left-radius:var(--border-radius-2xl);
  font-family:var(--font-family-app);
  color:var(--ta-color-text-inverse);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:space-between;
  overflow:hidden;
}

/* ===== Top section (header + hero) ===== */
.sidebar__top{
  display:flex;
  flex-direction:column;
  align-items:stretch;
  width:100%;
}

/* ===== Header bar ===== */
.sidebar__header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  width:100%;
  padding:var(--space-sm) var(--space-lg) var(--space-sm) var(--space-sm);
}
.sidebar__header-title{
  font-family:var(--font-family-app);
  font-weight:var(--font-weight-regular);
  font-size:var(--font-size-caption);  /* 12px */
  line-height:1.1;
  color:var(--ta-color-text-inverse);
}
/* Hamburger uses btn system (cta subtle app inverse icon-only) — 44x44 per Figma */
.sidebar__header-menu .btn-ico{width:22px;height:22px;}

/* ===== Hero card wrapper (provides side padding from container) ===== */
.sidebar__hero-wrap{
  padding:0 var(--space-lg);
  width:100%;
}

/* ===== Hero card (inner dark surface) — Figma: padding 12, gap 12, radius 24 ===== */
.sidebar__hero{
  background:var(--ta-color-bg-surface-selected);  /* rgba(0,0,0,0.3) */
  border-radius:var(--border-radius-2xl);  /* 24 */
  padding:var(--space-md);  /* 12 (Figma) */
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:var(--space-md);  /* 12 (Figma) */
  width:100%;
  overflow:hidden;
}

/* Event title — Figma: Assistant Light, 22px, weight 500, line-height 120% */
.sidebar__hero-title{
  font-family:var(--font-family-app);
  font-weight:var(--font-weight-medium);  /* 500 per Figma */
  font-size:22px;
  line-height:1.2;
  text-align:center;
  color:var(--ta-color-text-inverse);
  width:100%;
}

/* Date / Time pill */
.sidebar__hero-meta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:var(--space-sm);
  padding:0 var(--space-md);
  height:29px;
  background:var(--ta-color-bg-surface-selected);
  border-radius:var(--border-radius-full);
}
.sidebar__hero-meta-item{
  display:inline-flex;
  align-items:center;
  gap:var(--space-sm);  /* 8px between icon and text */
  font-family:var(--font-family-app);
  font-weight:var(--font-weight-regular);
  font-size:var(--font-size-body-small);
  line-height:1;  /* tighten so the line-box height = font height → text+icon visually centered */
  color:var(--ta-color-text-inverse);
}
.sidebar__hero-meta-item .ico{
  width:12px;height:12px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}
.sidebar__hero-meta-item .ico svg{display:block;width:100%;height:100%;}
.sidebar__hero-meta-divider{
  width:1px;
  height:18px;
  background:rgba(255,255,255,0.2);
}

/* Horizontal dividers inside hero */
.sidebar__hero-divider{
  width:100%;
  height:1px;
  background:rgba(255,255,255,0.1);
}

/* Hero actions row (yellow CTA + share) */
.sidebar__hero-actions{
  display:flex;
  align-items:center;
  gap:var(--space-sm);
  width:100%;
}
.sidebar__hero-actions .btn.category:not(.icon-only){flex:1 1 auto;}
/* Category icons = 16x16 across the row */
.sidebar__hero-actions .btn .btn-ico{width:16px;height:16px;}
/* "דף מכירה" uses Live brand color (yellow), Default (not inverse), App font + Bold */
.sidebar__hero-actions .btn.brand.live{
  font-family:var(--font-family-app);
  font-weight:var(--font-weight-bold);
}
/* Share button — 32x32 circular icon-only (Figma: cornerRadius=100, bg surface) */
.sidebar__hero-actions .btn.icon-only.category{
  width:32px;
  height:32px;
  min-width:32px;
  border-radius:100px;
  flex:0 0 auto;
}

/* Gauges row */
.sidebar__hero-gauges{
  display:flex;
  align-items:flex-end;
  justify-content:center;
  gap:10px;
  width:100%;
}
.sidebar__gauge{
  width:90px;
  height:50px;  /* slightly taller to fit bigger arc */
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-end;
  padding-inline:3px;  /* Figma: px-[3.257px] */
}
.sidebar__gauge-svg{
  position:absolute;
  top:0;
  left:50%;
  transform:translateX(-50%);
  width:90px;
  height:50px;
  overflow:hidden;  /* clip if the arc tries to draw outside */
  pointer-events:none;
}
/* Gauge progress animation — fills from 0 to --pct on load */
@keyframes gauge-fill{
  from{stroke-dasharray:0 100;}
  to{stroke-dasharray:var(--pct, 75) 100;}
}
.sidebar__gauge-progress{
  animation:gauge-fill 1.4s cubic-bezier(.4,0,.2,1) .2s forwards;
}
/* Gauge "75%" — Figma: Assistant Bold 14px, line-height 14px, right-align */
.sidebar__gauge-value{
  font-family:var(--font-family-app);
  font-weight:var(--font-weight-bold);
  font-size:var(--font-size-body-small);  /* 14px */
  line-height:14px;
  color:var(--ta-color-text-inverse);
  text-align:right;
  position:relative;
  z-index:1;
}
/* Gauge label — Figma had 10px (not a token); using caption (12px) — design-system valid */
.sidebar__gauge-label{
  font-family:var(--font-family-app);
  font-weight:var(--font-weight-regular);
  font-size:var(--font-size-caption);  /* 12px */
  line-height:16px;  /* caption line-height */
  color:var(--ta-color-text-inverse);
  text-align:center;
  position:relative;
  z-index:1;
}

/* Cash bar — Figma: VERTICAL padding-top 8, gap 4 */
.sidebar__hero-cashbar{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:var(--space-xs);  /* 4 */
  padding-top:var(--space-sm);  /* 8 */
}
/* Cashbar label — Figma: Assistant Regular 12px (caption), line-height 16px */
.sidebar__hero-cashbar-label{
  font-family:var(--font-family-app);
  font-weight:var(--font-weight-regular);
  font-size:var(--font-size-caption);  /* 12px */
  line-height:16px;
  color:var(--ta-color-text-inverse);
}
/* Cashbar amount — Figma: Assistant Bold 20px, line-height 20px */
.sidebar__hero-cashbar-amount{
  font-family:var(--font-family-app);
  font-weight:var(--font-weight-bold);
  font-size:20px;  /* Figma 20 — no token (h2 is closest at 22) */
  line-height:20px;
  color:var(--ta-color-text-inverse);
}

/* Hero CTA — secondary control button */
.sidebar__hero-control{
  width:100%;
}
.sidebar__hero-control .btn{width:100%;}
.sidebar__hero-control .btn .btn-ico{width:16px;height:16px;}

/* ===== Nav slot ===== */
.sidebar__nav{
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:0;  /* zero gap between nav buttons per Figma */
  padding:var(--space-md) 0;
  width:100%;
}
.sidebar__nav-item{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:var(--space-xs) var(--space-lg);
  width:100%;
}
.sidebar__nav-item .btn{width:100%;justify-content:flex-start;gap:var(--space-sm);}
.sidebar__nav-item .btn .btn-ico{display:inline-flex;width:16px;height:16px;}
.sidebar__nav-item .btn .btn-ico svg,
.sidebar__nav-item .btn .btn-ico img{width:100%;height:100%;display:block;}

/* ===== Footer slot ===== */
.sidebar__footer{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:var(--space-lg);
  width:100%;
}
.sidebar__footer .btn{width:100%;justify-content:flex-start;gap:var(--space-sm);}
.sidebar__footer .btn .btn-ico{display:inline-flex;width:16px;height:16px;}

/* ===== Hero control button — full-width primary pill in hero card ===== */
.sidebar__hero .btn.sidebar__hero-control{width:100%;}

/* ============================================================
   Collapsible nav section (icon+label group, chevron, sub-items
   with vertical connector line) — used both account-level (CRM)
   and event-level (עסקאות). Source of truth lives here.
   ============================================================ */
.sidebar__nav .sidebar__nav-item--section .btn{justify-content:space-between !important;}
.sidebar__nav .sidebar__nav-item--section .btn .crm-group{
  display:inline-flex;
  align-items:center;
  gap:var(--space-sm);
}
.sidebar__nav .sidebar__nav-item--section .btn .crm-chev{
  transition:transform .25s cubic-bezier(.4,0,.2,1);
}
.sidebar__nav .sidebar__nav-item--section .btn[aria-expanded="false"] .crm-chev{
  transform:rotate(90deg);
}
.sidebar__nav-children{
  position:relative;
  overflow:hidden;
  max-height:500px;
  transition:max-height .4s cubic-bezier(.25,.8,.25,1);
}
.sidebar__nav-children.is-collapsed{max-height:0;}
/* Vertical connector line — aligned with center of section icon */
.sidebar__nav-children::after{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  right:40px;
  width:1px;
  background:rgba(255,255,255,.45);
  transform-origin:top;
  transform:scaleY(1);
  transition:transform .45s cubic-bezier(.4,0,.2,1) .1s;
  pointer-events:none;
  z-index:1;
}
.sidebar__nav-children.is-collapsed::after{
  transform:scaleY(0);
  transition-delay:0s;
}
/* Sub-items inset to the left of the connector */
.sidebar__nav .sidebar__nav-children > .sidebar__nav-item{
  padding-right:64px !important;
  transition:transform .35s cubic-bezier(.2,.9,.3,1), opacity .3s ease;
  transform:translateY(0);
  opacity:1;
}
.sidebar__nav .sidebar__nav-children > .sidebar__nav-item .btn{justify-content:flex-start;}
/* Active sub-item — filled pill on inverse */
.sidebar__nav-children .sidebar__nav-item .btn.highlight{
  background:rgba(255,255,255,.18) !important;
}
/* Staggered enter on open */
.sidebar__nav-children:not(.is-collapsed) > .sidebar__nav-item:nth-child(1){transition-delay:.08s;}
.sidebar__nav-children:not(.is-collapsed) > .sidebar__nav-item:nth-child(2){transition-delay:.15s;}
.sidebar__nav-children:not(.is-collapsed) > .sidebar__nav-item:nth-child(3){transition-delay:.22s;}
.sidebar__nav-children:not(.is-collapsed) > .sidebar__nav-item:nth-child(4){transition-delay:.29s;}
.sidebar__nav-children.is-collapsed > .sidebar__nav-item{
  transform:translateY(-10px);
  opacity:0;
  transition-delay:0s;
}