/*
 * Modern / rounded / minimalist styling for the public sections table.
 * Breaks the wrapper out of the theme's boxed ".site-main" content width
 * (see hello-elementor theme.css, which caps non-Elementor pages at 1140px)
 * so the table can use the full viewport width, with a small side gutter.
 */

/* :root design tokens (--evq-radius/--evq-border/--evq-text/--evq-muted/
   --evq-accent/--evq-row-hover/--evq-bg/--evq-tag-*) now live in the shared
   evq-sections-theme.css, loaded as a dependency of this stylesheet — see that
   file for the light/dark values. */

/* Overridden by .evq-sections-layout .evq-sections-table-wrap in
   section-details.css: on the public table page this wrap now sits inside
   that flex layout (details sidebar + table) instead of being the full-bleed
   element itself — .evq-sections-layout does the viewport breakout there, and
   this rule only still applies as-is on its own for any page that doesn't
   wrap it in that layout. */
.evq-sections-table-wrap {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	padding: 0 24px 24px;
	box-sizing: border-box;
}

/* DataTables 2.x renamed every one of its own classes from the 1.x names
   (dataTables_wrapper/_length/_filter/_info/_paginate, .paginate_button) to a
   "dt-" prefixed set (dt-container/dt-length/dt-search/dt-info/dt-paging,
   .dt-paging-button) — this file used to target the old names throughout,
   which matched nothing at all in this version (confirmed against the
   vendor/datatables/dataTables.min.js actually shipped here), hence the
   length/info/paging controls rendering with no styling whatsoever. */
.evq-sections-table-wrap .dt-container {
	width: 100%;
}

.evq-sections-table-card {
	background: var( --evq-bg );
	border: 1px solid var( --evq-border );
	border-radius: var( --evq-radius );
	/* Plain CSS horizontal scroll for narrow viewports — deliberately not
	   DataTables' scrollX, which recalculates column widths via JS on every
	   resize/reflow (see public-table.js for why that was causing problems). */
	overflow-x: auto;
	/* Pairs with the inline opacity:0 in public-table.php (hides the raw,
	   un-paginated table until DataTables' initComplete reveals it) — this is
	   just the fade, not the hiding itself, so it stays here rather than in
	   that inline <style> block. */
	transition: opacity 150ms ease;
}

.evq-sections-table-card .dt-container {
	padding: 4px 16px 16px;
}

/* --- Loading skeleton ---
   #evq-sections-loading-wrap is the element public-table.php height-clamps
   inline (max-height + overflow:hidden) until DataTables' initComplete —
   this transition is what makes lifting that clamp (max-height:none) read as
   a smooth grow instead of a snap, matching .evq-sections-table-card's own
   opacity fade for the same reveal. */
.evq-sections-loading-wrap {
	transition: max-height 200ms ease;
}

.evq-sections-table-skeleton {
	background: var( --evq-bg );
	border: 1px solid var( --evq-border );
	border-radius: var( --evq-radius );
	padding: 14px 16px;
	box-sizing: border-box;
}

/* padding: 12px 0 + a 20px block + the 1px border-bottom below sum to the
   same ~45px row height as a real .evq-sections-table td (12px vertical
   padding + one line of 14px/1.4 text + its own 1px border-bottom) — the
   header row matches too (no separate, shorter padding), same as the real
   table's thead th sharing that identical box model with its td. */
.evq-skeleton-header,
.evq-skeleton-row {
	display: flex;
	gap: 14px;
	padding: 12px 0;
	border-bottom: 1px solid var( --evq-border );
}

.evq-skeleton-row:last-child {
	border-bottom: none;
}

/* A flat token swap for "a shade darker" doesn't work here: --evq-border is
   darker than --evq-bg-subtle in light mode but *lighter* than it in dark
   mode (each is tuned relative to its own theme's background, not to each
   other), so picking either existing token as the base would darken light
   mode and lighten dark mode. Mixing a small amount of black in instead
   darkens relative to whichever value --evq-bg-subtle already resolves to,
   consistently in both themes. Plain var(--evq-bg-subtle) fallback declared
   first for browsers without color-mix() support — same graceful-degradation
   pattern as tr.evq-related-row.evq-related-row-alt's background above. */
.evq-skeleton-block {
	height: 20px;
	border-radius: 4px;
	background: var( --evq-bg-subtle );
	background: color-mix( in srgb, var( --evq-bg-subtle ), black 8% );
}

/* Header row reads as static column labels, not loading content — no shimmer. */
.evq-skeleton-header .evq-skeleton-block {
	opacity: 0.7;
}

.evq-skeleton-row .evq-skeleton-block {
	background-image: linear-gradient( 90deg, color-mix( in srgb, var( --evq-bg-subtle ), black 8% ) 25%, var( --evq-border ) 37%, color-mix( in srgb, var( --evq-bg-subtle ), black 8% ) 63% );
	background-size: 400% 100%;
	animation: evq-skeleton-shimmer 1.4s ease infinite;
}

@keyframes evq-skeleton-shimmer {
	0% { background-position: 100% 50%; }
	100% { background-position: 0 50%; }
}

@media ( prefers-reduced-motion: reduce ) {
	.evq-skeleton-row .evq-skeleton-block {
		animation: none;
		background-image: none;
	}
}

/* DataTables' own stylesheet forces width:100% on table.dataTable, which would
   squeeze a wide, nowrap, 25-column table instead of letting it overflow into
   the card's horizontal scrollbar. Let it size to its natural content width. */
.evq-sections-table-card table.dataTable {
	width: auto !important;
	min-width: 100%;
}

/* --- Base table --- */

.evq-sections-table {
	font-size: 14px;
	line-height: 1.4;
	white-space: nowrap;
	border-collapse: separate !important;
	border-spacing: 0;
	color: var( --evq-text );
}

.evq-sections-table th,
.evq-sections-table td {
	padding: 12px 14px;
	border-bottom: 1px solid var( --evq-border );
}

.evq-sections-table thead th {
	background: var( --evq-bg-subtle );
	color: var( --evq-muted );
	font-weight: 600;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	border-bottom: 1px solid var( --evq-border );
	white-space: nowrap;
}

.evq-sections-table tbody tr {
	transition: background-color 0.12s ease;
}

.evq-sections-table tbody tr:hover {
	background-color: var( --evq-row-hover );
}

.evq-sections-table tbody tr:last-child td {
	border-bottom: none;
}

/* Description column: kept narrow, truncated, full text available via the
   shared tooltip core (data-evq-tip, set in public-table.php) instead of the
   native title attribute — same hover-delay/pin behaviour as every other
   tooltip on the page, and readable text instead of the browser's own
   unstyled title bubble. */
.evq-sections-table th.evq-col-description,
.evq-sections-table td.evq-col-description {
	max-width: 240px;
	width: 240px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	cursor: help;
}

/* Région touristique: down from a full region name (worst case 27 characters,
   "Baie-James et Eeyou Istchee") to a single short pill (.evq-tag-region) —
   the column no longer needs to be wide enough for the name, just the pill. */
.evq-sections-table th.evq-col-region,
.evq-sections-table td.evq-col-region {
	width: 1%;
	white-space: nowrap;
}

/* --- Visitor column controls (public-table.js): drag-resize, drag-reorder,
   and the "Colonnes" show/hide dropdown. Preferences are per-visitor
   (localStorage) and all three reset together via the filter-reset button. --- */

/* Scoped to the resized state on purpose: getBoundingClientRect() always
   reports the border box, while style.width means the *content* box under the
   default content-box sizing, so lockColumnWidths()'s measure-then-set round
   trip needs these to agree. Applying it unconditionally would instead change
   how every explicitly-sized column (description, région) renders before a
   visitor has touched anything — i.e. it would move the default layout, which
   is meant to stay exactly as designed. */
.evq-sections-table.evq-cols-resized th,
.evq-sections-table.evq-cols-resized td {
	box-sizing: border-box;
}

/* Applied only once a visitor actually drags a resize handle (see
   lockColumnWidths()). Until then the table keeps its natural
   content-driven widths — fixed layout is what makes a dragged column
   actually shrink instead of springing back to fit its content.

   The width here is load-bearing, not decoration. Fixed layout only honours
   per-column widths when the table itself has a definite width: left on the
   `auto` the rule above forces (and it forces it with !important, which beats
   an inline style), Chrome keeps the content-derived widths and every <col>
   width is silently ignored — confirmed live, it was why dragging appeared to
   do nothing at all. public-table.js keeps --evq-cols-total-width in sync with
   the sum of the visible column widths; the custom property is what lets a
   normal declaration here win, rather than JS having to fight !important with
   more !important. */
.evq-sections-table-card table.dataTable.evq-cols-resized,
.evq-sections-table.evq-cols-resized {
	table-layout: fixed;
	width: var( --evq-cols-total-width, auto ) !important;
}

/* A narrowed column clips its content rather than wrapping it: rows stay one
   line tall however far a column is dragged in, and the full value stays
   reachable through the hover tooltip public-table.js attaches to any cell it
   finds clipped (the same tooltip engine the description column already uses). */
.evq-sections-table.evq-cols-resized tbody td {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Header labels truncate on their own title span rather than on the <th>:
   clipping the cell itself would also clip the resize grip, which deliberately
   straddles the column boundary and would lose half its hit area — that made
   grabbing the boundary land on the header underneath and sort the table
   instead of resizing it. */
.evq-sections-table.evq-cols-resized thead th .dt-column-title {
	display: block;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Whole-table cursor + selection lock while a resize drag is in progress, so
   the pointer doesn't flicker between col-resize and a text caret as it
   crosses cell content, and the drag doesn't select half the table on its way. */
.evq-sections-table.evq-col-resizing,
.evq-sections-table.evq-col-resizing * {
	cursor: col-resize !important;
	user-select: none;
}

.evq-sections-table thead th {
	position: relative; /* anchor for the resize handle below */
}

/* Straddles the boundary between two columns — that's where a visitor aims,
   and a grip that sat entirely inside its own column would mean half of every
   attempt landing on the neighbour instead. Wide enough (12px) to be catchable
   without careful aiming. */
.evq-col-resize-handle {
	position: absolute;
	top: 0;
	right: -6px;
	width: 12px;
	height: 100%;
	cursor: col-resize;
	z-index: 5;
}

.evq-col-resize-handle:hover,
.evq-col-resize-handle:active {
	background: var( --evq-accent );
	opacity: 0.4;
}

/* "−" on each header: hides that column without opening the Colonnes
   dropdown. Kept out of sight until the header is hovered (or the button is
   focused) so fourteen of them don't turn the header row into a control
   panel. Sits left of DataTables' sort arrow (which owns right:12px) and well
   clear of the resize grip on the boundary, so none of the three overlap.

   Scoped `.evq-sections-table-wrap button.<class>` — the same convention as
   .evq-fill-gap-cta above — because Elementor's global `.elementor-kit-7
   button` pill styling (0,1,1) outranks a bare single class, and would
   otherwise impose its own padding, background and radius on this. The
   explicit resets below exist for the same reason: each is a property that
   global rule sets. */
.evq-sections-table-wrap button.evq-col-hide {
	position: absolute;
	right: 26px;
	top: 50%;
	transform: translateY( -50% );
	display: flex;
	align-items: center;
	justify-content: center;
	width: 16px;
	height: 16px;
	min-width: 0;
	min-height: 0;
	margin: 0;
	padding: 0;
	border: none;
	border-radius: 4px;
	background: var( --evq-bg-subtle );
	color: var( --evq-muted );
	font-size: 0; /* icon-only: keeps an inherited font-size from padding the box out */
	line-height: 1;
	letter-spacing: normal;
	text-transform: none;
	box-shadow: none;
	cursor: pointer;
	opacity: 0;
	pointer-events: none; /* not just invisible — un-clickable while hidden */
	transition: opacity 0.12s ease, color 0.12s ease, background-color 0.12s ease;
	z-index: 6; /* above the resize grip's own layer */
}

.evq-sections-table thead th:hover .evq-col-hide,
.evq-sections-table-wrap button.evq-col-hide:focus-visible {
	opacity: 1;
	pointer-events: auto;
}

.evq-sections-table-wrap button.evq-col-hide:hover {
	background: var( --evq-row-hover );
	color: var( --evq-accent );
}

/* Keyboard users get a real focus ring — the theme's own button focus styles
   are cleared along with the rest of its chrome above. */
.evq-sections-table-wrap button.evq-col-hide:focus-visible {
	outline: 2px solid var( --evq-accent );
	outline-offset: 1px;
}

.evq-sections-table-wrap button.evq-col-hide svg {
	display: block;
	width: 12px;
	height: 12px;
}

/* --- Drag-to-reorder (vendored ColReorder). Its own stylesheet isn't part of
   this DataTables build, so the few classes it toggles are styled here. --- */

/* Headers advertise that they can be picked up — on the label only, never on
   the resize grip beside it, which owns its own col-resize cursor. */
.evq-sections-table thead th .dt-column-title {
	cursor: grab;
}

/* The floating copy of the column that follows the pointer during a drag. */
table.dtcr-cloned {
	position: absolute;
	background: var( --evq-bg );
	opacity: 0.85;
	z-index: 100;
	box-shadow: 0 6px 18px rgba( 0, 0, 0, 0.18 );
	pointer-events: none;
}

/* The gap the dragged column would drop into: a solid bar down the leading
   edge, readable at a glance from across a wide table (the pointer is off
   somewhere else while dragging, so a subtle tint would be missed). */
.evq-sections-table td.dtcr-moving,
.evq-sections-table th.dtcr-moving {
	box-shadow: inset 3px 0 0 var( --evq-accent ), inset -3px 0 0 var( --evq-accent );
	background: var( --evq-row-hover );
}

.evq-sections-table th.dtcr-moving-first,
.evq-sections-table td.dtcr-moving-first {
	box-shadow: inset 3px 0 0 var( --evq-accent );
}

.evq-sections-table th.dtcr-moving-last,
.evq-sections-table td.dtcr-moving-last {
	box-shadow: inset -3px 0 0 var( --evq-accent );
}

/* Suppresses text selection across the table for the duration of a drag. */
body.dtcr-dragging,
body.dtcr-dragging * {
	user-select: none;
	cursor: grabbing !important;
}

/* --- Tags / pills --- */

.evq-tag {
	display: inline-flex;
	align-items: center;
	margin: 2px 4px 2px 0;
	padding: 3px 10px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.6;
	white-space: nowrap;
}

.evq-tag-green   { background: var( --evq-tag-green-bg );   color: var( --evq-tag-green-fg ); }
.evq-tag-red     { background: var( --evq-tag-red-bg );     color: var( --evq-tag-red-fg ); }
.evq-tag-blue    { background: var( --evq-tag-blue-bg );    color: var( --evq-tag-blue-fg ); }
.evq-tag-orange  { background: var( --evq-tag-orange-bg );  color: var( --evq-tag-orange-fg ); }
.evq-tag-amber   { background: var( --evq-tag-amber-bg );   color: var( --evq-tag-amber-fg ); }
.evq-tag-teal    { background: var( --evq-tag-teal-bg );    color: var( --evq-tag-teal-fg ); }

/* A row pinned to the top because its section (or its river group) was clicked
   on the overview map — see showSectionFirst()/showRiverFirst() in
   public-table.js. Marked rather than silently reordered, so it's clear the
   row is at the top because it was picked, not because the table sorted that
   way. */
.evq-sections-table tbody > tr.evq-row-pinned > td {
	background: var( --evq-tag-teal-bg, #e0f7f5 );
	box-shadow: inset 0 1px 0 var( --evq-tag-teal-fg, #0f766e ), inset 0 -1px 0 var( --evq-tag-teal-fg, #0f766e );
}

.evq-sections-table tbody > tr.evq-row-pinned > td:first-child {
	box-shadow: inset 1px 1px 0 var( --evq-tag-teal-fg, #0f766e ), inset 0 -1px 0 var( --evq-tag-teal-fg, #0f766e );
}

.evq-sections-table tbody > tr.evq-row-pinned > td:last-child {
	box-shadow: inset -1px 1px 0 var( --evq-tag-teal-fg, #0f766e ), inset 0 -1px 0 var( --evq-tag-teal-fg, #0f766e );
}
.evq-tag-brown   { background: var( --evq-tag-brown-bg );   color: var( --evq-tag-brown-fg ); }
.evq-tag-neutral { background: var( --evq-tag-neutral-bg ); color: var( --evq-tag-neutral-fg ); }

/* Shown instead of a blank cell for a field the community can help fill in —
   a small "+" icon (the actual prompt lives in its data-evq-tip tooltip, see
   $fill_gap_cta() in public-table.php) rather than always-visible text, so a
   table with many gaps doesn't turn into a wall of sentences. Same size/shape
   as .evq-river-add-btn below, and the same .evq-sections-table-wrap
   ancestor + `button` element scoping (rather than that one's !important
   convention) to outrank Elementor's global `.elementor-kit-7 button`
   pill-button styling — the same treatment every other icon button in
   this table needs. */
.evq-sections-table-wrap button.evq-fill-gap-cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	margin: 0;
	padding: 0;
	border: none;
	border-radius: 999px;
	background: var( --evq-bg-subtle );
	color: var( --evq-muted );
	font-size: 13px;
	font-weight: 700;
	line-height: 1;
	cursor: pointer;
	box-shadow: none;
}

.evq-sections-table-wrap button.evq-fill-gap-cta:hover {
	background: var( --evq-accent );
	color: #fff;
}

/* Région touristique: 21 values, each too distinct to share one of the 8 fixed
   tag colors above without collisions — instead of a per-region hex pair, its
   hue is set inline (--evq-region-hue, see EVQ_Sections_Tags::region_tag()) and
   this rule derives both light/dark bg+fg from it via hsl(), so light/dark
   still come from the same two theme-driven S/L pairs as everything else
   (--evq-region-*-s/-l, evq-sections-theme.css) rather than 21 hardcoded pairs. */
.evq-tag-region {
	background: hsl( var( --evq-region-hue ) var( --evq-region-bg-s, 58% ) var( --evq-region-bg-l, 93% ) );
	color: hsl( var( --evq-region-hue ) var( --evq-region-fg-s, 55% ) var( --evq-region-fg-l, 32% ) );
}

.evq-visit-note-count {
	font-size: 12px;
	color: var( --evq-muted );
	margin-left: 2px;
}

/* --- Filter bar ---
   Lives inside .evq-sections-table-wrap (see public-table.php), not full-
   viewport-width like that wrap itself: this keeps it beside the details
   sidebar instead of spanning above it, so the sidebar's top edge lines up
   with the top of the whole layout instead of starting below this bar.
   The search box (relocated here by initComplete in public-table.js) is
   pinned to the left via its own margin-right:auto below, which pushes
   every item after it (the checklist/trait dropdowns, reset, theme-toggle)
   over to the right edge as a group — same auto-margin technique
   .evq-theme-toggle already used for itself before this bar had two ends to
   split between. --- */

.evq-sections-filters {
	box-sizing: border-box;
	padding: 16px 24px;
	margin-bottom: 16px;
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 16px;
	background: var( --evq-bg-subtle );
	border: 1px solid var( --evq-border );
	border-radius: var( --evq-radius );
	/* Pairs with the inline opacity:0 in public-table.php (hides this bar
	   until DataTables' initComplete has finished relocating the search box
	   into it, so the dropdowns/reset/theme-toggle group doesn't visibly jump
	   from flush-left to flush-right the moment that happens) — same
	   reasoning and pairing as .evq-sections-table-card's identical rule. */
	transition: opacity 150ms ease;
}

/* --- Filter dropdowns: native <details>/<summary> so open/close needs no JS
   at all and can't be broken by another script's click handler running first
   — a custom button+JS version of this shipped initially and turned out to
   silently fail to open on the live page (some other script wins the click
   before ours ran); <details> sidesteps that class of bug entirely. --- */

.evq-filter-dropdown {
	position: relative;
}

.evq-filter-dropdown-toggle {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	border: 1px solid var( --evq-border );
	border-radius: 999px;
	padding: 7px 14px;
	font-size: 13px;
	font-weight: 600;
	background: var( --evq-bg );
	color: var( --evq-text );
	cursor: pointer;
	list-style: none; /* hide the default marker so our own ::after caret is the only one */
}

.evq-filter-dropdown-toggle::-webkit-details-marker {
	display: none;
}

.evq-filter-dropdown-toggle::after {
	content: "";
	display: inline-block;
	width: 6px;
	height: 6px;
	border-right: 1.5px solid var( --evq-muted );
	border-bottom: 1.5px solid var( --evq-muted );
	transform: rotate(45deg);
	margin-top: -3px;
	transition: transform 0.15s ease;
}

.evq-filter-dropdown-toggle:hover {
	border-color: #cfd4dc;
}

.evq-filter-dropdown[open] .evq-filter-dropdown-toggle {
	border-color: var( --evq-accent );
	color: var( --evq-accent );
}

.evq-filter-dropdown[open] .evq-filter-dropdown-toggle::after {
	transform: rotate(225deg);
	margin-top: 3px;
	border-color: var( --evq-accent );
}

.evq-filter-dropdown-count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var( --evq-accent );
	color: #fff;
	border-radius: 999px;
	font-size: 11px;
	font-weight: 700;
	min-width: 17px;
	height: 17px;
	padding: 0 4px;
}

.evq-filter-dropdown-panel {
	position: absolute;
	/* Flush against the toggle button (no gap) on purpose: a gap here is a dead
	   zone the mouse has to cross to reach the checkboxes below, which fires
	   mouseleave on the <details> element and closes the panel before you can
	   click anything inside it. */
	top: 100%;
	left: 0;
	z-index: 20;
	background: var( --evq-bg );
	border: 1px solid var( --evq-border );
	border-radius: var( --evq-radius );
	box-shadow: 0 6px 20px var( --evq-shadow );
	/* Breathing room from *inside* the box (padding), not a margin/offset gap
	   outside it — a real gap there is empty space the mouse has to cross,
	   which isn't part of this element and so fires mouseleave on the way
	   through, closing the panel before you can reach a checkbox. */
	padding: 16px 14px 12px;
	min-width: 220px;
	max-width: min(320px, 80vw);
	max-height: 280px;
	overflow-y: auto;
}

.evq-filter-dropdown-panel .evq-filter-checkboxes-row {
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	gap: 8px;
}

.evq-filter-checkbox {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	color: var( --evq-text );
	cursor: pointer;
	white-space: nowrap;
}

.evq-filter-checkbox input[type="checkbox"] {
	accent-color: var( --evq-accent );
	width: 15px;
	height: 15px;
	flex-shrink: 0;
}

/* Scoped with `button` + the ancestor class (same fix as
   .evq-fill-gap-cta above) — pre-existing collision with Elementor's global
   `.elementor-kit-7 button` pill style. */
.evq-sections-filters button.evq-filter-reset {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border: 1px solid var( --evq-border );
	border-radius: 999px;
	background: var( --evq-bg );
	color: var( --evq-muted );
	cursor: pointer;
	align-self: flex-end;
}

.evq-filter-reset-icon::before {
	content: "\21BA"; /* ↺ — reset/undo arrow, same icon-span technique as .evq-theme-toggle-icon */
	font-size: 16px;
	line-height: 1;
}

.evq-sections-filters button.evq-filter-reset:hover {
	color: var( --evq-text );
	border-color: #cfd4dc;
}

/* --- DataTables controls (length/search/info/paging): one coherent,
   minimalist bar top and bottom of the table, replacing the library's own
   dated gradient-button look with this plugin's usual pill/muted-text
   language (same tokens as .evq-sections-filters and the theme toggle). ---
   The row that actually holds the <table> itself is .dt-layout-table — every
   selector below is scoped off it (:not(.dt-layout-table)) so this only ever
   touches the two chrome rows, above and below the table. */

.evq-sections-table-wrap .dt-layout-row:not( .dt-layout-table ) {
	margin: 0;
	padding: 10px 2px;
}

.evq-sections-table-wrap .dt-layout-row:not( .dt-layout-table ):last-child {
	border-top: 1px solid var( --evq-border );
	margin-top: 2px;
}

/* The native search box (.dt-search) is relocated into .evq-sections-filters
   by initComplete in public-table.js — styled here to read as one of that
   bar's own pill controls (matches .evq-filter-dropdown-toggle's sizing)
   rather than as a leftover DataTables element. Its wrapping label's own
   "Rechercher :" text (see fr-FR.json's "search" key — not overridden in
   the JS init since the async-fetched language file would just win that
   race, see the comment there) is hidden the same way .dt-length collapses
   its own text nodes: font-size:0 on the label, restored explicitly on the
   input, whose placeholder (set in the JS init) carries the same meaning. */
.evq-sections-filters .dt-search {
	/* Grows to soak up whatever width the pill controls (dropdowns/reset/
	   theme-toggle) after it don't need — same "pin left, push the rest
	   right" result as the old margin-right:auto, but as a side effect of
	   filling the row instead of just consuming margin, so the input itself
	   gets wider rather than sitting at its own content width with dead
	   space to its right. min-width caps how far it shrinks before the bar
	   wraps to a second line, same 200px content pill controls elsewhere in
	   this file target. */
	flex: 1 1 200px;
	min-width: 200px;
}

.evq-sections-filters .dt-search label {
	display: flex;
	align-items: center;
	margin: 0;
	font-size: 0;
	white-space: nowrap;
	width: 100%;
}

/* Full base pill styling, not just an override: .evq-sections-filters is a
   sibling of .evq-sections-table-wrap (not nested inside it), so the generic
   ".evq-sections-table-wrap .dt-input" rule below never reaches this input
   once it's been moved here. */
.evq-sections-filters .dt-search .dt-input {
	border: 1px solid var( --evq-border );
	border-radius: 999px;
	padding: 7px 14px;
	font: inherit;
	font-size: 13px;
	background: var( --evq-bg );
	color: var( --evq-text );
	/* Stretches to the label's full (now flex-grown) width instead of sizing
	   to its default 20-ish char attribute — see .dt-search's flex:1 1 200px
	   above, which is what actually gives the label room to offer. */
	flex: 1 1 auto;
	width: 100%;
	box-sizing: border-box;
}

.evq-sections-filters .dt-search .dt-input::placeholder {
	color: var( --evq-muted );
	opacity: 1;
}

.evq-sections-filters .dt-search .dt-input:focus-visible {
	outline: 2px solid var( --evq-accent );
	outline-offset: 1px;
}

.evq-sections-table-wrap .dt-input {
	border: 1px solid var( --evq-border );
	border-radius: 999px;
	padding: 6px 14px;
	font: inherit;
	font-size: 13px;
	background: var( --evq-bg, #fff );
	color: var( --evq-text );
}

.evq-sections-table-wrap .dt-input:focus-visible {
	outline: 2px solid var( --evq-accent );
	outline-offset: 1px;
}

/* "Afficher ... entrées" collapses to an icon + the current page size (e.g.
   "☰ 25") — the label's own font-size:0 hides its raw "Afficher"/"entrées"
   text nodes (DataTables wraps the <select> in plain text, not spans, so
   there's nothing else to target); the icon and the select each restore
   their own font-size explicitly, so they're unaffected by that collapse.
   Hovering/focusing re-expands the label's font-size, revealing the
   surrounding words again for context — the count itself is never hidden. */
.evq-sections-table-wrap .dt-length label {
	display: flex;
	align-items: center;
	gap: 4px;
	margin: 0;
	height: 30px;
	padding: 0 12px;
	border: 1px solid var( --evq-border );
	border-radius: 999px;
	background: var( --evq-bg, #fff );
	color: var( --evq-muted );
	font-size: 0;
	font-weight: 400;
	white-space: nowrap;
	cursor: pointer;
	transition: border-color 150ms ease;
}

.evq-sections-table-wrap .dt-length label:hover,
.evq-sections-table-wrap .dt-length label:focus-within {
	font-size: 13px;
	border-color: var( --evq-accent );
}

.evq-sections-table-wrap .dt-length label::before {
	content: "\2261";
	font-size: 15px;
	line-height: 1;
	flex-shrink: 0;
}

.evq-sections-table-wrap .dt-length select.dt-input {
	font-size: 13px;
	border: none;
	background: transparent;
	padding: 0;
	/* Wide enough for "100" (the widest of DataTables' default 10/25/50/100
	   length options) so the value is never clipped to a single digit —
	   fixed rather than width:auto so picking a different value doesn't
	   reflow the pill's own width. */
	width: 3.5em;
	color: var( --evq-text );
}

/* Compact "25/1168"-style info text (see infoCallback in public-table.js —
   DataTables' own default "Affichage de 1 à 25 sur 1168 entrées" template is
   overridden there, not just re-styled here), paging, and page-length all
   share the bottom row: info stays in normal flow on the start side; paging
   and page-length are grouped together in the end slot (see the `layout`
   option in public-table.js) but paging is immediately lifted out of flow
   and centered against the row itself — leaving page-length alone in the
   end slot, flush against the table's bottom-right corner exactly as if
   paging were never there to begin with. */
.evq-sections-table-wrap .dt-info {
	color: var( --evq-muted );
	font-size: 12px;
}

@media ( min-width: 768px ) {
	.evq-sections-table-wrap .dt-layout-row:has( .dt-paging ) {
		position: relative;
	}

	.evq-sections-table-wrap .dt-paging {
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate( -50%, -50% );
	}
}

.evq-sections-table-wrap .dt-paging {
	display: flex;
	align-items: center;
}

.evq-sections-table-wrap .dt-paging .dt-paging-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 30px;
	height: 30px;
	box-sizing: border-box;
	border-radius: 999px !important;
	border: 1px solid transparent !important;
	padding: 0 10px !important;
	margin-left: 2px !important;
	background: transparent !important;
	color: var( --evq-text ) !important;
	font-size: 13px;
	box-shadow: none !important;
}

/* `html body` isn't decorative here — DataTables' own stylesheet has a
   `div.dt-container .dt-paging .dt-paging-button.current:hover` rule with
   `color:inherit !important`, whose specificity (helped by that `div` type
   selector) otherwise beats a same-depth override on hover specifically:
   confirmed live as white text correctly at rest but reverting to
   .dt-paging's inherited (dark) color the moment the current page is
   hovered, over the still-correctly-dark-blue background — unreadable. The
   extra `html body` prefix pushes past that without resorting to a color
   change that wasn't actually the bug. */
html body .evq-sections-table-wrap .dt-paging .dt-paging-button.current,
html body .evq-sections-table-wrap .dt-paging .dt-paging-button.current:hover {
	background: var( --evq-accent ) !important;
	border-color: var( --evq-accent ) !important;
	color: #fff !important;
}

.evq-sections-table-wrap .dt-paging .dt-paging-button:not( .current ):not( .disabled ):hover {
	background: var( --evq-row-hover ) !important;
	border-color: var( --evq-border ) !important;
	color: var( --evq-text ) !important;
}

.evq-sections-table-wrap .dt-paging .dt-paging-button.disabled,
.evq-sections-table-wrap .dt-paging .dt-paging-button.disabled:hover {
	color: var( --evq-muted ) !important;
	background: transparent !important;
	border-color: transparent !important;
	opacity: 0.5;
	cursor: default;
}

.evq-sections-table-wrap .dt-paging .ellipsis {
	color: var( --evq-muted );
}

/* --- River pill (public-table.js's wrapRiverPills()): every row's
   "Nom du plan d'eau" cell is a small clickable tag; clicking it opens the
   details sidebar for that whole river group (window.EVQRiverDetails.open(),
   wired in section-details.js) AND inserts that river's other sections as
   plain preview rows right underneath (see .evq-related-row below),
   regardless of any active filter. Styled to match the existing .evq-tag
   pills (e.g. Région touristique's), not as a distinct "button" look.
   Elementor's global kit CSS (`.elementor-kit-7 button`)
   applies a filled pill style to every <button> with higher specificity
   (class+element) than a bare `.evq-river-pill` class selector — the
   `!important`s here are what make this reliably win instead, the same
   problem .evq-fill-gap-cta above works around by scoping with an extra
   ancestor class; `!important` is simpler here since this pill has no
   other rule on the page it needs to lose to. --- */
button.evq-river-pill {
	display: inline-flex !important;
	align-items: center !important;
	margin: 2px 4px 2px 0 !important;
	padding: 3px 10px !important;
	border: none !important;
	border-radius: 999px !important;
	background: var( --evq-tag-neutral-bg ) !important;
	color: var( --evq-tag-neutral-fg ) !important;
	font: inherit !important;
	font-size: 12px !important;
	font-weight: 600 !important;
	line-height: 1.6 !important;
	white-space: nowrap !important;
	cursor: pointer !important;
	box-shadow: none !important;
}

button.evq-river-pill:hover {
	color: var( --evq-accent ) !important;
}

button.evq-river-pill.evq-river-pill-active {
	background: var( --evq-accent ) !important;
	color: #fff !important;
}

/* "(N) other sections on this river" badge — a second, smaller, non-interactive
   pill next to the river name (see wrapRiverPills() in public-table.js). Muted
   on purpose: it's a secondary hint, not another thing competing for a click
   the way the name pill next to it is. */
.evq-river-pill-count {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	min-width: 16px;
	height: 16px;
	margin-left: 4px;
	padding: 0 5px !important;
	border-radius: 999px !important;
	background: var( --evq-bg-subtle ) !important;
	color: var( --evq-muted ) !important;
	font-size: 10px !important;
	font-weight: 700 !important;
	line-height: 1 !important;
}

/* River grouping admin control (wrapRiverPills()/refreshRiverCell() in
   public-table.js) — the "+" that opens the river-search popover for a
   section with no linked river, and the plain (non-pill) text next to it.
   Same !important convention as .evq-river-pill above, same
   Elementor-kit-button specificity problem to win against. */
button.evq-river-add-btn {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 18px !important;
	height: 18px !important;
	margin: 2px 4px 2px 0 !important;
	padding: 0 !important;
	border: none !important;
	border-radius: 999px !important;
	background: var( --evq-bg-subtle ) !important;
	color: var( --evq-muted ) !important;
	font: inherit !important;
	font-size: 13px !important;
	font-weight: 700 !important;
	line-height: 1 !important;
	cursor: pointer !important;
	box-shadow: none !important;
}

button.evq-river-add-btn:hover {
	background: var( --evq-accent ) !important;
	color: #fff !important;
}

.evq-river-plain {
	display: inline-block;
	color: var( --evq-muted );
	font-size: 12px;
}

.evq-river-search-results {
	display: flex;
	flex-direction: column;
	gap: 2px;
	max-height: 220px;
	margin-top: 8px;
	overflow-y: auto;
}

button.evq-river-search-result {
	display: block !important;
	width: 100% !important;
	padding: 6px 8px !important;
	border: none !important;
	border-radius: 6px !important;
	background: none !important;
	color: inherit !important;
	font: inherit !important;
	font-size: 13px !important;
	text-align: left !important;
	cursor: pointer !important;
}

button.evq-river-search-result:hover {
	background: var( --evq-bg-subtle ) !important;
}

.evq-river-search-empty {
	padding: 6px 2px;
	color: var( --evq-muted );
	font-size: 12px;
}

/* Preview rows inserted under a clicked pill — a DOM clone of the real
   section row (see wrapRiverPills()'s click handler), tinted to read as
   "not really part of the sortable/filterable table", since it isn't: these
   have no connection to DataTables' own row model and disappear again on
   the next sort/filter/page change (see drawCallback in public-table.js).

   The tint lives on each <td> rather than the <tr> itself — needed below so
   .evq-related-row-last's rounded bottom corners actually clip a background
   (radius on the row would just have the plain table background showing
   through square underneath it otherwise). */
/* Only *vertical* padding moves to .evq-related-row-inner below (for the
   grow animation) — horizontal padding stays right here on the <td>,
   unrestated. It matters which: any per-column horizontal padding override
   this table carries can't be replicated by a flat value on the inner div,
   and a mismatched one makes that column visibly wider than normal the
   moment a preview row appears (confirmed live back when the row-expand
   toggle column had its own asymmetric padding: it jumped 36px to 46px,
   traced back to exactly the padding-right this was overriding with a
   stray 10px).
   `!important` on the two that stay: DataTables' own base CSS sets
   `table.dataTable > tbody > tr > td { padding: 8px 10px }` at higher
   specificity (4 elements + 1 class) than a plain `tr.evq-related-row > td`
   (2 elements + 1 class) can out-specify without restructuring the selector
   — same class of fight as the box-shadow rule below, and the reason this
   table's *real* baseline cell padding turned out to be DataTables' 8px/10px
   all along, not the 12px/14px this file separately declares for
   `.evq-sections-table td` (also lower-specificity than DataTables', so it
   loses that fight too — moot for the padding actually shown at rest, but
   relevant here since it means 0 has to beat 8px/10px specifically, not
   12px/14px). */
tr.evq-related-row > td {
	background: var( --evq-subrow-bg );
	color: var( --evq-muted );
	padding-top: 0 !important;
	padding-bottom: 0 !important;
	/* Also !important, also fighting DataTables: its `.display` class puts a
	   border-top on every cell (`table.dataTable.display > tbody > tr > *`,
	   specificity 2 classes + 3 elements — beats this rule's 1 class + 2
	   elements same as the padding fight above), and this file's own
	   `.evq-sections-table td` sets a border-bottom (lower-specificity than
	   that DataTables rule too, so moot either way). Both are a flat 1px
	   regardless of the row's animated height, so they never actually
	   reached 0 — this table's real floor was 2px (top+bottom), not 0. See
	   .evq-related-row-content below for where the border-bottom moved to:
	   inside the clipped/animated area, so it grows/shrinks with everything
	   else instead of sitting there constantly and popping out when the row
	   is finally removed. */
	border-top: none !important;
	border-bottom: none !important;
	/* Also neutralizes DataTables' own position-based zebra stripe
	   (`table.dataTable.display > tbody > tr:nth-child(odd) > *`, a subtle
	   inset box-shadow) — it stripes these rows by raw DOM position like
	   anything else in the table, with no idea they're previews, so it
	   visibly shifted every time a preview row was inserted or removed (and
	   shifted the real rows below them the same way) rather than tracking
	   anything meaningful. .evq-related-row-alt below replaces it with an
	   intentional, stable alternating tint of our own, keyed off each row's
	   fixed position *within the preview block* (set once in JS) instead of
	   its position in the whole tbody. */
	box-shadow: none !important;
}

/* Own alternating shade for readability, decoupled from tbody position (see
   the comment above) — set in JS via local index, not a structural
   pseudo-class like :nth-child, which would have the exact same
   position-dependent instability this replaces. Declared twice: the plain
   fallback first in case color-mix() isn't supported (an invalid value is
   simply ignored, leaving the first, so this degrades to every related row
   sharing the same flat tint rather than breaking). */
tr.evq-related-row.evq-related-row-alt > td {
	background: var( --evq-subrow-bg );
	background: color-mix( in srgb, var( --evq-subrow-bg ), var( --evq-text ) 5% );
}

/* Colored "tab" on the leading edge — inset so it doesn't disturb the cell's
   own padding/width the way a real border would. `!important`: DataTables'
   own CSS puts a `box-shadow: inset 0 0 0 9999px rgba(...,0.019)` "sorted
   column" highlight on whichever cell carries its .sorting_1/2/3 class
   (dataTables.min.css), at higher specificity (3 classes) than this rule (2)
   — and a related-row clone keeps whatever sorting_N class its source cell
   happened to have baked in, so this can't just rely on winning by being
   more specific without restructuring the selector. */
tr.evq-related-row > td:first-child {
	box-shadow: inset 3px 0 0 var( --evq-accent ) !important;
}

/* Caps the block of preview rows — set in JS on the last one only (see
   wrapRiverPills()'s click handler in public-table.js), since every
   .evq-related-row currently on the page always belongs to the same single
   expanded pill (closeRelatedRows() clears any previous group before a new
   one opens), so there's never more than one such block to worry about
   telling apart. */
tr.evq-related-row.evq-related-row-last > td:first-child {
	border-bottom-left-radius: 10px;
}

tr.evq-related-row.evq-related-row-last > td:last-child {
	border-bottom-right-radius: 10px;
}

/* Cascading fade+slide+grow on insertion — reads as the block "unfurling"
   out of the clicked row above it. Staggered per-row via a CSS custom
   property (--evq-row-delay, set in JS on each clone — inherited down through
   its cells automatically, custom properties do that by default) rather than
   all rows appearing/growing at once.

   The <tr> itself only fades/slides — animating a <tr>'s height doesn't
   render reliably across browsers (row height is intrinsic to its cells'
   content) and scaling would visibly squash the text mid-animation.

   The actual "grow from 0" needs *two* nested divs per cell (both built in
   wrapRiverPills()'s click handler), not one:
    - .evq-related-row-inner is the one that animates max-height + overflow:
      hidden — and carries NO padding of its own. It's the thing table
      layout ignores max-height on for a real <td> (confirmed live: a maxed-
      out-at-0 <td> still rendered at its content's full natural height, so
      this can't just live directly on the <td>), which is why it's a plain
      block div instead.
    - .evq-related-row-content, nested inside that, carries the actual
      vertical padding. Padding has to live on a *different* element than
      the one being clipped to 0 — box-sizing:border-box means max-height
      bounds padding+content together, but it doesn't let the browser
      *shrink* padding to fit; when max-height is smaller than the padding
      alone requires, padding still wins and the box floors out at the
      padding's own size instead of reaching 0. Confirmed live: with padding
      directly on the max-height:0 element, every row (including ones
      nowhere near their turn in the stagger, still sitting on
      animation-delay) rendered at a fixed 16px instead of 0 — exactly
      top+bottom padding (8px + 8px) — which is where "a few rows' worth of
      dead space that doesn't go away until each row's animation actually
      reaches it" came from: that many rows-not-yet-grown, each stuck at a
      16px floor instead of collapsing away, summed into visible slack. */
@keyframes evq-related-row-in {
	from {
		opacity: 0;
		transform: translateY( -6px );
	}
	to {
		opacity: 1;
		transform: translateY( 0 );
	}
}

@keyframes evq-related-row-inner-in {
	from {
		max-height: 0;
	}
	to {
		/* Comfortably over this table's real single-line row content height
		   (every column is `white-space: nowrap`, so that's consistent) —
		   can't animate to/from "auto" directly (no browser interpolates
		   that), so this is a fixed, finite cap that just has to already
		   exceed real content, not a snug fit to it. */
		max-height: 64px;
	}
}

tr.evq-related-row {
	animation: evq-related-row-in 220ms ease-out both;
	animation-delay: var( --evq-row-delay, 0ms );
}

.evq-related-row-inner {
	display: block;
	overflow: hidden;
	animation: evq-related-row-inner-in 220ms ease-out both;
	animation-delay: var( --evq-row-delay, 0ms );
}

.evq-related-row-content {
	display: block;
	/* Vertical only — matches DataTables' real `padding: 8px 10px` (see the
	   comment on tr.evq-related-row > td above) for the top/bottom half this
	   div owns. No horizontal padding here: the <td> still provides its own
	   (untouched, whatever column-specific or generic rule already applied
	   to it), which is what keeps column widths from shifting. */
	padding-top: 8px;
	padding-bottom: 8px;
	/* The <td>'s own border is turned off for related rows (see above) and
	   the row separator moved here instead — inside .evq-related-row-inner's
	   clipped/animated area, so it's part of what grows/shrinks rather than
	   a flat 1px that was always there regardless of the row's height and
	   only vanished by being yanked out when the element was removed. */
	border-bottom: 1px solid var( --evq-border );
}

/* Mirror of the entrance animation, played on the way out — see
   closeRelatedRows() in public-table.js, which adds this class (with
   --evq-row-delay re-set to a reverse-order stagger: the farthest row goes
   first, collapsing back "into" the clicked row) instead of removing the
   rows outright, then removes them once this has had time to finish. Higher
   specificity than the plain .evq-related-row rule above (two classes vs
   one) so the <tr> fade/slide wins outright without needing !important; the
   inner div's max-height shrink wins the same animated-beats-static way the
   growth above does. */
tr.evq-related-row.evq-related-row-closing {
	animation: evq-related-row-out 160ms ease-in both;
	animation-delay: var( --evq-row-delay, 0ms );
}

tr.evq-related-row.evq-related-row-closing .evq-related-row-inner {
	animation: evq-related-row-inner-out 160ms ease-in both;
	animation-delay: var( --evq-row-delay, 0ms );
}

@keyframes evq-related-row-out {
	from {
		opacity: 1;
		transform: translateY( 0 );
	}
	to {
		opacity: 0;
		transform: translateY( -6px );
	}
}

@keyframes evq-related-row-inner-out {
	from {
		max-height: 64px;
	}
	to {
		max-height: 0;
	}
}

/* --- Real-row duplicate hiding: when a river pill's preview block above
   already shows a section that also has its own normal row visible on the
   current page/filters, that normal row is temporarily hidden instead of the
   same section appearing twice at once — restored the moment the pill closes
   (see wrapRiverPills()'s click handler and restoreDuplicateRows() in
   public-table.js). Same collapse/fade technique and the exact same
   @keyframes as .evq-related-row's own insert/remove animation above, but
   its own scoped rules rather than reusing .evq-related-row-inner/-content
   directly: those rely on tr.evq-related-row > td's padding/border already
   being zeroed by a rule scoped to that specific class, and reusing them
   here without also reusing that zeroing would double the vertical padding
   and leave a stray border during the animation. --- */
tr.evq-section-row.evq-section-row-duplicate-hiding > td,
tr.evq-section-row.evq-section-row-duplicate-showing > td {
	padding-top: 0 !important;
	padding-bottom: 0 !important;
	border-top: none !important;
	border-bottom: none !important;
	box-shadow: none !important;
}

.evq-section-row-collapse-inner {
	display: block;
	overflow: hidden;
}

.evq-section-row-collapse-content {
	display: block;
	padding-top: 8px;
	padding-bottom: 8px;
	border-bottom: 1px solid var( --evq-border );
}

tr.evq-section-row.evq-section-row-duplicate-hiding {
	animation: evq-related-row-out 160ms ease-in both;
}

tr.evq-section-row.evq-section-row-duplicate-hiding .evq-section-row-collapse-inner {
	animation: evq-related-row-inner-out 160ms ease-in both;
}

tr.evq-section-row.evq-section-row-duplicate-showing {
	animation: evq-related-row-in 220ms ease-out both;
}

tr.evq-section-row.evq-section-row-duplicate-showing .evq-section-row-collapse-inner {
	animation: evq-related-row-inner-in 220ms ease-out both;
}

/* Resting state once the hide animation finishes (public-table.js swaps this
   class in after evq-related-row-out's 160ms — see hideDuplicateRow()) —
   plain display:none, no animation, since the row is fully wrapped/unwrapped
   only for the animated transition itself. */
tr.evq-section-row.evq-section-row-duplicate-hidden {
	display: none;
}

/* --- Dark-mode toggle button ---
   Appears both on the shortcode page (inside .evq-sections-filters, where
   Elementor's `.elementor-kit-7 button` global rule would otherwise win —
   see the .evq-fill-gap-cta comment above) and on the standalone fullmap page
   (inside .evq-fullmap-toolbar, no Elementor wrapper there) — scoped to both
   ancestors so it's styled consistently either way. */
.evq-sections-filters button.evq-theme-toggle,
.evq-fullmap-toolbar button.evq-theme-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border: 1px solid var( --evq-border );
	border-radius: 999px;
	background: var( --evq-bg );
	color: var( --evq-text );
	cursor: pointer;
	margin-left: auto;
}

/* Cancels the auto margin above just for this context: the search box now
   owns the bar's one auto margin (margin-right:auto, see the "Filter bar"
   rule above), which pins it left and pushes the dropdowns/reset/theme-
   toggle group flush right together. A second auto margin here would fight
   that — stranding this button alone further right, off the end of its own
   group — on any line where flex-wrap leaves the row short of a full width.
   .evq-fullmap-toolbar isn't touched: it has no such rule and still relies
   on this same auto margin on its own. */
.evq-sections-filters button.evq-theme-toggle {
	margin-left: 0;
}

.evq-sections-filters button.evq-theme-toggle:hover,
.evq-fullmap-toolbar button.evq-theme-toggle:hover {
	background: var( --evq-row-hover );
}

.evq-theme-toggle-icon::before {
	content: "\2600"; /* sun — shown when currently light, click switches to dark */
	font-size: 15px;
	line-height: 1;
}

:root[data-evq-theme="dark"] .evq-theme-toggle-icon::before {
	content: "\1F319"; /* crescent moon — shown when currently dark */
}

@media ( prefers-color-scheme: dark ) {
	:root:not( [data-evq-theme="light"] ) .evq-theme-toggle-icon::before {
		content: "\1F319";
	}
}

/* --- Hover/focus tooltip on the "Niveau d'eau" cell (see section-hydro-tooltip.js).
   The chart itself (.evq-sparkline/.evq-chart-legend/.evq-chart-title) reuses
   section-details.css's existing rules — already loaded on this page for the
   details panel — this is only the floating card wrapper + positioning. --- */

.evq-col-hydro[data-trend] {
	cursor: help;
}

.evq-col-season[data-season] {
	cursor: help;
}

td[data-profile] {
	cursor: help;
}

/* The generic .evq-tooltip/.evq-tooltip--pinned/.evq-tooltip-title/
   .evq-tooltip-progress* shell now lives in its own section-tooltip.css
   (enqueued as 'evq-sections-tooltip-css', a dependency here) — shared with
   any map's POI hover tooltip, not just this page's own hydro/season/profile
   ones. Only what's specific to *this* page's tooltips stays below. */

/* Nested chain on the "Rapides / Portages" tooltip (section-profile-tooltip.js):
   bar → wider "zoomed" bar + color legend together → one segment's own
   detail. The zoom step is a real one, not a CSS trick — buildProfileBar()'s
   SVG viewBox already stretches to its container (section-details.css), so a
   wider box alone gives more on-screen pixels per segment. */
.evq-tooltip--profile-zoom {
	width: 640px;
}

.evq-profile-zoom-trigger {
	cursor: zoom-in;
}

.evq-profile-zoom-hint {
	margin-top: 6px;
	font-size: 11px;
	color: var( --evq-muted );
	text-align: right;
}

.evq-profile-zoom-bar {
	margin-bottom: 10px;
}

/* Individual rapide/portage segments only become their own hover target
   inside the zoomed bar (buildProfileBar()'s opts.interactive) — the plain
   inline bar's segments stay non-interactive (cursor:default,
   section-details.css), same as everywhere else buildProfileBar() is used. */
.evq-profile-bar-interactive .evq-profile-seg {
	cursor: help;
}

.evq-profile-segment-meta {
	margin: 0;
	color: var( --evq-muted );
	font-size: 12px;
}

.evq-profile-segment-desc {
	margin: 6px 0 0;
}

/* --- Admin mode: toolbar, click-to-edit cells, quick-add row (public-table.js's
   initAdminMode()). Server-gated (manage_options) — a visitor without that
   capability never gets this markup at all, so none of this needs its own
   permission styling (e.g. hiding it), it just never exists for them. --- */

.evq-sections-admin-toolbar {
	box-sizing: border-box;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	padding: 10px 24px;
	margin-bottom: 12px;
	background: var( --evq-tag-amber-bg );
	border: 1px solid var( --evq-border );
	border-radius: var( --evq-radius );
}

/* EVQ_Sections_Suggestions_Admin::handle_adjust_row()'s redirect notice — a
   plain front-end equivalent of wp-admin's .notice-info, which isn't loaded
   here since this isn't a wp-admin page. */
.evq-adjusted-notice {
	box-sizing: border-box;
	padding: 10px 24px;
	margin-bottom: 12px;
	background: var( --evq-tag-blue-bg );
	color: var( --evq-text );
	border: 1px solid var( --evq-border );
	border-left: 4px solid var( --evq-accent );
	border-radius: var( --evq-radius );
	font-size: 14px;
}

/* all:unset first — this site's theme (Elementor/Hello Elementor) styles the
   bare `button`/`a` elements aggressively enough that its look otherwise
   wins over the rules below regardless of source order. */
.evq-admin-edit-toggle,
.evq-admin-quickadd-toggle,
.evq-admin-add-full-link,
.evq-become-editor-btn {
	all: unset;
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	border: 1px solid var( --evq-border ) !important;
	border-radius: 999px !important;
	padding: 7px 14px !important;
	font-family: inherit !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	background: var( --evq-bg ) !important;
	color: var( --evq-text ) !important;
	cursor: pointer;
	line-height: 1.2;
}

.evq-admin-edit-toggle:hover,
.evq-admin-quickadd-toggle:hover,
.evq-admin-add-full-link:hover,
.evq-become-editor-btn:not(:disabled):hover {
	border-color: var( --evq-accent ) !important;
	color: var( --evq-accent ) !important;
}

.evq-become-editor-btn:disabled {
	opacity: 0.6;
	cursor: default;
}

.evq-admin-edit-toggle[aria-pressed="true"] {
	background: var( --evq-accent ) !important;
	border-color: var( --evq-accent ) !important;
	color: #fff !important;
}

/* Affordance on every editable cell, only while edit mode is on
   (.evq-admin-edit-mode on the table itself — see setEditMode()) — otherwise
   a click just opens the row's details panel like everywhere else on this
   table, so nothing should look clickable-for-editing until that's true. A
   persistent (not just :hover) dashed underline so it's obvious which cells
   are editable as soon as edit mode turns on, not only on mouseover.
   td[data-editable] alongside td[data-key]: the "Niveau d'eau" and
   "Caractéristiques" cells (hydro/traits popovers) carry only data-editable,
   no data-key — they were missing this affordance entirely without it. */
.evq-admin-edit-mode td[data-key],
.evq-admin-edit-mode td[data-editable] {
	cursor: pointer;
	outline-offset: -2px;
	box-shadow: inset 0 -1px 0 0 var( --evq-accent );
}

.evq-admin-edit-mode td[data-key]:hover,
.evq-admin-edit-mode td[data-editable]:hover {
	outline: 2px dashed var( --evq-accent );
	background: var( --evq-row-hover );
}

td.evq-cell-editing {
	outline: 2px solid var( --evq-accent );
	outline-offset: -2px;
	background: var( --evq-bg );
	padding: 4px !important;
}

td.evq-cell-saving {
	opacity: 0.6;
	pointer-events: none;
}

.evq-cell-input {
	all: unset;
	box-sizing: border-box;
	display: block;
	width: 100%;
	font-family: inherit !important;
	font-size: 13px !important;
	padding: 5px 6px !important;
	border: 1px solid var( --evq-accent ) !important;
	border-radius: 4px !important;
	background: var( --evq-bg ) !important;
	color: var( --evq-text ) !important;
	cursor: text;
}

.evq-cell-input:focus {
	border-color: var( --evq-accent ) !important;
	outline: 2px solid var( --evq-accent ) !important;
	outline-offset: 1px;
}

.evq-cell-input-textarea {
	min-height: 60px;
	resize: vertical;
}

/* --- Quick-add row: a plain <tr><td colspan="…"> holding one flex form —
   not real DataTables columns, so it doesn't need to line up with them. --- */

tr.evq-quickadd-row > td {
	background: var( --evq-bg-subtle );
	padding: 16px !important;
}

.evq-quickadd-form {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 12px;
}

.evq-quickadd-field {
	display: flex;
	flex-direction: column;
	gap: 4px;
	font-size: 12px;
	font-weight: 600;
	color: var( --evq-muted );
	min-width: 140px;
}

.evq-quickadd-field .evq-cell-input {
	border-color: var( --evq-border );
}

.evq-quickadd-field .evq-cell-input:focus {
	border-color: var( --evq-accent );
	outline: none;
}

.evq-quickadd-actions {
	display: flex;
	gap: 8px;
	margin-left: auto;
}

/* Full .evq-quickadd-save/.evq-quickadd-cancel button styling lives further
   below, alongside the popover CSS — shared across the toolbar, quick-add
   row, and all three popovers, so it's defined once in one place. */

/* --- Just-created row, after the quick-add redirect (see the
   evq_highlight-driven adminPostInitHooks entry in public-table.js). --- */

tr.evq-row-highlight {
	animation: evq-row-highlight-fade 3s ease-out;
}

@keyframes evq-row-highlight-fade {
	0% { background-color: var( --evq-tag-amber-bg ); }
	100% { background-color: transparent; }
}

/* --- Admin popovers (Niveau d'eau thresholds, Caractéristiques tags, Période
   pagayable graph — public-table.js's openHydroPopover()/openTraitsPopover()/
   openSeasonPopover(), all built on the same openPopoverOn() shell).

   Every button/input/select in this section resets appearance/font/border/
   background/color explicitly (some with !important) rather than trusting
   the browser or theme defaults: this site's Elementor/Hello Elementor theme
   applies its own global button and form-control styling aggressively
   enough that an un-reset control here reliably inherits the theme's look
   (rounded pill buttons in the theme's accent color, oversized form fields,
   etc.) instead of this plugin's own. Every other admin-mode control on this
   page (the toolbar buttons, quick-add row) already had this problem in
   practice, so the popovers are written defensively from the start. --- */

.evq-admin-popover {
	position: absolute;
	z-index: 1100;
	box-sizing: border-box;
	width: 340px;
	max-width: calc( 100vw - 16px );
	background: var( --evq-bg );
	border: 1px solid var( --evq-border );
	border-radius: var( --evq-radius );
	box-shadow: 0 10px 30px var( --evq-shadow );
	font-family: inherit;
	font-size: 13px;
	color: var( --evq-text );
}

.evq-admin-popover-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 10px 12px;
	border-bottom: 1px solid var( --evq-border );
}

.evq-admin-popover-title {
	font-weight: 700;
	font-size: 13px;
	color: var( --evq-text ) !important;
}

/* An SVG X (see CLOSE_ICON_SVG in public-table.js), not the &times; glyph
   this used to hold — that character's own metrics sit a few pixels off
   visual-center in most fonts, which read as "the × isn't quite in the
   button" no matter how the button itself was centered. An SVG with a fixed
   viewBox has no such ambiguity. flex-shrink:0 keeps it from being squeezed
   by a long popover/modal title next to it. */
.evq-admin-popover-close {
	all: unset;
	box-sizing: border-box;
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	cursor: pointer;
	line-height: 0;
	color: var( --evq-muted ) !important;
	background: transparent !important;
}

.evq-admin-popover-close svg {
	display: block;
	width: 12px;
	height: 12px;
}

.evq-admin-popover-close:hover {
	background: var( --evq-row-hover ) !important;
	color: var( --evq-text ) !important;
}

.evq-admin-popover-body {
	padding: 12px;
	max-height: 70vh;
	overflow-y: auto;
}

.evq-admin-popover-notice {
	margin: 0 0 10px;
	font-size: 12px;
	color: var( --evq-muted );
	line-height: 1.4;
}

.evq-admin-popover-form {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.evq-admin-popover-field {
	display: flex;
	flex-direction: column;
	gap: 4px;
	font-size: 12px;
	font-weight: 600;
	color: var( --evq-muted ) !important;
}

.evq-admin-popover-field .evq-cell-input {
	border-color: var( --evq-border );
}

.evq-admin-popover-actions {
	display: flex;
	justify-content: flex-end;
	gap: 8px;
	margin-top: 12px;
}

/* Public-table.js's openSuggestPopover() — the "+" fill-gap button's form
   for a non-editor visitor. Everything else in that popover reuses the
   .evq-admin-popover-* / .evq-cell-input / .evq-quickadd-save classes above
   as-is; only the Turnstile widget's own container and the error text (no
   existing equivalent to reuse) need their own small rules. */
.evq-suggest-turnstile {
	display: flex;
	justify-content: center;
	margin: 2px 0;
}

.evq-suggest-error {
	margin: 0;
	font-size: 12px;
	color: var( --evq-tag-red-fg );
}

/* Reused button look (toolbar/quick-add/popovers all share these two classes) — appearance:none clears the theme's own button chrome (Elementor/Hello Elementor applies border-radius/background/font at the bare `button` element level) before this plugin's own pill styling is applied. */
.evq-quickadd-save,
.evq-quickadd-cancel,
.evq-traits-suggestion {
	all: unset;
	box-sizing: border-box;
	cursor: pointer;
	font-family: inherit !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	line-height: 1.2;
	text-align: center;
}

.evq-quickadd-save,
.evq-quickadd-cancel {
	border-radius: 999px !important;
	padding: 7px 16px !important;
	border: 1px solid var( --evq-border ) !important;
	background: var( --evq-bg ) !important;
	color: var( --evq-text ) !important;
}

.evq-quickadd-save {
	background: var( --evq-accent ) !important;
	border-color: var( --evq-accent ) !important;
	color: #fff !important;
}

.evq-quickadd-save:hover {
	opacity: 0.9;
}

.evq-quickadd-save:disabled {
	opacity: 0.6 !important;
	cursor: default;
}

.evq-quickadd-cancel:hover {
	border-color: var( --evq-accent ) !important;
	color: var( --evq-accent ) !important;
}

/* --- Caractéristiques editor: chips with a × to remove, an add/search input, a suggestion list (existing tags + "create new"). --- */

.evq-traits-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-bottom: 10px;
}

.evq-traits-empty {
	font-size: 12px;
	color: var( --evq-muted );
}

.evq-traits-chip {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding-right: 4px !important;
}

.evq-traits-chip-remove {
	all: unset;
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	cursor: pointer;
	font-size: 13px;
	line-height: 1;
	color: inherit !important;
	background: rgba( 0, 0, 0, 0.12 ) !important;
}

.evq-traits-chip-remove:hover {
	background: rgba( 0, 0, 0, 0.28 ) !important;
}

.evq-traits-add {
	position: relative;
}

.evq-traits-add .evq-cell-input {
	width: 100%;
	border-color: var( --evq-border );
}

.evq-traits-suggestions {
	display: flex;
	flex-direction: column;
	margin-top: 6px;
	border: 1px solid var( --evq-border );
	border-radius: 6px;
	overflow: hidden;
}

.evq-traits-suggestions:empty {
	display: none;
	border: none;
}

.evq-traits-suggestion {
	display: block;
	width: 100%;
	padding: 7px 10px !important;
	background: var( --evq-bg ) !important;
	color: var( --evq-text ) !important;
	text-align: left !important;
	border-bottom: 1px solid var( --evq-border ) !important;
}

.evq-traits-suggestion:last-child {
	border-bottom: none !important;
}

.evq-traits-suggestion:hover {
	background: var( --evq-row-hover ) !important;
}

.evq-traits-suggestion-create {
	font-style: italic;
	color: var( --evq-accent ) !important;
}

/* --- Période pagayable season graph: 12 months × 2 half-month cells, click
   or click-drag to paint a range. Lives in the same wide, full-viewport
   modal shell as the review/diff panel (openAdminModal() in public-table.js)
   rather than the near-cell 340px popover the other two editors use — that
   width forced the grid into 2 cramped rows and the whole panel into a
   scrolling body; a real modal gives it room to breathe with nothing to
   scroll. See .evq-season-modal below for the width override. --- */

.evq-review-modal.evq-season-modal {
	max-width: 640px;
}

.evq-season-shortcuts {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 14px;
}

.evq-season-shortcut {
	all: unset;
	box-sizing: border-box;
	cursor: pointer;
	font-family: inherit !important;
	font-size: 12px !important;
	font-weight: 600 !important;
	padding: 6px 14px !important;
	border-radius: 999px !important;
	border: 1px solid var( --evq-border ) !important;
	background: var( --evq-bg-subtle ) !important;
	color: var( --evq-text ) !important;
}

.evq-season-shortcut:hover {
	border-color: var( --evq-accent ) !important;
	color: var( --evq-accent ) !important;
}

.evq-season-grid {
	display: grid;
	grid-template-columns: repeat( 6, 1fr );
	gap: 16px 12px;
	margin-bottom: 14px;
	user-select: none; /* the mousedown/mouseenter drag-paint shouldn't also select surrounding text */
}

.evq-season-month {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
}

.evq-season-month-label {
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	color: var( --evq-muted ) !important;
}

.evq-season-halves {
	display: flex;
	width: 100%;
	height: 40px;
	border-radius: 6px;
	overflow: hidden;
	border: 1px solid var( --evq-border );
}

.evq-season-cell {
	all: unset;
	box-sizing: border-box;
	flex: 1 1 50%;
	height: 100%;
	cursor: pointer;
	background: var( --evq-bg-subtle ) !important;
	border-right: 1px solid var( --evq-border );
}

.evq-season-cell:last-child {
	border-right: none;
}

.evq-season-cell:hover {
	background: var( --evq-row-hover ) !important;
}

.evq-season-cell.is-selected {
	background: var( --evq-accent ) !important;
}

.evq-season-preview {
	margin: 0;
	padding: 10px 12px;
	border-radius: 6px;
	background: var( --evq-bg-subtle );
	font-size: 13px;
	font-weight: 600;
	color: var( --evq-text );
	text-align: center;
}

/* Cell currently owning an open popover — same intent as .evq-cell-editing's outline, distinct class since this cell's own content isn't being replaced in place. */
td.evq-popover-open {
	outline: 2px solid var( --evq-accent );
	outline-offset: -2px;
}

/* --- Staged edit sessions: the toolbar's pending badge/Apply/Tout annuler
   controls, the "pending" visual state on a row/cell whose draft hasn't been
   applied yet, and the review/diff panel the Apply button opens — see
   EVQ_Sections_Edit_Session_Rest and initAdminMode()'s applyRowPayload()/
   openReviewModal() in public-table.js. --- */

.evq-admin-toolbar-spacer {
	flex: 1 1 auto;
}

.evq-admin-pending-badge {
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	padding: 6px 12px !important;
	border-radius: 999px !important;
	font-family: inherit !important;
	font-size: 12px !important;
	font-weight: 700 !important;
	background: var( --evq-accent ) !important;
	color: #fff !important;
	line-height: 1.2;
}

.evq-admin-apply-btn,
.evq-admin-discard-btn,
.evq-admin-history-link {
	all: unset;
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	border: 1px solid var( --evq-border ) !important;
	border-radius: 999px !important;
	padding: 7px 14px !important;
	font-family: inherit !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	background: var( --evq-bg ) !important;
	color: var( --evq-text ) !important;
	cursor: pointer;
	line-height: 1.2;
}

.evq-admin-apply-btn {
	background: var( --evq-accent ) !important;
	border-color: var( --evq-accent ) !important;
	color: #fff !important;
}

.evq-admin-apply-btn:hover {
	filter: brightness( 1.08 );
}

.evq-admin-discard-btn:hover,
.evq-admin-history-link:hover {
	border-color: var( --evq-accent ) !important;
	color: var( --evq-accent ) !important;
}

/* Whole row with at least one staged, not-yet-applied change — a soft tint
   distinct from the stronger per-cell highlight below, so a row scanned at a
   glance still reads as "something here is pending" even before looking at
   which cell. */
tr.evq-pending-row {
	box-shadow: inset 3px 0 0 0 var( --evq-accent );
}

tr.evq-pending-insert {
	background: var( --evq-tag-green-bg ) !important;
}

tr.evq-pending-insert > td {
	background: transparent !important;
}

/* One specific cell whose value differs from what's actually stored — dashed
   amber-accent outline, distinct from the solid outline .evq-cell-editing/
   .evq-popover-open use for "currently open", so "pending" and "currently
   being edited" never look the same. */
td.evq-cell-pending {
	outline: 2px dashed var( --evq-accent );
	outline-offset: -2px;
	background: var( --evq-tag-amber-bg ) !important;
}

/* --- Review/diff modal (openReviewModal()) — a full-viewport overlay, not a
   near-cell popover like the three editors above: it summarizes every
   pending row at once, so it needs real room rather than a 340px panel. --- */

.evq-review-backdrop {
	position: fixed;
	inset: 0;
	z-index: 1200;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	background: rgba( 0, 0, 0, 0.5 );
}

.evq-review-modal {
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	width: 100%;
	max-width: 1100px;
	max-height: 90vh;
	background: var( --evq-bg );
	border-radius: var( --evq-radius );
	box-shadow: 0 20px 60px var( --evq-shadow );
	font-family: inherit;
	color: var( --evq-text );
	overflow: hidden;
}

.evq-review-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 14px 18px;
	border-bottom: 1px solid var( --evq-border );
	flex: 0 0 auto;
}

.evq-review-title {
	font-weight: 700;
	font-size: 15px;
	color: var( --evq-text ) !important;
}

.evq-review-legend {
	margin: 0;
	padding: 10px 18px 0;
	font-size: 12px;
	color: var( --evq-muted );
	flex: 0 0 auto;
}

.evq-review-body {
	padding: 12px 18px;
	overflow-y: auto;
	flex: 1 1 auto;
}

.evq-review-actions {
	display: flex;
	justify-content: flex-end;
	gap: 8px;
	padding: 14px 18px;
	border-top: 1px solid var( --evq-border );
	flex: 0 0 auto;
}

/* Diff table markup itself is rendered server-side by
   EVQ_Sections_Edit_Snapshot::render_diff_html() (shared with the wp-admin
   "Modifications" history detail view, which styles the same class names
   with plain, non-defensive CSS since wp-admin isn't fighting a page-builder
   theme) — green row = new/added value, red row = old/replaced value,
   outlined cells = the ones that actually changed within that row. */

.evq-diff-table-wrap {
	overflow-x: auto;
}

.evq-diff-table {
	border-collapse: collapse;
	width: 100%;
	font-size: 12.5px;
}

.evq-diff-table th,
.evq-diff-table td {
	padding: 6px 10px;
	border: 1px solid var( --evq-border );
	white-space: nowrap;
	text-align: left;
	color: var( --evq-text );
}

.evq-diff-table thead th {
	background: var( --evq-bg-subtle );
	position: sticky;
	top: 0;
}

.evq-diff-row-label {
	font-weight: 700;
	background: var( --evq-bg-subtle );
	white-space: nowrap;
}

.evq-diff-row-marker {
	display: inline-block;
	width: 1.2em;
	font-weight: 700;
}

.evq-diff-row-added .evq-diff-row-marker {
	color: var( --evq-tag-green-fg );
}

.evq-diff-row-removed .evq-diff-row-marker {
	color: var( --evq-tag-red-fg );
}

/* GitHub-style: a colored gutter bar per row, not a full-row tint — only
   the cells that actually changed (.evq-diff-cell-changed below) get
   colored, so a one-column edit on a wide row still stands out. Keep this
   in sync with EVQ_Sections_Edit_Snapshot::diff_table_css() (same rules,
   fixed hex there since wp-admin/email don't need this theme's CSS vars). */
.evq-diff-row-added {
	border-left: 4px solid var( --evq-tag-green-fg );
}

.evq-diff-row-removed {
	border-left: 4px solid var( --evq-tag-red-fg );
}

.evq-diff-row-removed td,
.evq-diff-row-removed th {
	color: var( --evq-tag-red-fg );
}

.evq-diff-row-added .evq-diff-cell-changed {
	background: var( --evq-tag-green-bg );
}

.evq-diff-row-removed .evq-diff-cell-changed {
	background: var( --evq-tag-red-bg );
	text-decoration: line-through;
}

.evq-diff-cell-changed {
	outline: 2px solid var( --evq-accent );
	outline-offset: -2px;
}

.evq-diff-discard-row {
	all: unset;
	box-sizing: border-box;
	margin-left: 8px;
	padding: 2px 8px !important;
	border-radius: 999px !important;
	font-family: inherit !important;
	font-size: 11px !important;
	font-weight: 600 !important;
	text-decoration: none !important;
	background: var( --evq-bg ) !important;
	color: var( --evq-muted ) !important;
	border: 1px solid var( --evq-border ) !important;
	cursor: pointer;
	white-space: nowrap;
}

.evq-diff-discard-row:hover {
	border-color: var( --evq-accent ) !important;
	color: var( --evq-accent ) !important;
}