/* ==========================================================================
   Tabs (.sentio-tb)
   ==========================================================================
   Extracted from frontend.css during the Batch 8 mechanical extraction
   (2026-04-18). Behavior-preserving.
   ========================================================================== */

/* ─── Base Layout ─── */
.sentio-tb {
	display: flex;
}
.sentio-tb--dir-top    { flex-direction: column; }
.sentio-tb--dir-bottom { flex-direction: column-reverse; }
.sentio-tb--dir-left   { flex-direction: row; }
.sentio-tb--dir-right  { flex-direction: row-reverse; }

.sentio-tb__nav {
	position: relative;
	display: flex;
	gap: 0;
	flex-shrink: 0;
}

/* Horizontal nav */
.sentio-tb--dir-top .sentio-tb__nav,
.sentio-tb--dir-bottom .sentio-tb__nav {
	flex-direction: row;
	flex-wrap: wrap;
}

/* Vertical nav */
.sentio-tb--dir-left .sentio-tb__nav,
.sentio-tb--dir-right .sentio-tb__nav {
	flex-direction: column;
	width: 200px;
}

.sentio-tb__panels {
	flex: 1;
	min-width: 0;
}

/* ─── Tab Button ─── */
.sentio-tb__tab {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 12px 20px;
	border: none;
	background: transparent;
	color: #64748b;
	font-family: inherit;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.4;
	cursor: pointer;
	position: relative;
	z-index: 1;
	white-space: nowrap;
	transition: color 0.25s ease, background-color 0.25s ease,
	            border-color 0.25s ease, box-shadow 0.25s ease;
}
.sentio-tb__tab:focus-visible {
	outline: 2px solid #6366f1;
	outline-offset: -2px;
}

/* Full-width tabs */
.sentio-tb--full-yes .sentio-tb__tab {
	flex: 1;
}

/* ─── Tab Text Wrapper ─── */
.sentio-tb__tab-text {
	display: flex;
	flex-direction: column;
	align-items: inherit;
}

.sentio-tb__tab-title {
	margin: 0;
	font-size: inherit;
	font-weight: inherit;
	line-height: inherit;
	transition: color 0.25s ease;
}

/* Subtitle — Diff #8 */
.sentio-tb__tab-subtitle {
	font-size: 11px;
	font-weight: 400;
	color: #94a3b8;
	line-height: 1.3;
	margin-top: 2px;
	transition: color 0.25s ease;
}

/* ─── Tab Icon ─── */
.sentio-tb__tab-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 16px;
	line-height: 1;
	transition: color 0.25s ease;
}
.sentio-tb__tab-icon i,
.sentio-tb__tab-icon svg {
	width: 1em;
	height: 1em;
}
.sentio-tb__tab-icon svg {
	fill: currentColor;
}

/* ─── Badge — Diff #3 ─── */
.sentio-tb__badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 18px;
	height: 18px;
	border-radius: 10px;
	background-color: #ef4444;
	color: #ffffff;
	font-size: 10px;
	font-weight: 700;
	padding: 0 5px;
	line-height: 1;
	flex-shrink: 0;
}
.sentio-tb__badge--dot {
	min-width: 8px;
	width: 8px;
	height: 8px;
	padding: 0;
	border-radius: 50%;
}

/* ══════════════════════════════════════════
   SLIDING INDICATOR — Diff #2
   ══════════════════════════════════════════ */
.sentio-tb__indicator {
	position: absolute;
	pointer-events: none;
	z-index: 0;
	background-color: var(--sentio-tb-indicator-accent, var(--sentio-tb-indicator-color, #6366f1));
	transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
	            width 0.35s cubic-bezier(0.4, 0, 0.2, 1),
	            height 0.35s cubic-bezier(0.4, 0, 0.2, 1),
	            background-color 0.25s ease;
	opacity: 0; /* hidden until JS positions it */
}
.sentio-tb__indicator--ready {
	opacity: 1;
}

/* Horizontal indicator (top / bottom) */
.sentio-tb--dir-top .sentio-tb__indicator {
	bottom: 0;
	left: 0;
	height: 3px;
}
.sentio-tb--dir-bottom .sentio-tb__indicator {
	top: 0;
	left: 0;
	height: 3px;
}

/* Vertical indicator (left / right) */
.sentio-tb--dir-left .sentio-tb__indicator {
	right: 0;
	top: 0;
	width: 3px;
}
.sentio-tb--dir-right .sentio-tb__indicator {
	left: 0;
	top: 0;
	width: 3px;
}

/* ══════════════════════════════════════════
   SKIN: Underline — Diff #1 (default)
   ══════════════════════════════════════════ */
.sentio-tb--underline .sentio-tb__nav {
	border-bottom: 1px solid #e5e7eb;
}
.sentio-tb--underline .sentio-tb__tab--active {
	color: #1e293b;
}

/* Underline: vertical direction */
.sentio-tb--underline.sentio-tb--dir-left .sentio-tb__nav {
	border-bottom: none;
	border-right: 1px solid #e5e7eb;
}
.sentio-tb--underline.sentio-tb--dir-right .sentio-tb__nav {
	border-bottom: none;
	border-left: 1px solid #e5e7eb;
}

/* ══════════════════════════════════════════
   SKIN: Boxed — Diff #1
   ══════════════════════════════════════════ */
.sentio-tb--boxed .sentio-tb__indicator {
	top: 0;
	bottom: 0;
	left: 0;
	height: auto;
	border-radius: 6px;
	background-color: var(--sentio-tb-indicator-accent, var(--sentio-tb-indicator-color, #6366f1));
}
.sentio-tb--boxed .sentio-tb__tab--active {
	color: #ffffff;
}
/* Boxed vertical */
.sentio-tb--boxed.sentio-tb--dir-left .sentio-tb__indicator,
.sentio-tb--boxed.sentio-tb--dir-right .sentio-tb__indicator {
	top: 0;
	left: 0;
	right: 0;
	width: auto;
}

/* ══════════════════════════════════════════
   SKIN: Pills — Diff #1
   ══════════════════════════════════════════ */
.sentio-tb--pills .sentio-tb__nav {
	gap: 6px;
}
.sentio-tb--pills .sentio-tb__tab {
	border-radius: 50px;
}
.sentio-tb--pills .sentio-tb__indicator {
	top: 0;
	bottom: 0;
	left: 0;
	height: auto;
	border-radius: 50px;
	background-color: var(--sentio-tb-indicator-accent, var(--sentio-tb-indicator-color, #6366f1));
}
.sentio-tb--pills .sentio-tb__tab--active {
	color: #ffffff;
}
/* Pills vertical */
.sentio-tb--pills.sentio-tb--dir-left .sentio-tb__indicator,
.sentio-tb--pills.sentio-tb--dir-right .sentio-tb__indicator {
	top: 0;
	left: 0;
	right: 0;
	width: auto;
}

/* ══════════════════════════════════════════
   SKIN: Outline — Diff #1
   ══════════════════════════════════════════ */
.sentio-tb--outline .sentio-tb__tab {
	border: 1px solid transparent;
	border-radius: 6px 6px 0 0;
	margin-bottom: -1px;
}
.sentio-tb--outline .sentio-tb__nav {
	border-bottom: 1px solid #e5e7eb;
}
.sentio-tb--outline .sentio-tb__tab--active {
	border-color: #e5e7eb;
	border-bottom-color: #ffffff;
	background: #ffffff;
	color: #1e293b;
}
.sentio-tb--outline .sentio-tb__indicator {
	display: none; /* outline uses border-based active state */
}
/* Outline vertical */
.sentio-tb--outline.sentio-tb--dir-left .sentio-tb__nav {
	border-bottom: none;
	border-right: 1px solid #e5e7eb;
}
.sentio-tb--outline.sentio-tb--dir-left .sentio-tb__tab {
	border-radius: 6px 0 0 6px;
	margin-bottom: 0;
	margin-right: -1px;
}
.sentio-tb--outline.sentio-tb--dir-left .sentio-tb__tab--active {
	border-right-color: #ffffff;
}
.sentio-tb--outline.sentio-tb--dir-right .sentio-tb__nav {
	border-bottom: none;
	border-left: 1px solid #e5e7eb;
}
.sentio-tb--outline.sentio-tb--dir-right .sentio-tb__tab {
	border-radius: 0 6px 6px 0;
	margin-bottom: 0;
	margin-left: -1px;
}
.sentio-tb--outline.sentio-tb--dir-right .sentio-tb__tab--active {
	border-left-color: #ffffff;
}

/* ─── Panels ─── */
.sentio-tb__panel {
	display: none;
}
.sentio-tb__panel--active {
	display: block;
}
.sentio-tb__panel-inner {
	padding: 20px 0;
	font-size: 14px;
	line-height: 1.7;
}
.sentio-tb__panel-inner p:last-child {
	margin-bottom: 0;
}

/* ─── Content Transitions — Diff #4 ─── */
@keyframes sentioTbFade {
	from { opacity: 0; }
	to   { opacity: 1; }
}
@keyframes sentioTbSlide {
	from { opacity: 0; transform: translateX(20px); }
	to   { opacity: 1; transform: translateX(0); }
}
@keyframes sentioTbZoom {
	from { opacity: 0; transform: scale(0.96); }
	to   { opacity: 1; transform: scale(1); }
}

.sentio-tb__panel--anim-fade  { animation: sentioTbFade  0.3s ease-out both; }
.sentio-tb__panel--anim-slide { animation: sentioTbSlide 0.3s ease-out both; }
.sentio-tb__panel--anim-zoom  { animation: sentioTbZoom  0.3s ease-out both; }

/* ─── Hover state ─── */
.sentio-tb__tab:hover {
	color: #1e293b;
}

/* ─── Stack on Mobile ─── */
@media (max-width: 767px) {
	.sentio-tb--stack-yes.sentio-tb--dir-top,
	.sentio-tb--stack-yes.sentio-tb--dir-bottom {
		flex-direction: column;
	}
	.sentio-tb--stack-yes .sentio-tb__nav {
		flex-direction: column !important;
		width: 100% !important;
	}
	.sentio-tb--stack-yes .sentio-tb__tab {
		width: 100%;
		justify-content: flex-start;
		text-align: left;
	}
	.sentio-tb--stack-yes .sentio-tb__indicator {
		display: none;
	}
	.sentio-tb--stack-yes .sentio-tb__tab--active {
		background-color: rgba(99, 102, 241, 0.08);
	}
	.sentio-tb__panel-inner {
		padding: 16px 0;
	}
}