/* ============================================================
   Tabs Bar — page header tabs (used in management screens)
   Structure:
     <div class="tabs-bar">
       <div class="badge-active">…optional event-state badge…</div>
       <div class="tabs-bar__group">
         <div class="tabs-bar__title-group">
           <span class="tabs-bar__title-ico"><svg/></span>
           <span class="tabs-bar__title">עסקאות</span>
         </div>
         <a class="tab active">…</a>
         <a class="tab">…</a>
       </div>
     </div>

   row-reverse aligns badge LEFT, tabs+title RIGHT (RTL natural).
   ============================================================ */

.tabs-bar{
  height:68px;
  border-bottom:1px solid var(--ta-color-border-subtle);
  background:#fff;
  display:flex;
  flex-direction:row-reverse;
  align-items:center;
  justify-content:space-between;
  padding:0 var(--space-3xl);
  flex-shrink:0;
  position:relative;
  z-index:1;
}

/* Tabs + title group (right side in RTL) */
.tabs-bar__group{
  display:flex;
  align-items:center;
  gap:var(--space-3xl);
  height:100%;
}

/* Title block — icon + title text */
.tabs-bar__title-group{
  display:flex;
  align-items:center;
  gap:var(--space-md);
  height:100%;
}
.tabs-bar__title{
  font-family:var(--font-family-app);
  font-size:22px;  /* Figma exact (no token: h2=20, h3=18) */
  font-weight:var(--font-weight-regular);
  line-height:1.3;
  color:var(--ta-color-text-default);
}
.tabs-bar__title-ico{
  width:24px;height:24px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:var(--ta-color-text-default);
}
.tabs-bar__title-ico svg,
.tabs-bar__title-ico img{width:100%;height:100%;display:block;}

/* Tab item — 6px brand underline on active + hover */
.tab{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0 var(--space-sm);
  height:100%;
  font-family:var(--font-family-app);
  font-size:var(--font-size-body);
  font-weight:var(--font-weight-regular);
  color:var(--ta-color-text-default);
  cursor:pointer;
  border-bottom:6px solid transparent;
  transition:border-color .2s, color .2s;
  white-space:nowrap;
  text-decoration:none;
}
.tab:hover{border-bottom-color:var(--ta-color-brand-hover);}
.tab.active{border-bottom-color:var(--ta-color-brand-main);}

/* "Event active" status badge — Figma: white bg, 1px solid black border, 32px tall, gap 12 */
.badge-active{
  display:flex;
  align-items:center;
  gap:var(--space-md);  /* 12 per Figma */
  height:32px;
  padding:0 var(--space-md) 0 var(--space-sm);
  border-radius:var(--border-radius-full);
  border:1px solid var(--ta-color-border-default);  /* black per Figma */
  background:var(--ta-color-bg-base);
  cursor:pointer;
  transition:background .15s;
}
.badge-active:hover{background:var(--ta-color-bg-surface-default);}
.badge-check{
  width:20px;height:20px;
  border-radius:50%;
  background:var(--ta-color-state-success-bg);
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
}
.badge-check svg{width:8px;height:8px;}
.badge-label{
  font-family:var(--font-family-app);
  font-size:var(--font-size-body-small);
  font-weight:var(--font-weight-bold);
  line-height:16px;
  color:var(--ta-color-text-default);
}