/* ==========================================================================
   Tab Component — Rounded button-style tab buttons
   Usage:
     <div class="tab-group">
       <a><div class="tab-pill actived" onclick="...">TAB ONE</div></a>
       <a><div class="tab-pill" onclick="...">TAB TWO</div></a>
     </div>

   Legacy class .tab_btn_rep_add still works; .tab-pill is the new alias.
   ========================================================================== */

/* ---- container ---- */
.tab-group {
	display: flex;
	gap: 16px;
	flex-wrap: wrap;
	margin-bottom: 16px;
}

/* ---- individual button ---- */
.tab-pill,
.tab_btn_rep_add {
	background-color: #ffffff;
	color: #000000;
	padding: .75rem 2.5rem;
	border: none;
	border-radius: 0.75rem;
	text-align: center;
	font-size: .875rem;
	line-height: 1.25rem;
	font-weight: 600;
	text-transform: uppercase;
	cursor: pointer;
	box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
	transition: background-color 0.2s, color 0.2s;
}

/* ---- active state ---- */
.tab-pill.actived,
.tab_btn_rep_add.actived {
	background-color: #1e3a8a;
	color: #ffffff;
	font-weight: 600;
	box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
}

/* ---- hover (non-active only) ---- */
.tab-pill:not(.actived):hover,
.tab_btn_rep_add:not(.actived):hover {
	background-color: #eff3ff;
}