/* ------------------------------------------------------------------
   .evo-tabs - card tabs (docs-dev/styling 6.2; ruled 07-10-2026 as the
   tab structure for the modernized layout, piloted 04-10-2026)
   The strip is the top edge of a white rounded card and the open tab's
   content sits inside that card. Used by opportunityRecord,
   support_ticketedit, ticketedit, shipping and reqedit; legacy screens
   keep .page-nav-menu (styling 6.1) until they are modernized.
   Behaviour lives in assets/js/evoTabs.js (EvoTabs.init). State is
   classes/attributes only - never inline styles (6.1a).
   ------------------------------------------------------------------ */
.evo-tabset { margin-bottom: .75rem; }

.evo-tabs {
	display: flex;
	align-items: stretch;
	gap: .15rem;
	background: #fff;
	border: 1px solid #dee2e6;
	border-radius: .5rem .5rem 0 0;
	padding: 0 .5rem;
	overflow-x: auto;
	overflow-y: hidden;
	scrollbar-width: thin;
	-webkit-overflow-scrolling: touch;
}
/* A bare pane (one that holds its own cards) is open: the strip stands alone. */
.evo-tabset.is-bare > .evo-tabs { border-radius: .5rem; margin-bottom: .5rem; }

.evo-tab {
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	flex: 0 0 auto;
	background: transparent;
	border: 0;
	border-bottom: 3px solid transparent;
	border-radius: .4rem .4rem 0 0;
	color: #5c6673;
	font-size: .875rem;
	font-weight: 500;
	line-height: 1.2;
	padding: .65rem .8rem .5rem;
	white-space: nowrap;
	cursor: pointer;
}
.evo-tab .material-symbols-rounded { font-size: 1.385rem; }
.evo-tab:hover:not([aria-selected="true"]) {
	color: var(--main-text-color, #1f2733);
	background-color: rgba(17, 24, 39, .04);
}
.evo-tab:focus { outline: none; }
.evo-tab:focus-visible {
	outline: 2px solid var(--main-highlight-color, var(--bs-primary));
	outline-offset: -4px;
}
.evo-tab[aria-selected="true"] {
	color: var(--main-text-color, #111827);
	font-weight: 600;
	border-bottom-color: var(--main-highlight-color, var(--bs-primary));
}
.evo-tab[hidden] { display: none; }

/* Counts: a quiet chip that inverts to the theme colour on the open tab. */
.evo-tab-count {
	display: inline-block;
	min-width: 1.4em;
	padding: .05rem .45rem;
	border-radius: 1rem;
	background: #eef0f3;
	color: #5c6673;
	font-size: .72rem;
	font-weight: 500;
	text-align: center;
	font-variant-numeric: tabular-nums;
}
.evo-tab-count:empty { display: none; }
.evo-tab[aria-selected="true"] .evo-tab-count {
	background: var(--main-highlight-color, var(--bs-primary));
	color: #fff;
}

.evo-tabpane {
	background: #fff;
	border: 1px solid #dee2e6;
	border-top: 0;
	border-radius: 0 0 .5rem .5rem;
	padding: .75rem 1rem 1rem;
}
.evo-tabpane[hidden] { display: none; }
.evo-tabpane--bare { background: transparent; border: 0; border-radius: 0; padding: 0; }

@media (max-width: 767.98px) {
	.evo-tabs { padding: 0 .25rem; }
	.evo-tab { padding: .6rem .6rem .45rem; }
	.evo-tabpane { padding: .6rem .6rem .8rem; }
}