/* Unified pill + plus style for ALL tabs */
#view-tabbar .tab-item { display:inline-flex !important; align-items:stretch !important; gap:0 !important; }
#view-tabbar .tab-btn { position:relative !important; border-radius:8px !important; }
#view-tabbar .tab-text { display:inline-block !important; }

/* Default plus segment (hidden until tab active) */
#view-tabbar .tab-plus {
  display:none !important; align-items:center !important; justify-content:center !important;
  padding:0 10px !important; min-width:28px !important;
  border-radius:0 8px 8px 0 !important; border:1px solid #e5e7eb !important; border-left:none !important;
  text-decoration:none !important; font-weight:700 !important; user-select:none !important; cursor:pointer !important;
  background:#ffffff !important; color:#0f172a !important;
  transition: transform .04s ease, box-shadow .2s ease, background .2s ease, color .2s ease, border-color .2s ease !important;
  margin-left:-1px !important;
}

/* Active tab (left half) */
#view-tabbar .tab-item .tab-btn.active,
#view-tabbar .tab-item .tab-btn[aria-pressed="true"] {
  border-top-right-radius:0 !important; border-bottom-right-radius:0 !important;
  background:#0ea5e9 !important; color:#ffffff !important; border-color:#0284c7 !important;
  box-shadow: 0 0 0 2px rgba(2,132,199,0.25) inset !important;
  font-weight:600 !important;
}

/* Active plus (right half) */
#view-tabbar .tab-item .tab-btn.active + .tab-plus,
#view-tabbar .tab-item .tab-btn[aria-pressed="true"] + .tab-plus {
  display:inline-flex !important;
  background:#0ea5e9 !important; color:#ffffff !important; border-color:#0284c7 !important;
  box-shadow: 0 0 0 2px rgba(2,132,199,0.25) inset !important;
}

#view-tabbar .tab-btn:hover { box-shadow: 0 1px 2px rgba(0,0,0,.06) !important; transform: translateY(-1px) !important; }
#view-tabbar .tab-plus:hover { box-shadow: 0 1px 2px rgba(0,0,0,.08) !important; transform: translateY(-1px) !important; }


/* Ensure tabs without a trailing + keep rounded ends when active */
#view-tabbar .tab-item .tab-btn.active:last-child,
#view-tabbar .tab-item .tab-btn[aria-pressed="true"]:last-child{
  border-top-right-radius:8px !important; 
  border-bottom-right-radius:8px !important;
}

/* Unify + button look with Detaillierte Änderungsliste style */
#view-tabbar .tab-plus{
  min-width:36px !important; width:36px !important; height:36px !important;
  padding:6px 8px !important;
  border-radius:9999px !important;
  border:1px solid #e5e7eb !important;
  background:#f8fafc !important; color:#0f172a !important;
  font-weight:600 !important;
}
#view-tabbar .tab-plus:hover{ box-shadow:0 1px 2px rgba(0,0,0,.08) !important; transform: translateY(-1px) !important; }

/* When the tab is active, slightly emphasize the + (same palette as active tab) */
#view-tabbar .tab-item .tab-btn.active + .tab-plus,
#view-tabbar .tab-item .tab-btn[aria-pressed="true"] + .tab-plus{
  background:#0ea5e9 !important; color:#ffffff !important; border-color:#0284c7 !important;
  box-shadow: 0 0 0 2px rgba(2,132,199,0.25) inset !important;
}

/* Rounded buttons by default */
#view-tabbar .tab-btn{ border-radius:9999px !important; }


/* === FIX 2025-09-27: Pill pairs (tab + plus) === */
/* Plus part is NOT circular; it's the right half of the pill */
#view-tabbar .tab-plus{
  display:none !important;            /* default hidden until tab active */
  align-items:center !important;
  justify-content:center !important;
  padding:0 10px !important;
  min-width:28px !important;
  border-radius:0 8px 8px 0 !important;  /* right-half rounding */
  border:1px solid #e5e7eb !important;
  border-left:none !important;
  text-decoration:none !important;
  font-weight:700 !important;
  user-select:none !important;
  cursor:pointer !important;
  background:#ffffff !important;
  color:#0f172a !important;
  margin-left:-1px !important;          /* seam with left tab */
  transition: transform .04s ease, box-shadow .2s ease, background .2s ease, color .2s ease, border-color .2s ease !important;
}

/* Active left half (tab) loses right rounding so both parts merge */
#view-tabbar .tab-item .tab-btn.active,
#view-tabbar .tab-item .tab-btn[aria-pressed="true"]{
  border-top-right-radius:0 !important;
  border-bottom-right-radius:0 !important;
  background:#0ea5e9 !important;
  color:#ffffff !important;
  border-color:#0284c7 !important;
  box-shadow: 0 0 0 2px rgba(2,132,199,0.25) inset !important;
  font-weight:600 !important;
}

/* Show the + when the tab is active and visually merge */
#view-tabbar .tab-item .tab-btn.active + .tab-plus,
#view-tabbar .tab-item .tab-btn[aria-pressed="true"] + .tab-plus{
  display:inline-flex !important;
  background:#0ea5e9 !important;
  color:#ffffff !important;
  border-color:#0284c7 !important;
  box-shadow: 0 0 0 2px rgba(2,132,199,0.25) inset !important;
}

/* Hover micro-elevation for both halves */
#view-tabbar .tab-btn:hover{ box-shadow:0 1px 2px rgba(0,0,0,.06) !important; transform: translateY(-1px) !important; }
#view-tabbar .tab-plus:hover{ box-shadow:0 1px 2px rgba(0,0,0,.08) !important; transform: translateY(-1px) !important; }

/* Tabs without a plus partner keep rounded ends when active */
#view-tabbar .tab-item .tab-btn.active:last-child,
#view-tabbar .tab-item .tab-btn[aria-pressed="true"]:last-child{
  border-top-right-radius:8px !important;
  border-bottom-right-radius:8px !important;
}


/* === FINAL OVERRIDE: tabbar pill pairs (no circular plus) === */
#view-tabbar .tab-item > .tab-btn{
  border-radius: 8px !important;
}
#view-tabbar .tab-item > .tab-btn.active,
#view-tabbar .tab-item > .tab-btn[aria-pressed="true"]{
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}
#view-tabbar .tab-item > .tab-plus{
  display: none !important;              /* hidden until active */
  align-items: center !important;
  justify-content: center !important;
  padding: 0 10px !important;
  min-width: 28px !important;
  border-radius: 0 8px 8px 0 !important;  /* right half only */
  border: 1px solid #e5e7eb !important;
  border-left: none !important;
  margin-left: -1px !important;
  background: #ffffff !important;
  color: #0f172a !important;
  font-weight: 700 !important;
}
#view-tabbar .tab-item > .tab-btn.active + .tab-plus,
#view-tabbar .tab-item > .tab-btn[aria-pressed="true"] + .tab-plus{
  display: inline-flex !important;
  background: #0ea5e9 !important;
  color: #ffffff !important;
  border-color: #0284c7 !important;
  box-shadow: 0 0 0 2px rgba(2,132,199,0.25) inset !important;
}
/* Hover micro-elevation */
#view-tabbar .tab-item > .tab-btn:hover{ box-shadow: 0 1px 2px rgba(0,0,0,.06) !important; transform: translateY(-1px) !important; }
#view-tabbar .tab-item > .tab-plus:hover{ box-shadow: 0 1px 2px rgba(0,0,0,.08) !important; transform: translateY(-1px) !important; }

/* Tabs without a plus keep both rounded ends when active */
#view-tabbar .tab-item > .tab-btn.active:last-child,
#view-tabbar .tab-item > .tab-btn[aria-pressed="true"]:last-child{
  border-top-right-radius: 8px !important;
  border-bottom-right-radius: 8px !important;
}


/* === GLOBAL UNIFICATION: all tabbar pluses behave as right-half pill === */
/* Base: treat ANY anchor directly inside .tab-item (and not the tab .btn) as the + half */
#view-tabbar .tab-item > a:not(.tab-btn){
  display:none !important; 
  align-items:center !important; justify-content:center !important;
  padding:0 10px !important; min-width:28px !important;
  border-radius:0 8px 8px 0 !important; border:1px solid #e5e7eb !important; border-left:none !important;
  text-decoration:none !important; font-weight:700 !important; user-select:none !important; cursor:pointer !important;
  background:#ffffff !important; color:#0f172a !important; margin-left:-1px !important;
  transition: transform .04s ease, box-shadow .2s ease, background .2s ease, color .2s ease, border-color .2s ease !important;
}

/* Active left half merges with + half */
#view-tabbar .tab-item > .tab-btn.active,
#view-tabbar .tab-item > .tab-btn[aria-pressed="true"]{
  border-top-right-radius:0 !important; border-bottom-right-radius:0 !important;
  background:#0ea5e9 !important; color:#ffffff !important; border-color:#0284c7 !important;
  box-shadow:0 0 0 2px rgba(2,132,199,0.25) inset !important; font-weight:600 !important;
}

/* Show the + when the tab is active */
#view-tabbar .tab-item > .tab-btn.active + a:not(.tab-btn),
#view-tabbar .tab-item > .tab-btn[aria-pressed="true"] + a:not(.tab-btn){
  display:inline-flex !important;
  background:#0ea5e9 !important; color:#ffffff !important; border-color:#0284c7 !important;
  box-shadow:0 0 0 2px rgba(2,132,199,0.25) inset !important;
}

/* Hover varnish */
#view-tabbar .tab-item > .tab-btn:hover{ box-shadow:0 1px 2px rgba(0,0,0,.06) !important; transform: translateY(-1px) !important; }
#view-tabbar .tab-item > a:not(.tab-btn):hover{ box-shadow:0 1px 2px rgba(0,0,0,.08) !important; transform: translateY(-1px) !important; }

/* Tabs without a plus keep rounded ends when active */
#view-tabbar .tab-item > .tab-btn.active:last-child,
#view-tabbar .tab-item > .tab-btn[aria-pressed="true"]:last-child{
  border-top-right-radius:8px !important; border-bottom-right-radius:8px !important;
}


/* === SIZE NORMALIZATION FOR TABBAR (unify + and tab heights) === */
#view-tabbar{
  --tab-h: 36px;
  --tab-fs: 14px;
}

#view-tabbar .tab-item > .tab-btn,
#view-tabbar .tab-item > a:not(.tab-btn){
  height: var(--tab-h) !important;
  min-height: var(--tab-h) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: var(--tab-fs) !important;
  box-sizing: border-box !important;
}

#view-tabbar .tab-item > .tab-btn{
  padding: 0 12px !important;
}

#view-tabbar .tab-item > a:not(.tab-btn){
  /* right-half pill (+) */
  min-width: calc(var(--tab-h) - 4px) !important;
  padding: 0 10px !important;
  text-align: center !important;
  font-weight: 700 !important;
}

/* Normalize icon sizes inside */
#view-tabbar .tab-item > .tab-btn svg,
#view-tabbar .tab-item > a:not(.tab-btn) svg{
  width: 16px !important;
  height: 16px !important;
}

/* If + is plain text, ensure consistent visual size */
#view-tabbar .tab-item > a:not(.tab-btn){
  line-height: var(--tab-h) !important;
}


/* === FINAL VISIBILITY RULE: show + only for active tab === */
#view-tabbar .tab-item > a:not(.tab-btn){
  display: none !important;
}
#view-tabbar .tab-item > .tab-btn.active + a:not(.tab-btn),
#view-tabbar .tab-item > .tab-btn[aria-pressed="true"] + a:not(.tab-btn){
  display: inline-flex !important;
}