/* ==========================================================================
   Vera harness page (mod/settings/vera): find bars, jump links and row filtering for the long Switches, Tools and
   Permissions tables. Colours only through the kit tokens (--ffo*, --bg-input, --border-color) with fallbacks.
   Filtering is client side (veraHarness.js): a filtered row gets the hidden attribute and a group with no rows left hides.
   ========================================================================== */

.vera-find {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 12px;
	margin: 0 0 10px;
	box-sizing: border-box;
}

.vera-find input[type="search"] {
	flex: 1 1 220px;
	max-width: 360px;
	min-width: 0;
	box-sizing: border-box;
	padding: 7px 10px;
	font-size: 14px;
	color: var(--ffoText, #1f2733);
	background: var(--bg-input, #fff);
	border: 1px solid var(--border-color, #cccccc);
	border-radius: 6px;
}

.vera-find input[type="search"]:focus {
	outline: 2px solid var(--primary-light, #4a90e2);
	outline-offset: 1px;
}

.vera-find-count {
	font-size: 12.5px;
	color: var(--ffoMuted, #6b778a);
}

.vera-jump {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0 0 10px;
}

.vera-jump a {
	font-size: 12.5px;
	padding: 3px 9px;
	border-radius: 999px;
	text-decoration: none;
	color: var(--ffoText, #1f2733);
	border: 1px solid var(--border-color-light, #e0e0e0);
	background: var(--bg-secondary, #f6f6f6);
}

.vera-jump a:hover { border-color: var(--primary-light, #4a90e2); }

#veraSwitchesForm [data-vera-group][hidden],
#veraPermScope [data-vera-group][hidden],
#veraSwitchesForm .formRow[hidden],
#veraToolsScope .formRow[hidden],
#veraPermScope .formRow[hidden] { display: none !important; }

.vera-harness [id^="veraSwGroup"] { scroll-margin-top: 12px; }

.vera-usage-example { padding: 10px 0; }

/* Phone: the harness tab strip wraps instead of cutting Permissions and Usage off at the right edge (same pattern as peCfgTabs). */
@media (max-width: 720px) {
	.tab-container[data-tab-group^="veraHarness"] > .tab-buttons > .tab-buttons-scroll { flex-wrap: wrap; overflow: visible; gap: 4px; }
	.tab-container[data-tab-group^="veraHarness"] .tab-button { flex: 1 1 auto; min-width: 0; }
}

/* Wide tables scroll sideways inside their card (veraHarness.js adds the note above each one while there are columns to the right). */
.veraScrollNote { margin: 0 16px 6px; }
.veraScrollNote[hidden] { display: none !important; }

/* Side hints (the Dev key pill on Connection) wrap inside a narrow settings column instead of clipping ("encryptio"). */
.ffo-set-s > .ffo-dot { white-space: normal; overflow: visible; text-align: right; max-width: 100%; }