/**
 * Support desk — storefront and staff.
 *
 * The storefront half is built from the theme's own account vocabulary rather
 * than a look of its own: `.fv-pill`, `.fv-btn-ghost`, `.fv-acc-cta` and
 * `.fv-acc-blank` come from account.css and are reused here, so a status reads
 * the same in Support as it does in Orders one tab away. What is defined below
 * is only what a conversation needs and an order list does not.
 *
 * Two things were wrong with the first version and are worth naming, because
 * both came from writing CSS without reading the theme first. It used 10px
 * corners and 999px pills; this design's radii run **1px to 6px**
 * (`--fv-radius-sm` … `--fv-radius-2xl`), so every box looked borrowed from a
 * different site. And it hard-coded greys and blues instead of the ink and
 * line tokens, so nothing matched in either theme.
 *
 * Every colour below is a token. The admin half keeps WordPress's own palette,
 * because that screen belongs to wp-admin and should look like it.
 */

/* ══ storefront ══════════════════════════════════════════════════ */

.fvt {
	--fvt-gap: 10px;
}

/* ── the ticket list ─────────────────────────────────────────────── */

.fvt-list {
	list-style: none;
	margin: 14px 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--fvt-gap);
}

.fvt-row-link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 12px 14px;
	background: var(--fv-cream);
	border-radius: var(--fv-radius-lg);
	box-shadow: var(--fv-shadow-sm);
	text-decoration: none;
	color: inherit;
	transition: background 0.15s ease;
}

.fvt-row-link:hover {
	background: var(--fv-cream-hover);
	text-decoration: none;
}

/*
 * An unread ticket is marked with an edge rather than a colour wash: the row
 * has to stay readable, and a tinted background on a cream card turns muddy.
 */
.fvt-row.is-unread .fvt-row-link {
	box-shadow: inset 3px 0 0 var(--fv-accent), var(--fv-shadow-sm);
}

.fvt-row-body {
	/*
	 * Both of these are load-bearing.
	 *
	 * The subject is `white-space: nowrap`, so this column's content size is
	 * the full length of the subject — measured 634px inside a 370px row on
	 * a phone. `min-width: 0` alone did not bring it back: the item kept its
	 * content size and the text was cut off at the screen edge, without even
	 * the ellipsis it was given, because `body` hides horizontal overflow and
	 * nothing looked broken until the widths were measured.
	 */
	min-width: 0;
	max-width: 100%;
	display: flex;
	flex-direction: column;
	gap: 3px;
}

.fvt-row-title {
	display: flex;
	align-items: center;
	gap: 7px;
	min-width: 0;
	max-width: 100%;
}

.fvt-subject {
	font-size: 14px;
	font-weight: 700;
	color: var(--fv-ink);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;

	/*
	 * The ellipsis only works once this can be made narrower than its own
	 * text. `min-width: 0` on the wrappers is not enough: this element is
	 * itself a flex item, and a flex item defaults to `min-width: auto`,
	 * which means "never shrink below your content". A long subject
	 * therefore stretched the row past the screen instead of ending in the
	 * "…" it had been given.
	 */
	min-width: 0;
}

.fvt-new-dot {
	flex: none;
	width: 7px;
	height: 7px;
	border-radius: var(--fv-radius-full);
	background: var(--fv-accent);
}

.fvt-row-meta {
	font-size: 12px;
	color: var(--fv-ink-3);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 5px;
}

.fvt-ref {
	font-family: var(--fv-mono);
	font-size: 11px;
	font-weight: 700;
	color: var(--fv-ink-2);
	letter-spacing: 0.02em;
}

.fvt-dot { color: var(--fv-ink-soft); }

.fvt-pager {
	display: flex;
	gap: 6px;
	margin-top: 16px;
}

.woocommerce-account .fvt-pager .fv-btn-ghost.is-current {
	background: var(--fv-accent);
	border-color: var(--fv-accent);
	color: #fff;
}

/* ── facts strip on a single ticket ──────────────────────────────── */

.fvt-facts {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 16px;
	margin: 12px 0 18px;
	padding: 11px 14px;
	background: var(--fv-muted);
	border-radius: var(--fv-radius-lg);
}

.fvt-fact {
	display: inline-flex;
	align-items: baseline;
	gap: 6px;
	font-size: 12.5px;
	color: var(--fv-ink-2);
}

.fvt-fact-k {
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--fv-ink-3);
}

/* ── the conversation ────────────────────────────────────────────── */

.fvt-thread {
	list-style: none;
	margin: 0 0 18px;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.fvt-msg {
	display: flex;
}

/*
 * Customer right, support left — the arrangement everyone already knows from
 * every messaging app, so nobody has to work out who said what.
 */
.fvt-msg.is-customer { justify-content: flex-end; }
.fvt-msg.is-staff { justify-content: flex-start; }

.fvt-bubble {
	max-width: min(560px, 88%);
	padding: 10px 13px;
	border: 1px solid var(--fv-line);
	border-radius: var(--fv-radius-xl);
	background: var(--fv-surface);
}

.fvt-msg.is-customer .fvt-bubble {
	background: var(--fv-accent-soft);
	border-color: color-mix(in oklab, var(--fv-accent) 22%, transparent);
}

.fvt-msg.is-staff .fvt-bubble {
	background: var(--fv-cream);
	border-color: var(--fv-line);
}

/*
 * An internal note must be unmistakable on the staff screen — it is the one
 * thing here that the customer must never be shown, and a note mistaken for a
 * reply is how a buy price ends up in front of a customer.
 */
.fvt-msg.is-note .fvt-bubble {
	background: #fffaf0;
	border-color: var(--fv-warn);
	border-left-width: 3px;
}

.fvt-msg-head {
	display: flex;
	align-items: baseline;
	gap: 8px;
	margin-bottom: 4px;
}

.fvt-author {
	font-size: 12px;
	font-weight: 700;
	color: var(--fv-ink-2);
}

.fvt-note-flag {
	font-family: var(--fv-mono);
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--fv-warn-ink);
	background: #fff1d6;
	border-radius: var(--fv-radius-full);
	padding: 2px 7px;
}

.fvt-when {
	margin-left: auto;
	font-size: 12px;
	color: var(--fv-ink-3);
	white-space: nowrap;
}

.fvt-msg-body {
	font-size: 14px;
	line-height: 1.65;
	color: var(--fv-ink);
	word-break: break-word;
}

.fvt-msg-body p { margin: 0 0 8px; }
.fvt-msg-body p:last-child { margin-bottom: 0; }

/* A status change is the thread narrating itself, not somebody speaking. */
.fvt-event {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	font-size: 11.5px;
	color: var(--fv-ink-3);
}

.fvt-event .fvt-when { margin-left: 0; }

.fvt-files {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: 9px;
}

.fvt-files a { line-height: 0; }

.fvt-files img {
	width: 84px;
	height: 84px;
	object-fit: cover;
	border-radius: var(--fv-radius-md);
	border: 1px solid var(--fv-line);
	display: block;
}

/* ── forms ───────────────────────────────────────────────────────── */

.fvt-card {
	background: var(--fv-cream);
	border-radius: var(--fv-radius-lg);
	box-shadow: var(--fv-shadow-sm);
	padding: 16px;
	margin-top: 14px;
}

.fvt-field { margin-bottom: 14px; }
.fvt-field:last-of-type { margin-bottom: 0; }

.fvt-field > label {
	display: block;
	margin-bottom: 6px;
	font-size: 12.5px;
	font-weight: 700;
	color: var(--fv-ink);
}

.fvt-optional {
	font-weight: 500;
	color: var(--fv-ink-3);
	text-transform: lowercase;
}

.woocommerce-account .fvt-field input[type="text"],
.woocommerce-account .fvt-field select,
.woocommerce-account .fvt-field textarea {
	width: 100%;
	padding: 10px 12px;
	background: var(--fv-surface);
	border: 1px solid var(--fv-line);
	border-radius: var(--fv-radius-md);
	font-family: inherit;
	font-size: 14px;
	color: var(--fv-ink);
	box-sizing: border-box;
}

.woocommerce-account .fvt-field select { height: 42px; padding: 0 12px; }

.woocommerce-account .fvt-field input[type="text"]:focus,
.woocommerce-account .fvt-field select:focus,
.woocommerce-account .fvt-field textarea:focus {
	border-color: var(--fv-accent);
	outline: none;
}

.fvt-field input[type="file"] {
	font-size: 12.5px;
	color: var(--fv-ink-2);
}

.fvt-note {
	margin: 6px 0 0;
	font-size: 12px;
	color: var(--fv-ink-3);
}

.fvt-actions {
	margin-top: 16px;
}

.woocommerce-account .fvt-actions .fv-acc-cta { margin-top: 0; }

.fvt-reply-foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
	margin-top: 12px;
}

.woocommerce-account .fvt-reply-foot .fv-acc-cta { margin-top: 0; }

.fvt-closed-note {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
	padding: 14px 16px;
	background: var(--fv-muted);
	border-radius: var(--fv-radius-lg);
	font-size: 13px;
	color: var(--fv-ink-2);
}

.fvt-notice {
	padding: 10px 14px;
	border-radius: var(--fv-radius-md);
	font-size: 13px;
	margin: 12px 0 0;
}

.fvt-notice.is-ok {
	background: #e8f6ee;
	color: #0f7a45;
}

.fvt-notice.is-error {
	background: #fff0f1;
	color: var(--fv-hot-ink);
}

/* ── rating ──────────────────────────────────────────────────────── */

.fvt-rate-q {
	margin: 0 0 8px;
	font-size: 13px;
	font-weight: 700;
	color: var(--fv-ink);
}

/*
 * Laid out in reverse in the markup — 5 first — so the sibling combinator can
 * light every star to the left of the hovered one. `row-reverse` puts them
 * back in reading order.
 */
.fvt-stars {
	display: inline-flex;
	flex-direction: row-reverse;
	justify-content: flex-end;
	gap: 3px;
	font-size: 28px;
	line-height: 1;
	margin-bottom: 12px;
}

.fvt-stars input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
}

.fvt-stars label {
	color: var(--fv-ink-soft);
	cursor: pointer;
	transition: color 0.12s ease;
}

.fvt-stars label:hover,
.fvt-stars label:hover ~ label,
.fvt-stars input:checked ~ label { color: var(--fv-warn); }

.fvt-stars input:focus-visible + label {
	outline: 2px solid var(--fv-accent);
	outline-offset: 2px;
}

.fvt-rated {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	color: var(--fv-ink-2);
}

.fvt-stars-shown {
	color: var(--fv-warn);
	font-size: 16px;
	letter-spacing: 1px;
}

@media (max-width: 600px) {
	.fvt-row-link { align-items: flex-start; flex-direction: column; gap: 8px; }
	.fvt-bubble { max-width: 94%; }
	.fvt-facts { gap: 6px 12px; }
}

/* ══ staff screens ═══════════════════════════════════════════════ */

/*
 * These keep WordPress's palette rather than the storefront's. The screen
 * belongs to wp-admin and sits beside Orders and Products all day; a cream
 * support page in the middle of that would look like a different product.
 *
 * What was wrong before: the thread and the sidebar were dropped into `.card`
 * elements with no width control, so the reply box ran the full width of a
 * 1900px monitor while the sidebar floated somewhere near it, and the queue's
 * filters wrapped into three ragged lines. The layout below is an explicit
 * two-column grid with a measure on the conversation.
 */

.fvt-admin {
	--fvt-a-line: #dcdcde;
	--fvt-a-ink: #1d2327;
	--fvt-a-ink-2: #50575e;
	--fvt-a-bg: #f6f7f7;
	--fvt-a-accent: #2271b1;
}

.fvt-admin .wp-heading-inline { margin-right: 8px; }

/* ── toolbar ─────────────────────────────────────────────────────── */

.fvt-admin .subsubsub {
	margin: 8px 0 6px;
	float: none;
}

/* (toolbar styling lives at the foot of this file) */

.fvt-admin-search label {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: 13px;
	color: var(--fvt-a-ink-2);
	white-space: nowrap;
}

.fvt-admin-search input[type="search"] {
	flex: 1 1 260px;
	min-width: 180px;
}

.fvt-admin-search .fvt-sep {
	width: 1px;
	height: 22px;
	background: var(--fvt-a-line);
}

/* ── queue table ─────────────────────────────────────────────────── */

.fvt-admin .wp-list-table th,
.fvt-admin .wp-list-table td { vertical-align: middle; }

.fvt-admin .wp-list-table td { padding-top: 12px; padding-bottom: 12px; }

.fvt-admin .column-ref { width: 104px; }

.fvt-t-subject {
	font-size: 14px;
	line-height: 1.45;
	font-weight: 600;
	display: block;
}

.fvt-t-sub {
	color: var(--fvt-a-ink-2);
	font-size: 12.5px;
	line-height: 1.5;
	margin-top: 2px;
	display: block;
}

.fvt-t-customer { font-weight: 600; }

.fvt-t-phone {
	font-family: ui-monospace, Menlo, Consolas, monospace;
	font-size: 12.5px;
	color: var(--fvt-a-ink-2);
}

tr.fvt-unread td { background: #f0f6fc; }

tr.fvt-unread td:first-child { box-shadow: inset 3px 0 0 var(--fvt-a-accent); }

/* ── status + flag chips ─────────────────────────────────────────── */

.fvt-chip {
	display: inline-block;
	padding: 3px 9px;
	border-radius: 2px;
	font-size: 12px;
	font-weight: 600;
	line-height: 18px;
	white-space: nowrap;
}

.fvt-chip.is-new      { background: #fcf0e4; color: #8a4b00; }
.fvt-chip.is-open     { background: #e5f0fa; color: #0a4b78; }
.fvt-chip.is-waiting  { background: #fcf9e8; color: #7a5b00; }
.fvt-chip.is-resolved { background: #edfaef; color: #0a5c2b; }
.fvt-chip.is-hold     { background: #efeaf6; color: #4b3b78; }
.fvt-chip.is-closed   { background: #f0f0f1; color: #50575e; }

.fvt-urgent,
.fvt-late {
	display: inline-block;
	margin-left: 4px;
	padding: 1px 6px;
	border-radius: 2px;
	font-size: 11.5px;
	font-weight: 700;
	white-space: nowrap;
}

.fvt-urgent { background: #fcf0f1; color: #8a2424; }
.fvt-late   { background: #d63638; color: #fff; }

/* ── ticket screen ───────────────────────────────────────────────── */

.fvt-admin-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 300px;
	gap: 18px;
	align-items: start;
	margin-top: 14px;
}

@media (max-width: 1100px) {
	.fvt-admin-grid { grid-template-columns: minmax(0, 1fr); }
}

.fvt-panel {
	background: #fff;
	border: 1px solid var(--fvt-a-line);
	border-radius: 4px;
}

.fvt-panel + .fvt-panel { margin-top: 14px; }

.fvt-panel-head {
	padding: 10px 14px;
	border-bottom: 1px solid var(--fvt-a-line);
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--fvt-a-ink-2);
}

.fvt-panel-body { padding: 14px; }

/*
 * A conversation needs a measure. Without one the replies stretch to whatever
 * the monitor is, and a two-line message becomes one very long line that is
 * genuinely hard to read.
 */
.fvt-admin .fvt-thread {
	max-width: 760px;
	margin: 0;
	padding: 14px;
	gap: 10px;
}

.fvt-admin .fvt-bubble {
	max-width: 100%;
	border-radius: 4px;
	border-color: var(--fvt-a-line);
	background: #fff;
}

.fvt-admin .fvt-msg.is-customer .fvt-bubble {
	background: #f0f6fc;
	border-color: #c5d9ed;
}

.fvt-admin .fvt-msg.is-staff .fvt-bubble { background: #f6f7f7; }

.fvt-admin .fvt-msg.is-note .fvt-bubble {
	background: #fcf9e8;
	border-color: #dba617;
	border-left-width: 3px;
}

.fvt-admin .fvt-msg-body { font-size: 14px; line-height: 1.7; }
.fvt-admin .fvt-author { color: var(--fvt-a-ink); }
.fvt-admin .fvt-event { font-size: 12px; color: var(--fvt-a-ink-2); }

.fvt-admin .fvt-note-flag {
	background: #dba617;
	color: #fff;
	border-radius: 2px;
}

/* ── reply box ───────────────────────────────────────────────────── */

.fvt-admin-reply { padding: 14px; border-top: 1px solid var(--fvt-a-line); }

.fvt-canned {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
	margin: 0 0 10px;
}

.fvt-canned label {
	font-size: 12px;
	font-weight: 600;
	color: var(--fvt-a-ink-2);
}

/* The group is the coarser choice, so it takes the narrower field. */
.fvt-canned #fvt-canned-group { flex: 0 0 170px; }
.fvt-canned #fvt-canned { flex: 1 1 260px; min-width: 0; max-width: 380px; }

@media (max-width: 782px) {
	.fvt-canned { align-items: stretch; flex-direction: column; }
	.fvt-canned #fvt-canned-group,
	.fvt-canned #fvt-canned { flex: 0 0 auto; max-width: none; }
}

.fvt-admin-reply textarea {
	width: 100%;
	box-sizing: border-box;
	font-size: 14px;
	line-height: 1.7;
}

.fvt-reply-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	flex-wrap: wrap;
	margin-top: 10px;
}

.fvt-internal-toggle {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 5px 10px;
	border: 1px solid #dba617;
	border-radius: 3px;
	background: #fffdf5;
	font-size: 12.5px;
	color: #7a5b00;
	cursor: pointer;
}

/* ── sidebar ─────────────────────────────────────────────────────── */

.fvt-side-field { margin-bottom: 12px; }
.fvt-side-field:last-child { margin-bottom: 0; }

.fvt-side-field label {
	display: block;
	margin-bottom: 4px;
	font-size: 11.5px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--fvt-a-ink-2);
}

.fvt-side-field select { width: 100%; }

.fvt-kv {
	display: flex;
	justify-content: space-between;
	gap: 10px;
	padding: 5px 0;
	font-size: 13px;
	border-bottom: 1px solid #f0f0f1;
}

.fvt-kv:last-child { border-bottom: 0; }
.fvt-kv dt { color: var(--fvt-a-ink-2); margin: 0; }
.fvt-kv dd { margin: 0; text-align: right; font-weight: 600; }

.fvt-orders { margin: 0; padding: 0; list-style: none; }

.fvt-orders li {
	padding: 6px 0;
	border-bottom: 1px solid #f0f0f1;
	font-size: 12.5px;
}

.fvt-orders li:last-child { border-bottom: 0; }

.fvt-rating-shown { font-size: 15px; color: #dba617; letter-spacing: 1px; margin: 0; }

/* ── settings ────────────────────────────────────────────────────── */

.fvt-replies { max-width: 760px; }

.fvt-reply-row {
	border: 1px solid var(--fvt-a-line);
	border-radius: 4px;
	padding: 12px;
	background: #fff;
	margin: 0 0 10px;
}

.fvt-reply-row input[type="text"] { margin-bottom: 8px; font-weight: 600; }
.fvt-reply-row textarea { width: 100%; box-sizing: border-box; }

/* ── beating Storefront's link underline ─────────────────────────── */

/*
 * Storefront's own stylesheet carries `.hentry .entry-content a
 * { text-decoration: underline }` at specificity (0,2,1). A single-class rule
 * here loses to it, which is why every part of a ticket row — subject,
 * reference, category, timestamp, even the status pill — came out underlined
 * while `.fvt-row-link { text-decoration: none }` sat in this file doing
 * nothing.
 *
 * The selectors below are (0,3,1) so they win outright rather than depending
 * on which sheet happens to load last. This is the same cascade trap the
 * cart and checkout hit; on this theme, assume any single-class rule aimed at
 * a link inside the content area will lose.
 */
.fvt .fvt-list a.fvt-row-link,
.fvt .fvt-list a.fvt-row-link:hover,
.fvt .fvt-facts a,
.fvt .fvt-files a,
.fvt .fvt-closed-note a {
	text-decoration: none;
}

.fvt .fvt-facts a:hover {
	text-decoration: underline;
}

/* The row's own text must not inherit the underline either. */
.fvt .fvt-list a.fvt-row-link .fvt-subject,
.fvt .fvt-list a.fvt-row-link .fvt-ref,
.fvt .fvt-list a.fvt-row-link .fvt-row-meta,
.fvt .fvt-list a.fvt-row-link .fv-pill {
	text-decoration: none;
}

/* ── queue tabs ──────────────────────────────────────────────────── */

/*
 * Quiet by default.
 *
 * This was two rows of thirteen tabs, each carrying a filled grey bubble —
 * thirteen pills on a screen whose only job is to show which ticket to open
 * next, and most of them reading "0". Counts are plain text now, in the same
 * muted grey WordPress uses for its own counts, and only a number that means
 * somebody is waiting on an answer is coloured.
 */

.fvt-views {
	margin: 8px 0 10px;
	float: none;
	white-space: normal;
}

.fvt-n {
	color: #646970;
	font-variant-numeric: tabular-nums;
}

.subsubsub a.current .fvt-n {
	color: #2c3338;
}

/* The only loud number on the screen, and only when it is not zero. */
.fvt-n.is-hot {
	color: #b32d2e;
	font-weight: 700;
}

/* ── toolbar ─────────────────────────────────────────────────────── */

/*
 * No border and no panel. It sat in a bordered white box directly above a
 * bordered white table, which drew a frame around a frame for no reason.
 */
.fvt-admin-search {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
	margin: 0 0 12px;
	padding: 0;
	background: none;
	border: 0;
}

.fvt-admin-search label {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	color: #50575e;
	white-space: nowrap;
}

.fvt-admin-search input[type="search"] {
	flex: 1 1 280px;
	min-width: 200px;
	max-width: 420px;
}

.fvt-admin-search .fvt-sep {
	width: 1px;
	height: 20px;
	background: #dcdcde;
}


/* A quiet break between "needs doing" and "done". */
.fvt-divider {
	display: inline-block;
	width: 1px;
	height: 12px;
	margin: 0 10px 0 2px;
	background: #c3c4c7;
	vertical-align: -1px;
}

.fvt-done-tab a { color: #646970; }
.fvt-done-tab a:hover { color: #2271b1; }

/* ── new ticket screen ───────────────────────────────────────────── */

/*
 * The same shape as the ticket screen, deliberately.
 *
 * This screen used to cap both of its columns at `minmax(0, 720px) 380px` and
 * pin them left, on the reasoning that a subject line stretched across a wide
 * monitor is harder to read back than one at a sensible measure. The measure
 * argument is real, but the price was not: 720 + 18 + 380 is 1118px, so on a
 * 1718px work area it left roughly 600px of empty page, and it made this the
 * only screen in the desk that did not fill the window. Two screens that
 * behave differently for no visible reason look broken, and this one was the
 * odd one out.
 *
 * The long free-text fields keep their measure instead, which is where the
 * original concern actually applied.
 */
.fvt-new { grid-template-columns: minmax(0, 1fr) 380px; }


@media (max-width: 1120px) {
	.fvt-new { grid-template-columns: minmax(0, 1fr); }
}

.fvt-form-row { margin-bottom: 16px; }
.fvt-form-row:last-child { margin-bottom: 0; }

.fvt-form-row > label {
	display: block;
	margin-bottom: 5px;
	font-size: 13px;
	font-weight: 600;
	color: #1d2327;
}

.fvt-form-row select { width: 100%; max-width: 100%; }
.fvt-form-row textarea { width: 100%; box-sizing: border-box; line-height: 1.6; }
.fvt-form-row .description { margin: 5px 0 0; }

/* Category, channel and priority belong together and were three unlabelled
   selects jammed into one table cell. */
.fvt-form-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 14px;
}

/* Came in by + Priority, once the category took its own row. */
.fvt-form-grid.is-two { grid-template-columns: repeat(2, minmax(0, 1fr)); }

@media (max-width: 782px) {
	.fvt-form-grid { grid-template-columns: minmax(0, 1fr); }
}

.fvt-panel-foot {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
	padding: 12px 14px;
	border-top: 1px solid #dcdcde;
	background: #f6f7f7;
}

.fvt-hint-block {
	margin: 0 0 16px;
	padding: 10px 12px;
	background: #f0f6fc;
	border-left: 3px solid #2271b1;
	font-size: 13px;
	color: #1d2327;
}

.fvt-lookup { margin-bottom: 12px; }

.fvt-lookup-field {
	display: flex;
	gap: 6px;
}

.fvt-lookup-field input[type="text"] {
	flex: 1 1 auto;
	min-width: 0;
}

.fvt-cust-found,
.fvt-cust-new {
	padding: 10px 12px;
	border-radius: 3px;
	margin-bottom: 12px;
}

.fvt-cust-found { background: #edfaef; }
.fvt-cust-new { background: #fcf9e8; }

.fvt-cust-name { margin: 8px 0 2px; font-size: 14px; }
.fvt-cust-found p:last-child,
.fvt-cust-new p:last-child { margin-bottom: 0; }

/*
 * The duplicate warning. Loud on purpose: the cost of missing it is three
 * tickets about one parcel and three different promises.
 */
.fvt-dup {
	padding: 10px 12px;
	margin-bottom: 12px;
	background: #fcf0f1;
	border-left: 3px solid #d63638;
	font-size: 13px;
}

.fvt-dup ul { margin: 8px 0 6px; padding-left: 16px; }
.fvt-dup li { margin-bottom: 4px; }
.fvt-dup .description { margin: 0; }

.fvt-admin-side h4 {
	margin: 14px 0 6px;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: #50575e;
}

/* ── new ticket, step one ────────────────────────────────────────── */

/*
 * Narrow on purpose. One question, one field — a full-width panel for a phone
 * number reads as an unfinished form rather than a deliberate first step.
 */
.fvt-step1 {
	max-width: 520px;
	margin-top: 16px;
}

.fvt-step1 .fvt-lookup-field input[type="text"] {
	font-size: 16px;
	height: 38px;
	font-family: ui-monospace, Menlo, Consolas, monospace;
	letter-spacing: 0.04em;
}

.fvt-step1 .fvt-lookup-field .button { height: 38px; }

/* ── reply templates in settings ─────────────────────────────────── */

.fvt-reply-head {
	display: flex;
	gap: 8px;
	margin-bottom: 8px;
}

.fvt-reply-group {
	flex: 0 0 180px;
	font-size: 12px;
}

.fvt-reply-title {
	flex: 1 1 auto;
	min-width: 0;
	font-weight: 600;
}

@media (max-width: 782px) {
	.fvt-reply-head { flex-direction: column; }
	.fvt-reply-group { flex: 1 1 auto; }
}

/* ── two-field category picker ───────────────────────────────────── */

/*
 * Two equal halves, on the same grid as the row beneath.
 *
 * The area used to be pinned at `flex: 0 1 190px` on the reasoning that it is
 * the coarser choice, which left the reason to absorb everything else: a
 * 190/488 split on a wide screen, sitting directly above a "Came in by" /
 * "Priority" row that divides the identical width evenly. Two fields that
 * nearly line up read as a mistake, so these now use the same two-column
 * grid and the same 14px gutter, and the four selects share two edges all
 * the way down the form.
 *
 * Grid also removes the old hazard this block used to warn about: a
 * `flex-basis` is measured along the main axis, so those pixel bases turned
 * into *heights* the moment the container became a column on a phone.
 */
.fvt-cat-fields {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px;
	align-items: center;
}

.fvt-cat-field { min-width: 0; }
.fvt-cat-field select { width: 100%; }

@media (max-width: 600px) {
	.fvt-cat-fields { grid-template-columns: minmax(0, 1fr); }
}

.woocommerce-account .fvt-cat-fields select {
	height: 42px;
	padding: 0 12px;
	background: var(--fv-surface);
	border: 1px solid var(--fv-line);
	border-radius: var(--fv-radius-md);
	font-size: 14px;
	color: var(--fv-ink);
	box-sizing: border-box;
}

/* ══ staff queue: responsive columns ═════════════════════════════ */

/*
 * `.wp-list-table.fixed` gives a column exactly the width it asks for and
 * takes the remainder from the ones that ask for nothing. Five fixed columns
 * totalling 774px therefore squeezed **Ticket** — the only column anybody
 * actually reads — to 0px at 820px and 58px on a phone, while Assigned and
 * Waiting kept their full width. Widths belong here, where they can respond.
 */

.fvt-admin .fvt-c-ref      { width: 104px; }
.fvt-admin .fvt-c-customer { width: 190px; }
.fvt-admin .fvt-c-status   { width: 126px; }
.fvt-admin .fvt-c-assigned { width: 140px; }
.fvt-admin .fvt-c-when     { width: 124px; }
/* Ticket is deliberately unsized: it takes whatever is left. */

.fvt-admin .fvt-c-customer .fvt-t-customer,
.fvt-admin .fvt-c-customer .fvt-t-phone { display: block; }

/*
 * Narrow the fixed columns in steps as the window shrinks, so the subject
 * keeps a readable measure instead of paying for all of them. Measured at
 * 1024px, the old single breakpoint left Ticket 196px wide and every subject
 * wrapped to four lines while Status and Last activity kept full width.
 * Widths here are content-box — `.widefat` adds 8px of padding each side.
 */
@media (max-width: 1300px) {
	.fvt-admin .fvt-c-ref      { width: 84px; }
	.fvt-admin .fvt-c-customer { width: 160px; }
	.fvt-admin .fvt-c-status   { width: 110px; }
	.fvt-admin .fvt-c-assigned { width: 96px; }
	.fvt-admin .fvt-c-when     { width: 100px; }
}

/* Who owns it is answered by the Mine and Unassigned tabs as well. */
@media (max-width: 1100px) {
	.fvt-admin .fvt-c-assigned { display: none; }
}

@media (max-width: 900px) {
	.fvt-admin .fvt-c-ref      { width: 72px; }
	.fvt-admin .fvt-c-customer { width: 130px; }
	.fvt-admin .fvt-c-status   { width: 104px; }
	.fvt-admin .fvt-c-when     { width: 84px; }
}

/*
 * The longest status, "Waiting on customer", is wider than the column once
 * the fixed widths tighten, and a `nowrap` chip does not clip — it simply
 * draws over the next cell. In the table it is allowed to run to two lines;
 * everywhere else the chip stays on one.
 */
@media (max-width: 1300px) {
	.fvt-admin .fvt-c-status .fvt-chip {
		white-space: normal;
		line-height: 1.35;
	}
}

/* A long order reference or URL must not push the table wider than the page. */
.fvt-admin .fvt-c-ticket,
.fvt-admin .fvt-c-customer { overflow-wrap: break-word; }

/* ── phones: the table becomes a list of cards ───────────────── */

/*
 * A six-column table on a 390px screen is not a table, it is a puzzle. Each
 * row becomes a card instead: reference and status on one line, then the
 * subject, then the rest as labelled pairs.
 *
 * This has to opt out of core's own mobile list-table treatment first.
 * `list-tables.css` turns every row into a flex container and absolutely
 * positions a `data-colname` label at `left: 10px`, but it only pads the
 * cells that *follow* a `.column-primary` — a class these rows do not carry,
 * because the queue wants every field visible rather than collapsed behind a
 * toggle. The labels therefore landed on top of the values.
 *
 * Core's selectors run to (0,4,3), so every rule here repeats the same long
 * prefix to outrank them. That makes the per-column rules tie with the reset
 * above them at (0,5,2), which is deliberate: they are ordered after it and
 * win on source order. Keep them together and keep them in this order.
 */
@media (max-width: 782px) {
	.fvt-admin .wp-list-table tr:not(.inline-edit-row):not(.no-items) td:not(.check-column)::before {
		position: static;
		display: none;
		width: auto;
		content: none;
	}

	.fvt-admin .wp-list-table,
	.fvt-admin .wp-list-table tbody { display: block; width: auto; }

	.fvt-admin .wp-list-table thead { display: none; }

	.fvt-admin .wp-list-table tr:not(.inline-edit-row):not(.no-items) {
		display: flex;
		flex-wrap: wrap;
		align-items: baseline;
		border: 1px solid #dcdcde;
		border-radius: 4px;
		background: #fff;
		margin: 0 0 10px;
		padding: 12px 14px;
	}

	.fvt-admin .wp-list-table tr.fvt-unread { box-shadow: inset 3px 0 0 #2271b1; }
	.fvt-admin .wp-list-table tr.fvt-unread td { background: none; }

	/* Default: every field gets its own full-width line, in column order. */
	.fvt-admin .wp-list-table tr:not(.inline-edit-row):not(.no-items) td:not(.check-column) {
		position: static;
		display: block;
		flex: 0 0 100%;
		width: auto;
		padding: 2px 0;
		border: 0;
	}

	/* Reference and status pair up on the top line, status pushed right. */
	.fvt-admin .wp-list-table tr:not(.inline-edit-row):not(.no-items) td.fvt-c-ref {
		flex: 0 0 auto;
		order: 1;
		margin-right: 10px;
	}

	.fvt-admin .wp-list-table tr:not(.inline-edit-row):not(.no-items) td.fvt-c-status {
		flex: 0 0 auto;
		order: 2;
		margin-left: auto;
	}

	.fvt-admin .wp-list-table tr:not(.inline-edit-row):not(.no-items) td.fvt-c-ticket {
		order: 3;
		padding-top: 2px;
	}

	.fvt-admin .wp-list-table tr:not(.inline-edit-row):not(.no-items) td.fvt-c-customer { order: 4; }
	.fvt-admin .wp-list-table tr:not(.inline-edit-row):not(.no-items) td.fvt-c-when { order: 5; }

	/* Who owns it is a desk question, not a phone one. */
	.fvt-admin .wp-list-table tr:not(.inline-edit-row):not(.no-items) td.fvt-c-assigned { display: none; }

	/* The remaining fields name themselves, since the header row is gone. */
	.fvt-admin .wp-list-table tr:not(.inline-edit-row):not(.no-items) td.fvt-c-customer::before,
	.fvt-admin .wp-list-table tr:not(.inline-edit-row):not(.no-items) td.fvt-c-when::before {
		display: inline;
		content: attr(data-colname) ": ";
		font-weight: 600;
		color: #646970;
	}

	.fvt-admin .fvt-c-customer .fvt-t-customer,
	.fvt-admin .fvt-c-customer .fvt-t-phone { display: inline; }

	.fvt-admin .fvt-c-customer .fvt-t-phone::before { content: " · "; }

	.fvt-admin .fvt-empty-row td {
		flex: 0 0 100%;
		text-align: center;
		color: #646970;
		padding: 18px 0;
	}
}

/* ══ comfort ═════════════════════════════════════════════════════ */

/*
 * Bigger hit areas on the filter row. The links were 19px tall, which is a
 * small thing to aim at with a mouse all day and a genuinely awkward one with
 * a thumb.
 */
.fvt-views li > a {
	display: inline-block;
	padding: 5px 2px;
	line-height: 1.4;
}

.fvt-admin .fvt-panel-body { padding: 16px; }

/* Room to breathe in the conversation. */
.fvt-admin .fvt-thread { padding: 16px; gap: 12px; }
.fvt-admin .fvt-bubble { padding: 12px 14px; }

.fvt-admin .fvt-kv { padding: 7px 0; font-size: 13.5px; }

@media (max-width: 782px) {
	.fvt-admin .fvt-thread { padding: 12px; }
	.fvt-admin-search { gap: 8px; }
	.fvt-admin-search .fvt-sep { display: none; }
	.fvt-admin-search label { width: 100%; }
	.fvt-admin-search select { flex: 1 1 auto; }
}

/*
 * Phone tap targets.
 *
 * In the stacked card layout the reference and the subject are the two things
 * anyone actually taps, and as bare inline links they were 14px and 20px tall
 * — under half the ~44px a thumb needs. They get real height here rather than
 * a larger font, because the type sizes are already right.
 */
.fvt-admin .fvt-c-ref a,
.fvt-admin .fvt-t-subject,
.fvt-admin .fvt-cust-found a,
.fvt-admin .fvt-dup li a,
.fvt-admin .fvt-orders a {
	display: inline-block;
	padding: 6px 0;
	line-height: 1.4;
}

@media (max-width: 782px) {
	.fvt-admin .fvt-t-subject { display: block; }
}

/* ══ the single ticket's header ═══════════════════════════ */

/*
 * `.fv-acc-head` is the theme's account header: title left, action right, on
 * one row that does not wrap. That holds everywhere it is used, because the
 * titles there are short and written by the shop.
 *
 * A ticket's title is written by the customer. "Parcel marked delivered but
 * nothing arrived at the gate yesterday" took three lines on a 390px screen
 * and left the button 65px wide — so "All tickets" wrapped onto two lines
 * inside a control fixed at 30px tall, and spilled out of it.
 */
.fvt-single-head {
	align-items: center;
}

/*
 * The title gives way; the button does not.
 *
 * `min-width: 0` lets the heading shrink below its longest line so its text
 * wraps instead of pushing the button out of shape — a flex item will not go
 * under its content width otherwise. On the button, `flex: 0 0 auto` stops it
 * being squeezed and `white-space: nowrap` stops the label breaking. Either
 * one alone leaves the other failure available.
 */
.fvt-single-head h1 {
	min-width: 0;
}

.woocommerce-account .fvt-single-head .fvt-back {
	flex: 0 0 auto;
	white-space: nowrap;
}

/*
 * On a phone it stops being a button beside a title and becomes a way back.
 *
 * Left where it was, it dropped onto a row of its own and sat against the
 * right edge with nothing around it — a small outlined box floating in white
 * space, which reads as something left over rather than something to press.
 *
 * Above the title and to the left, with an arrow, it is the back control the
 * page actually needs: the one place the eye looks first on a detail screen,
 * and the direction of travel is in the shape rather than only in the words.
 * The box stays, because a 34px target is easier to hit than bare text.
 */
@media (max-width: 600px) {
	.fvt-single-head {
		flex-wrap: wrap;
	}

	.fvt-single-head h1 {
		flex: 1 1 100%;
	}

	.woocommerce-account .fvt-single-head .fvt-back {
		order: -1;
		height: 34px;
		padding: 0 12px 0 10px;
		gap: 6px;
		margin: 0 auto 2px 0;
	}

	/*
	 * Decorative: the label already says where it goes, so this is not
	 * announced — it only gives the direction at a glance.
	 */
	.woocommerce-account .fvt-single-head .fvt-back::before {
		content: "\2190";
		font-size: 15px;
		line-height: 1;
	}
}