/*
 * Venom Tickets front-end — design system (PLAN-FRONTEND-REDO.md §3).
 *
 * Every rule starts with .venom-app and targets a v- class: .venom-app .v-card (0,2,0). This beats
 * every theme rule found in `ideas` (max specificity (0,1,1), e.g. `.entry-content h1`) without a
 * single !important, even if the shortcode output ever ends up back inside .entry-content — the
 * base rule below is written for both cases on purpose. No inline style="" anywhere; all dynamic
 * state is a class (is-open, is-closed, v-pill--urgent) or a data attribute.
 */

/* 3.1 — tokens, on .venom-app so nothing here leaks onto the rest of the theme. */
.venom-app {
	--v-font: inherit;
	--v-fs: 15px;
	--v-lh: 1.5;
	--v-fs-sm: 13px;
	--v-fs-xs: 12px;

	--v-canvas: #f2f2f2;
	--v-surface: #ffffff;
	--v-text: #1a1a1a;
	--v-muted: #6b6b6b;
	--v-border: #e3e3e3;

	--v-side-bg: #141414;
	--v-side-text: #d9d9d9;
	--v-side-muted: #8f8f8f;
	--v-side-border: #2a2a2a;

	--v-ink: #111111;
	--v-accent: #ff6a00;

	--v-ok: #1e7e34;
	--v-ok-bg: #e6f4ea;
	--v-warn: #b26a00;
	--v-warn-bg: #fff4e0;
	--v-bad: #c62828;
	--v-bad-bg: #fdecea;
	--v-info-bg: #eaf2fb;

	--v-r: 10px;
	--v-r-sm: 6px;
	--v-shadow: 0 1px 2px rgba(0, 0, 0, 0.08), 0 1px 6px rgba(0, 0, 0, 0.06);

	--v-s1: 4px;
	--v-s2: 8px;
	--v-s3: 12px;
	--v-s4: 16px;
	--v-s5: 24px;
	--v-s6: 32px;
}

/* Base — written once so it wins whether the shortcode renders inside the theme's .entry-content
 * (today) or a plain page body (after Step 2's page template takes over on the two app pages). This
 * is the fix for "alignment is off": the theme's .entry-content sets 13px grey letter-spaced text,
 * white h1-h6/strong, 20px paragraph margins — none of that is allowed to reach anything under
 * .venom-app. */
.venom-app,
.entry-content .venom-app {
	font-family: var( --v-font );
	font-size: var( --v-fs );
	line-height: var( --v-lh );
	color: var( --v-text );
	letter-spacing: 0;
	box-sizing: border-box;
}

.venom-app *,
.venom-app *::before,
.venom-app *::after {
	box-sizing: inherit;
}

.venom-app :is( h1, h2, h3, h4, h5, h6 ) {
	color: var( --v-text );
	font-weight: 600;
	margin: 0 0 var( --v-s3 ) 0;
	letter-spacing: 0;
}

.venom-app strong {
	color: inherit;
	font-weight: 700;
}

.venom-app p {
	margin: 0 0 var( --v-s3 ) 0;
}

.venom-app a {
	color: var( --v-ink );
}

.venom-app .v-title {
	font-size: 24px;
	font-weight: 600;
	margin: 0 0 var( --v-s4 ) 0;
}

/* §13.1 E.4 — the "Last 30 days" chip next to a list title: a clickable pill (unlike .v-pill, which
 * is decorative-only), toggling ?age=30d without disturbing any other active filter. */
.venom-app .v-chip {
	display: inline-flex;
	align-items: center;
	vertical-align: middle;
	margin-left: var( --v-s2 );
	padding: 2px 10px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 600;
	text-decoration: none;
	background: var( --v-border );
	color: var( --v-muted );
}

.venom-app .v-chip:hover {
	background: var( --v-canvas );
}

.venom-app .v-chip--active {
	background: var( --v-ink );
	color: #ffffff;
}

/* Focus ring — every interactive element, light or dark surface. */
.venom-app a:focus-visible,
.venom-app button:focus-visible,
.venom-app input:focus-visible,
.venom-app select:focus-visible,
.venom-app textarea:focus-visible,
.venom-app summary:focus-visible,
.venom-app [tabindex]:focus-visible {
	outline: 2px solid var( --v-ink );
	outline-offset: 2px;
}

.venom-app .v-side a:focus-visible,
.venom-app .v-info a:focus-visible,
.venom-app .v-side button:focus-visible,
.venom-app .v-info button:focus-visible,
.venom-app .v-side summary:focus-visible,
.venom-app .v-info summary:focus-visible {
	outline-color: #ffffff;
}

/* Screen-reader-only text (icon button labels). */
.venom-app .v-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect( 0, 0, 0, 0 );
	white-space: nowrap;
	border: 0;
}

/* 3.2 — app shell. */
.venom-app {
	display: grid;
	grid-template-columns: 260px minmax( 0, 1fr );
	gap: var( --v-s5 );
	min-height: 70vh;
	align-items: start;
}

.venom-app.venom-app--has-info {
	grid-template-columns: 260px minmax( 0, 1fr ) 320px;
}

.venom-app .v-side {
	background: var( --v-side-bg );
	color: var( --v-side-text );
	border-radius: var( --v-r );
	padding: var( --v-s4 );
	position: sticky;
	top: 0;
	max-height: 100vh;
	overflow-x: hidden;
	overflow-y: auto;
	min-width: 0;
}

body.admin-bar .venom-app .v-side,
body.admin-bar .venom-app .v-info {
	top: 32px;
	max-height: calc( 100vh - 32px );
}

.venom-app .v-main {
	background: var( --v-canvas );
	border-radius: var( --v-r );
	padding: var( --v-s5 );
	min-width: 0;
	/* §13.1 E.5 point 5 — a short list (a filtered tab with one or two rows) otherwise leaves the
	 * canvas much shorter than the sidebar, so the theme's own footer jumps up under it; a fixed
	 * floor keeps the canvas (and the footer below it) steady regardless of list length. */
	min-height: 60vh;
}

.venom-app .v-info {
	background: var( --v-side-bg );
	color: var( --v-side-text );
	border-radius: var( --v-r );
	padding: var( --v-s4 );
	position: sticky;
	top: 0;
	max-height: 100vh;
	overflow-x: hidden;
	overflow-y: auto;
	min-width: 0;
}

/* §5 — logged-out / no-permission gate: a single centred card instead of the sidebar+main grid
 * (there's nothing to put in a sidebar yet — no session, no ticket queue). */
.venom-app.venom-app--gate {
	grid-template-columns: minmax( 0, 1fr );
	justify-items: center;
	align-content: center;
	text-align: center;
}

.venom-app .v-gate {
	max-width: 420px;
}

.venom-app .v-gate p {
	margin: 0 0 var( --v-s4 ) 0;
}

/* §13.1 B — the public [cjsupport_run_app] gate (includes/app-shortcode.php): Login + Create
 * Account side by side, same v-gate card otherwise. */
.venom-app .v-gate--public .v-gate__actions {
	display: flex;
	justify-content: center;
	gap: var( --v-s3 );
	margin: 0 0 var( --v-s4 ) 0;
}

/* ≤1180px — info panel moves under main. */
@media ( max-width: 1180px ) {
	.venom-app.venom-app--has-info {
		grid-template-columns: 260px minmax( 0, 1fr );
	}
	.venom-app .v-info {
		grid-column: 1 / -1;
		position: static;
		max-height: none;
	}
}

/* ≤820px — single column; sidebar becomes a collapsible <details>. */
@media ( max-width: 820px ) {
	.venom-app,
	.venom-app.venom-app--has-info {
		grid-template-columns: minmax( 0, 1fr );
	}
	.venom-app .v-side,
	.venom-app .v-info {
		position: static;
		max-height: none;
	}
	.venom-app .v-side-toggle summary {
		cursor: pointer;
		list-style: none;
		font-weight: 600;
		padding: var( --v-s1 ) 0;
	}
	.venom-app .v-side-toggle summary::-webkit-details-marker {
		display: none;
	}
	.venom-app .v-side-toggle summary::after {
		content: '\25BE';
		margin-left: var( --v-s1 );
	}
}

/* ≥821px — the <details> is always in the markup, but never collapses: hide its summary toggle and
 * force the content block visible regardless of the [open] attribute, at higher specificity than
 * the UA stylesheet's `details:not([open]) > :not(summary) { display: none }` — no !important. */
@media ( min-width: 821px ) {
	.venom-app .v-side-toggle > summary {
		display: none;
	}
	.venom-app .v-side-toggle > .v-side__content {
		display: block;
	}
}

/* 3.3 — components. */

/* Card. */
.venom-app .v-card {
	background: var( --v-surface );
	border-radius: var( --v-r );
	box-shadow: var( --v-shadow );
	padding: var( --v-s5 );
	margin: 0 0 var( --v-s4 ) 0;
}

.venom-app .v-card--tight {
	padding: var( --v-s4 );
}

.venom-app .v-card__title {
	font-size: var( --v-fs-xs );
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var( --v-muted );
	margin: 0 0 var( --v-s3 ) 0;
}

/* Sidebar section / nav. */
.venom-app .v-side__section {
	margin: 0 0 var( --v-s5 ) 0;
}

.venom-app .v-side__title {
	font-size: var( --v-fs-xs );
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var( --v-side-muted );
	margin: 0 0 var( --v-s2 ) 0;
}

.venom-app .v-nav {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.venom-app .v-nav__item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var( --v-s2 );
	padding: var( --v-s2 ) var( --v-s3 );
	border-radius: var( --v-r-sm );
	color: var( --v-side-text );
	text-decoration: none;
	font-size: var( --v-fs-sm );
}

.venom-app .v-nav__item:hover {
	background: var( --v-side-border );
}

.venom-app .v-nav__item.is-active {
	background: var( --v-ink );
	color: #ffffff;
	font-weight: 600;
}

.venom-app .v-count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 20px;
	padding: 1px var( --v-s1 );
	border-radius: 999px;
	background: var( --v-side-border );
	color: var( --v-side-text );
	font-size: 11px;
	font-weight: 600;
	line-height: 1.6;
}

/* Search. */
.venom-app .v-search {
	display: flex;
	align-items: center;
	gap: var( --v-s1 );
	margin: 0 0 var( --v-s5 ) 0;
}

.venom-app .v-search input[type='search'] {
	flex: 1;
	min-width: 0;
	background: var( --v-side-border );
	border: 1px solid var( --v-side-border );
	color: var( --v-side-text );
	border-radius: var( --v-r-sm );
	padding: var( --v-s2 ) var( --v-s3 );
	font-size: var( --v-fs-sm );
}

.venom-app .v-search input[type='search']::placeholder {
	color: var( --v-side-muted );
}

.venom-app .v-search button {
	background: transparent;
	border: 1px solid var( --v-side-border );
	color: var( --v-side-text );
	border-radius: var( --v-r-sm );
	padding: var( --v-s2 );
	line-height: 0;
	cursor: pointer;
}

/* §13.1 E.1 — the customer-picker search results (staff "New ticket for a customer" step 1). */
.venom-app .v-customer-results {
	list-style: none;
	margin: var( --v-s4 ) 0 0 0;
	padding: 0;
}

.venom-app .v-customer-result {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var( --v-s3 );
	padding: var( --v-s3 ) 0;
	border-top: 1px solid var( --v-border );
}

.venom-app .v-customer-result:first-child {
	border-top: none;
}

.venom-app .v-customer-result__info {
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

/* Ticket row. */
.venom-app .v-row {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: var( --v-s4 ) var( --v-s2 );
	background: var( --v-surface );
	border-radius: var( --v-r );
	box-shadow: var( --v-shadow );
	padding: var( --v-s4 );
	margin: 0 0 var( --v-s2 ) 0;
}

/* At narrow widths (three fixed-size icon buttons + a 44px avatar leave too little room beside the
 * body for real ticket text) the actions row wraps under the body instead of squeezing it — the
 * body itself never needs to shrink below a sane minimum. */
@media ( max-width: 480px ) {
	.venom-app .v-row__body {
		flex-basis: 100%;
	}
	.venom-app .v-row__actions {
		flex-basis: 100%;
		justify-content: flex-end;
		margin-top: var( --v-s1 );
	}
}

.venom-app .v-row__avatar {
	flex-shrink: 0;
	line-height: 0;
}

.venom-app .v-row__avatar img {
	border-radius: 999px;
	display: block;
}

.venom-app .v-row__body {
	flex: 1;
	min-width: 0;
}

/* Deliberately plain block + inline flow here, NOT flex: a flex item's automatic minimum content
 * size, combined with overflow-wrap:anywhere or a percentage min-width on a descendant, collapses
 * to near-zero in a way that forces the text to break one character per line (a real bug hit and
 * fixed during Step 2's own responsive check at 390px — see git history). Plain inline layout wraps
 * the link at word boundaries and lets the pills (already inline-flex) fall onto their own line
 * when they don't fit, with none of that risk. */
.venom-app .v-row__title {
	font-size: var( --v-fs );
	font-weight: 600;
	margin: 0 0 var( --v-s1 ) 0;
}

.venom-app .v-row__title a {
	text-decoration: none;
	color: var( --v-text );
}

.venom-app .v-row__title a:hover {
	text-decoration: underline;
}

.venom-app .v-row__title .v-pill {
	margin-left: var( --v-s2 );
}

.venom-app .v-row__meta,
.venom-app .v-row__activity {
	margin: 0 0 var( --v-s1 ) 0;
	font-size: var( --v-fs-sm );
	color: var( --v-muted );
	overflow-wrap: anywhere;
}

.venom-app .v-row__actions {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	gap: var( --v-s1 );
}

/* Pills — status, priority, alert, star. */
.venom-app .v-pill {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 2px 9px;
	border-radius: 999px;
	font-size: 11px;
	font-weight: 600;
	line-height: 1.7;
	white-space: nowrap;
}

.venom-app .v-pill--open {
	background: var( --v-ok-bg );
	color: var( --v-ok );
}

.venom-app .v-pill--closed {
	background: var( --v-border );
	color: var( --v-muted );
}

.venom-app .v-pill--low {
	background: var( --v-info-bg );
	color: #2c5c8a;
}

.venom-app .v-pill--normal {
	display: none; /* not shown per §3.3 — only non-normal priorities get a pill */
}

.venom-app .v-pill--high {
	background: var( --v-warn-bg );
	color: var( --v-warn );
}

.venom-app .v-pill--urgent {
	background: var( --v-bad-bg );
	color: var( --v-bad );
}

.venom-app .v-pill--alert {
	background: var( --v-bad-bg );
	color: var( --v-bad );
}

.venom-app .v-pill--star {
	background: var( --v-warn-bg );
	color: var( --v-warn );
}

/* §14 — knowledge fold-in: the "Wiki article"/"FAQ" type tag and the "Published as FAQ" pill (an
 * <a>, not a <span> — it links straight to the published post). */
.venom-app .v-pill--kb {
	background: var( --v-info-bg );
	color: #2c5c8a;
	text-decoration: none;
}

.venom-app a.v-pill--kb:hover {
	text-decoration: underline;
}

/* Message. */
.venom-app .v-msg {
	display: flex;
	gap: var( --v-s4 );
	background: var( --v-surface );
	border-radius: var( --v-r );
	box-shadow: var( --v-shadow );
	padding: var( --v-s5 );
	margin: 0 0 var( --v-s3 ) 0;
}

.venom-app .v-msg--internal {
	background: var( --v-warn-bg );
}

.venom-app .v-msg--original {
	border-left: 3px solid var( --v-ink );
}

.venom-app .v-msg__avatar {
	flex-shrink: 0;
	line-height: 0;
}

.venom-app .v-msg__avatar img {
	border-radius: 999px;
	display: block;
}

.venom-app .v-msg__body-wrap {
	flex: 1;
	min-width: 0;
}

.venom-app .v-msg__header {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var( --v-s2 );
	margin-bottom: var( --v-s2 );
	font-size: var( --v-fs-sm );
	color: var( --v-muted );
}

.venom-app .v-msg__author {
	color: var( --v-text );
	font-weight: 600;
}

.venom-app .v-msg__role {
	font-size: 11px;
	font-weight: 600;
	padding: 1px 8px;
	border-radius: 999px;
	background: var( --v-ink );
	color: #ffffff;
}

.venom-app .v-msg__body {
	overflow-wrap: anywhere;
	max-width: 72ch; /* §13.1 E.5 point 5 — a very wide message column is hard to read line-to-line. */
}

.venom-app .v-msg__body :is( p, ul, ol, blockquote ) {
	margin: 0 0 var( --v-s3 ) 0;
}

.venom-app .v-msg__body :is( p, ul, ol, blockquote ):last-child {
	margin-bottom: 0;
}

.venom-app .v-msg__body blockquote {
	border-left: 3px solid var( --v-border );
	padding-left: var( --v-s3 );
	color: var( --v-muted );
}

.venom-app .v-msg__body code {
	background: var( --v-canvas );
	border-radius: 4px;
	padding: 1px 5px;
	font-size: 0.92em;
}

.venom-app .v-msg__body a {
	text-decoration: underline;
}

/* §13.1 E.2 — the inline "Edit" control on a staff member's own reply, native <details> so no JS is
 * needed to reveal the form (same technique as .v-collapsed just below). */
.venom-app .v-msg-edit {
	margin-top: var( --v-s3 );
}

.venom-app .v-msg-edit__toggle {
	cursor: pointer;
	list-style: none;
	color: var( --v-muted );
	font-size: var( --v-fs-sm );
	font-weight: 600;
}

.venom-app .v-msg-edit__toggle::-webkit-details-marker {
	display: none;
}

.venom-app .v-msg-edit__form {
	margin-top: var( --v-s2 );
}

.venom-app .v-msg-edit__form textarea {
	min-height: 100px;
}

/* Collapsed older replies (long-thread collapse — works without JS, native <details>). */
.venom-app .v-collapsed > summary {
	cursor: pointer;
	color: var( --v-muted );
	font-size: var( --v-fs-sm );
	font-weight: 600;
	padding: var( --v-s2 ) 0;
	list-style: none;
}

.venom-app .v-collapsed > summary::-webkit-details-marker {
	display: none;
}

.venom-app .v-collapsed > summary::before {
	content: '\25B8';
	display: inline-block;
	margin-right: var( --v-s1 );
}

.venom-app .v-collapsed[open] > summary::before {
	content: '\25BE';
}

/* Attachments. */
.venom-app .v-files {
	margin-top: var( --v-s3 );
}

.venom-app .v-files__grid {
	display: flex;
	flex-wrap: wrap;
	gap: var( --v-s2 );
}

.venom-app .v-files__grid a {
	display: block;
	border-radius: var( --v-r-sm );
	overflow: hidden;
	line-height: 0;
}

.venom-app .v-files__grid img {
	width: 120px;
	height: 90px;
	object-fit: cover;
	display: block;
}

.venom-app .v-files video {
	max-width: 480px;
	width: 100%;
	border-radius: var( --v-r-sm );
	display: block;
	margin-top: var( --v-s2 );
}

.venom-app .v-file {
	display: inline-flex;
	align-items: center;
	gap: var( --v-s1 );
	padding: var( --v-s1 ) var( --v-s2 );
	border: 1px solid var( --v-border );
	border-radius: var( --v-r-sm );
	text-decoration: none;
	color: var( --v-text );
	font-size: var( --v-fs-sm );
	margin: 0 var( --v-s1 ) var( --v-s1 ) 0;
}

.venom-app .v-file:hover {
	background: var( --v-canvas );
}

.venom-app .v-file__size {
	color: var( --v-muted );
}

/* Composer. */
.venom-app .v-composer {
	position: relative;
}

.venom-app .v-composer__options {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var( --v-s4 );
	margin: var( --v-s3 ) 0;
	font-size: var( --v-fs-sm );
}

.venom-app .v-composer__files {
	margin: var( --v-s3 ) 0;
	font-size: var( --v-fs-sm );
}

.venom-app .v-composer__submit {
	display: flex;
	align-items: center;
	gap: var( --v-s3 );
	margin-top: var( --v-s3 );
}

.venom-app .v-composer__hint {
	color: var( --v-muted );
	font-size: var( --v-fs-xs );
}

.venom-app .v-resolve {
	display: flex;
	align-items: center;
	gap: var( --v-s2 );
	width: 100%;
	background: var( --v-ok-bg );
	color: var( --v-ok );
	border-radius: var( --v-r-sm );
	padding: var( --v-s3 );
	margin: var( --v-s3 ) 0;
	font-size: var( --v-fs-sm );
	font-weight: 600;
}

/* Info panel (key/value). */
.venom-app .v-panel {
	margin: 0 0 var( --v-s4 ) 0;
	border-bottom: 1px solid var( --v-side-border );
	padding-bottom: var( --v-s4 );
}

.venom-app .v-panel:last-child {
	border-bottom: none;
	padding-bottom: 0;
}

.venom-app .v-panel__title {
	cursor: pointer;
	list-style: none;
	font-size: var( --v-fs-xs );
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var( --v-side-muted );
	margin-bottom: var( --v-s3 );
}

.venom-app .v-panel__title::-webkit-details-marker {
	display: none;
}

.venom-app .v-kv {
	margin: 0;
	display: grid;
	grid-template-columns: 1fr;
	gap: var( --v-s2 );
}

.venom-app .v-kv dt {
	color: var( --v-side-muted );
	font-size: var( --v-fs-xs );
	margin: 0 0 2px 0;
}

.venom-app .v-kv dd {
	color: var( --v-side-text );
	font-size: var( --v-fs-sm );
	margin: 0 0 var( --v-s2 ) 0;
	overflow-wrap: anywhere;
}

.venom-app .v-kv__statement {
	color: var( --v-side-text );
	font-size: var( --v-fs-sm );
	font-weight: 600;
	margin: 0 0 var( --v-s2 ) 0;
}

.venom-app .v-inline-form {
	display: flex;
	gap: var( --v-s1 );
	align-items: center;
}

.venom-app .v-inline-form select {
	flex: 1;
	min-width: 0;
}

/* Buttons. */
.venom-app .v-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var( --v-s1 );
	background: var( --v-ink );
	color: #ffffff;
	border: none;
	border-radius: var( --v-r-sm );
	padding: 9px 18px;
	font-size: var( --v-fs-sm );
	font-weight: 600;
	cursor: pointer;
	text-decoration: none;
	line-height: 1.3;
}

.venom-app .v-btn:hover:not( :disabled ) {
	background: #262626;
}

.venom-app .v-btn--secondary {
	background: #ffffff;
	color: var( --v-text );
	border: 1px solid var( --v-border );
}

.venom-app .v-btn--secondary:hover:not( :disabled ) {
	background: var( --v-canvas );
}

.venom-app .v-btn--sm {
	padding: 5px 12px;
	font-size: var( --v-fs-xs );
}

.venom-app .v-btn--on-dark {
	background: #ffffff;
	color: var( --v-ink );
}

.venom-app .v-btn--on-dark:hover:not( :disabled ) {
	background: #e6e6e6;
}

.venom-app .v-btn--block {
	width: 100%;
	justify-content: center;
}

.venom-app .v-btn:disabled,
.venom-app .v-iconbtn:disabled {
	opacity: 0.55;
	cursor: wait;
}

.venom-app .v-iconbtn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: var( --v-r-sm );
	border: 1px solid var( --v-border );
	background: #ffffff;
	color: var( --v-text );
	cursor: pointer;
	text-decoration: none;
}

.venom-app .v-iconbtn:hover:not( :disabled ) {
	background: var( --v-canvas );
}

.venom-app .v-side .v-iconbtn,
.venom-app .v-info .v-iconbtn {
	border-color: var( --v-side-border );
	background: transparent;
	color: var( --v-side-text );
}

.venom-app .v-icon {
	width: 1em;
	height: 1em;
	display: inline-block;
	vertical-align: -0.15em;
}

/* Forms. */
.venom-app .v-field {
	display: block;
	margin: 0 0 var( --v-s4 ) 0;
}

.venom-app .v-field > label {
	display: block;
	font-size: var( --v-fs-sm );
	font-weight: 600;
	margin-bottom: var( --v-s1 );
}

.venom-app :is( input, select, textarea ) {
	font-family: inherit;
	font-size: var( --v-fs );
	color: var( --v-text );
	background: #ffffff;
	border: 1px solid var( --v-border );
	border-radius: var( --v-r-sm );
	padding: 10px;
	width: 100%;
}

.venom-app textarea {
	min-height: 160px;
	resize: vertical;
}

.venom-app .v-hint {
	display: block;
	color: var( --v-muted );
	font-size: var( --v-fs-sm );
	margin-top: var( --v-s1 );
}

.venom-app .v-hint--bad {
	color: var( --v-bad );
}

/* Notice. */
.venom-app .v-notice {
	display: flex;
	align-items: center;
	gap: var( --v-s2 );
	border-radius: var( --v-r );
	padding: var( --v-s3 ) var( --v-s4 );
	margin: 0 0 var( --v-s4 ) 0;
	font-size: var( --v-fs-sm );
}

.venom-app .v-notice--ok {
	background: var( --v-ok-bg );
	color: var( --v-ok );
}

.venom-app .v-notice--bad {
	background: var( --v-bad-bg );
	color: var( --v-bad );
}

.venom-app .v-notice--info {
	background: var( --v-info-bg );
	color: #2c5c8a;
}

/* §13.1 E.3 — the draft-restored hint app.js inserts above a composer; reuses .v-notice--info's
 * colours with its own dismiss button pinned to the right. */
.venom-app .v-draft-hint {
	justify-content: space-between;
}

.venom-app .v-draft-hint__dismiss {
	flex-shrink: 0;
	width: 24px;
	height: 24px;
	border-color: transparent;
	background: transparent;
	color: inherit;
}

/* §14 — knowledge fold-in: the customer new-ticket / staff composer search widget, its result cards,
 * and the reply-to-FAQ inline form. `.v-kb-insert-search` reuses `.v-panel` (info-panel <details>)
 * since it lives inside the composer card alongside the same collapsible look. */
.venom-app .v-kb-search__row {
	display: flex;
	gap: var( --v-s2 );
	align-items: flex-start;
}

.venom-app .v-kb-search__row input {
	flex: 1 1 auto;
}

.venom-app .v-kb-results {
	margin-top: var( --v-s4 );
	display: grid;
	gap: var( --v-s3 );
}

.venom-app .v-kb-card {
	border: 1px solid var( --v-border );
	border-radius: var( --v-r-sm );
	padding: var( --v-s3 ) var( --v-s4 );
}

.venom-app .v-kb-card__title {
	display: flex;
	align-items: center;
	gap: var( --v-s2 );
	font-weight: 600;
	margin: 0 0 var( --v-s1 ) 0;
}

.venom-app .v-kb-card__excerpt {
	margin: 0 0 var( --v-s2 ) 0;
	color: var( --v-muted );
	font-size: var( --v-fs-sm );
}

.venom-app .v-kb-card__url {
	margin: 0 0 var( --v-s2 ) 0;
	color: var( --v-muted );
	font-size: var( --v-fs-xs );
	overflow-wrap: anywhere;
}

.venom-app .v-kb-insert-search {
	margin-top: var( --v-s4 );
	border-top: 1px solid var( --v-border );
	padding-top: var( --v-s4 );
}

.venom-app .v-kb-insert-search summary {
	cursor: pointer;
}

.venom-app .v-faq-form {
	margin-top: var( --v-s2 );
}

/* Empty state. */
.venom-app .v-empty {
	text-align: center;
	padding: var( --v-s6 ) var( --v-s4 );
	color: var( --v-muted );
}

.venom-app .v-empty .v-icon {
	width: 32px;
	height: 32px;
	margin-bottom: var( --v-s3 );
	color: var( --v-border );
}

/* Step 4 — thread header action row (star / close-reopen / refresh): each action is its own plain
 * <form> (§2.4, no XHR), laid out inline instead of stacking as block-level forms normally would. */
.venom-app .v-thread-actions {
	display: flex;
	align-items: center;
	gap: var( --v-s2 );
	margin: 0 0 var( --v-s4 ) 0;
}

.venom-app .v-thread-actions form {
	display: inline-block;
	margin: 0;
}

/* Loading bar — fixed top, moved to <body> by app.js on trigger; respects the admin bar. */
.v-loading {
	position: fixed;
	top: 0;
	left: 0;
	height: 3px;
	width: 0;
	background: var( --v-accent );
	box-shadow: 0 0 6px rgba( 255, 106, 0, 0.8 );
	z-index: 99999;
	opacity: 0;
	pointer-events: none;
}

body.admin-bar .v-loading {
	top: 32px;
}

/* §13.1 B — the homepage (page 7) and similar pages carry content after [cjsupport_run_app] (the
 * "IMPORTANT NOTICE" paragraph, the warranty-lookup link, [user_role_editor] wrappers) that the
 * theme's own .entry-content used to style; templates/page-venom-app.php's wrapper is now the only
 * thing around it, so it needs its own rule here rather than going unstyled. `.venom-app-page` is the
 * one selector this design system allows outside `.venom-app`. On the real page (F31: WPBakery
 * `vc_row`/`vc_column` wraps every shortcode), `.venom-app` is almost never a literal direct child of
 * `.venom-app-page` — it's nested a few `vc_*` wrapper divs down — so excluding it with a plain
 * `:not(.venom-app)` on the direct child only stops a match on that one wrapper *itself*; the
 * `:not(.venom-app)` wrapper *around* the app still matches, and a descendant-combinator rule like
 * `… a` would then reach past it straight into the app's own buttons/links (found live: it silently
 * overrode `.v-btn`'s white text with the notice text colour, and shrank the whole app to this rule's
 * max-width). `:has()` fixes this correctly: a top-level child only gets this styling when `.venom-app`
 * is not that child AND not anywhere inside it. */
.venom-app-page > *:not( .venom-app ):not( :has( .venom-app ) ) {
	max-width: 1100px;
	margin-left: auto;
	margin-right: auto;
	color: #ffffff;
	font-size: 14px;
}

.venom-app-page > *:not( .venom-app ):not( :has( .venom-app ) ) a {
	color: inherit;
	text-decoration: underline;
}

@media screen and ( max-width: 782px ) {
	body.admin-bar .v-loading {
		top: 46px;
	}
}

.v-loading.is-active {
	opacity: 1;
	transition: width 4s cubic-bezier( 0.1, 0.5, 0.1, 1 );
}

/* Rung 10.2 (plan §16.4/§16.5) — the registration forms and staff approval queue reuse every
 * existing component (.v-card, .v-field, .v-btn, .v-kv, .v-panel, .v-chip, .v-notice, .v-empty); the
 * few additions below are the repeatable serial-number rows and one generic "hide without !important"
 * utility for the country-conditional store/branch fields (assets/app.js toggles this class; the
 * fields still exist in the DOM either way, so the form works exactly the same with JS disabled — it
 * just always shows every field instead of hiding the inapplicable ones). */
.venom-app .v-hide {
	display: none;
}

.venom-app .v-repeat__row {
	display: flex;
	gap: var( --v-s2 );
	align-items: center;
	margin-bottom: var( --v-s2 );
}

.venom-app .v-repeat__row .v-repeat__input {
	flex: 1 1 auto;
}

.venom-app .v-repeat__add {
	margin-bottom: var( --v-s3 );
}