/* No-reload inner-tab navigation (Global Settings sections, Reports/
   Payments sub-tabs, Integrations category filters) — dims the region
   and blocks further clicks while the AJAX swap is in flight, see
   admin.js. */
#chargeforms-ajax-region {
	transition: opacity 0.1s ease;
}
#chargeforms-ajax-region.is-loading {
	opacity: 0.45;
	pointer-events: none;
}

/* Declared on :root, not .chargeforms-wrap — a real bug found live: the
   Builder's quick-add popover, right-click context menu, and Pro-lock
   modal all portal straight to document.body (escaping .fc-canvas's own
   overflow/transform, see each component's doc comment for why), which
   sits OUTSIDE .chargeforms-wrap's subtree. A custom property only
   inherits down the DOM tree from where it's declared, so every one of
   these --fc-* tokens silently resolved to nothing for a portaled
   element — background/border/color rendered fully transparent, with
   canvas content bleeding through from behind. :root (<html>) is an
   ancestor of literally everything on the page, portaled or not, so
   declaring the token SCALE here fixes that whole class of bug at once.
   The two real applied styles that used to live in this same block
   (color/font-family) stay scoped to .chargeforms-wrap below, on
   purpose — those should only paint ChargeForms' own screens, not every
   page in wp-admin. */
:root {
	/* Accent-hover superseded again: the user's own explicit R2 token
	   table (the newest, most authoritative spec, given directly rather
	   than sourced from a file) states #5a3ee0, overriding the prior
	   .dc.html-inline-style-driven #5638d8. Per direct user confirmation
	   this reverts back to #5a3ee0. --fc-primary-700 (#4527ab) is the
	   darker text-on-tint shade the design's own banners/badges use (e.g.
	   Reports' "Free in ChargeForms" callout). --fc-chart-* stays a
	   5-color categorical set derived from the same family so multi-series
	   charts still read as one considered palette — not part of the
	   source design, this project's own addition. */
	--fc-primary-50: #f2effe;
	--fc-primary-tint-2: #faf9ff;
	--fc-primary-100: #e1d8fd;
	--fc-primary-500: #6c4ef5;
	--fc-primary-600: #5a3ee0;
	--fc-primary-700: #4527ab;

	--fc-primary: var(--fc-primary-500);
	--fc-primary-dark: var(--fc-primary-600);
	--fc-primary-darker: var(--fc-primary-700);
	--fc-primary-soft: var(--fc-primary-50);
	--fc-primary-soft-dark: var(--fc-primary-100);
	--fc-accent: var(--fc-primary);
	--fc-accent-soft: var(--fc-primary-soft);
	--fc-success: #00b27f;
	--fc-success-dark: #00805c;
	--fc-success-soft: #e6f7f2;
	--fc-danger: #ff6154;
	--fc-danger-soft: #ffd6d2;
	--fc-warning: #fcbe2d;
	--fc-warning-dark: #8a6d2f;
	--fc-warning-soft: #fcecc4;
	/* Second warning-soft shade from R2 — kept alongside --fc-warning-soft
	   rather than replacing it, same reasoning as --fc-canvas-bg-alt. */
	--fc-warning-soft-alt: #fff6e0;
	--fc-warning-border: #f7e2b0;
	--fc-border: #dadbdd;
	/* Real border mismatch found live (user report): the .dc.html files
	   consistently use this lighter shade for INTERNAL row/section
	   dividers (table row borders, card-internal separators) while
	   reserving the darker --fc-border above for the outer card/table/
	   input outline — two different border weights, not one. Tables were
	   using --fc-border for both, making every row divider heavier than
	   the design intends. */
	--fc-border-light: #f0f0f1;
	/* Per explicit user request: the whole plugin's canvas — not just the
	   outer page wrapper (.chargeforms-wrap/.fc-app, already whitened) —
	   reads as fully white, not off-white. This token backs the vast
	   majority of inner panel/card/canvas surfaces across every admin
	   screen and the Builder, so it had to change at the source rather
	   than overriding each of its ~80 call sites individually. */
	--fc-bg: #ffffff;
	/* Was --fc-bg's own value before it became pure white above — every
	   hover/tint use that needs to stay visibly distinct from the (now
	   white) surface around it points here instead, so the white-canvas
	   change doesn't silently kill hover feedback across nav links,
	   pagination, dropdown menus, and similar. */
	--fc-bg-soft: #f2f2f2;
	/* Ink vs. Body per R2: two distinct near-black text steps that this
	   scale previously conflated into one --fc-text. --fc-ink (#16181d) is
	   reserved for headings/emphasis; --fc-text (#1e1f21, unchanged) stays
	   the default body-copy color so existing call sites are unaffected. */
	--fc-ink: #16181d;
	--fc-text: #1e1f21;
	--fc-muted: #606266;
	/* Faint per R2 — one step lighter than --fc-muted-light (#909399,
	   defined below), for the lightest tertiary text/icon tier. */
	--fc-faint: #a8abb2;

	/* Categorical chart scale — Reports' bar/hbar charts and the donut
	   gauge draw from these instead of one repeated brand color, so a
	   multi-series chart (status breakdown, top forms) reads as distinct
	   series at a glance rather than one bar-shaped mono-color block. */
	--fc-chart-1: var(--fc-primary-500);
	--fc-chart-2: #00b27f;
	--fc-chart-3: #fcbe2d;
	--fc-chart-4: #ff6154;
	--fc-chart-5: #4b4c4d;

	/* Card shadow per the design's token table: `0 1px 3px rgba(15,23,42,.06),
	   0 1px 2px rgba(15,23,42,.04)` — flat/near-flat, not the old "layered
	   soft-ambient + contact shadow" premium-lift treatment.
	   --fc-gradient-primary resolves to a flat color, not an actual
	   gradient — kept as a token so existing
	   `background: var(--fc-gradient-primary)` call sites don't all need
	   individual edits. */
	--fc-card-shadow: 0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
	--fc-shadow-hover: 0 4px 12px rgba(15, 23, 42, 0.08), 0 2px 4px rgba(15, 23, 42, 0.04);
	--fc-gradient-primary: var(--fc-primary-500);
	--fc-ease: cubic-bezier(0.16, 1, 0.3, 1);
	/* User request: Poppins across the whole admin UI. Loaded via
	   Menu::enqueue_assets(); the rest of this stack is the previous
	   system-font fallback, unchanged, so the page still renders
	   correctly before/if the web font load fails or is blocked. */
	--fc-font: "Inter", "Segoe UI", "Segoe UI Web", -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;

	/* Elevation scale, per the design's token table: card `0 1px 3px
	   rgba(15,23,42,.06), 0 1px 2px rgba(15,23,42,.04)`, popover
	   `0 4px 12px rgba(15,23,42,.06), 0 24px 48px -12px rgba(15,23,42,.20)`,
	   modal `0 4px 12px rgba(15,23,42,.06), 0 32px 64px -12px rgba(15,23,42,.28)`. */
	--fc-shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04);
	--fc-shadow-sm: var(--fc-card-shadow);
	--fc-shadow-md: 0 4px 12px rgba(15, 23, 42, 0.08), 0 2px 4px rgba(15, 23, 42, 0.04);
	--fc-shadow-lg: 0 4px 12px rgba(15, 23, 42, 0.06), 0 24px 48px -12px rgba(15, 23, 42, 0.20);
	--fc-shadow-xl: 0 4px 12px rgba(15, 23, 42, 0.06), 0 32px 64px -12px rgba(15, 23, 42, 0.28);
	/* The one selection-specific shadow — a colored ring, not a gray one,
	   since "this is selected" and "this is merely raised" need to read as
	   different KINDS of emphasis, not just different amounts. Matches the
	   design's focus-ring token: `border: 1px solid #6c4ef5` +
	   `box-shadow: 0 0 0 4px #f2effe`. */
	--fc-shadow-selection: 0 0 0 1px var(--fc-primary), 0 0 0 4px var(--fc-primary-soft);

	/* Radius scale — the stylesheet had 3/4/5/6/7/8/10px all in use for
	   what was meant to be "small" vs "medium" vs "large" rounding, plus
	   999px/50% for pills/circles used ad hoc. Four real steps: sm for tight
	   controls (checkboxes, small badges), md for the default control/input
	   radius, lg for cards and panels, xl for large surfaces (modals, the
	   canvas frame). full/circle cover the pill and circle cases that
	   already existed. */
	--fc-radius-sm: 4px;
	--fc-radius-md: 7px;
	--fc-radius-lg: 8px;
	--fc-radius-xl: 14px;
	--fc-radius-full: 999px;
	--fc-radius-circle: 50%;

	/* Motion durations — --fc-ease (the curve) already existed and was
	   applied consistently in maybe half of the stylesheet's transitions;
	   the other half fell back to the browser default `ease`. Three
	   durations cover everything in the brief's 150-250ms guidance: fast
	   for hover/press feedback (should feel instant), base for the common
	   case (selection, expand/collapse, toolbar fade), slow for anything
	   moving a meaningful distance (panel slides, modal entrances). */
	--fc-motion-fast: 100ms;
	--fc-motion-base: 180ms;
	--fc-motion-slow: 260ms;

	/* Semantic surface tokens — distinguishing "the page background," "a
	   resting card," and "a card that's elevated above other cards" was
	   previously done with one-off grays/whites per component (23x #fff,
	   3x #ffffff, plus half a dozen near-white tints like #fafbfd/#fbfdff/
	   #f8fbff that were never intentionally different from each other, just
	   drifted). --fc-surface is the one "a card/panel/input's background"
	   token; --fc-surface-elevated is one step up (a popover/dropdown
	   floating above surface-level cards); --fc-canvas-bg is the dot-grid
	   working area's own background, deliberately distinct since it's not a
	   card at all. */
	--fc-surface: #ffffff;
	--fc-surface-elevated: #ffffff;
	--fc-canvas-bg: #fbfbfb;
	/* Second canvas shade from R2 — kept as its own token rather than
	   replacing --fc-canvas-bg, since I don't yet know which screens each
	   of the two values applies to; existing --fc-canvas-bg usages are
	   unchanged. */
	--fc-canvas-bg-alt: #f5f7fa;
	/* the reference product's own $--color-info is NOT a blue — it's a dark neutral gray
	   (#4B4C4D, _element_ui_var.scss), used for neutral/default badges and
	   chips, not for links or informational callouts (those just reuse
	   $--color-primary). Corrected from an invented sky-blue to the real
	   sourced value. */
	--fc-info: #4b4c4d;

	/* Exact match to the reference product's $--color-text-secondary (_element_ui_var.scss)
	   — one step lighter than --fc-muted for genuinely tertiary text
	   (placeholders, disabled labels, timestamps). */
	--fc-muted-light: #909399;

	/* Formal type/spacing scale — the stylesheet had 13 distinct ad-hoc
	   font-sizes (10-40px) before this, each picked in isolation per
	   component. New rules should reach for one of these steps instead of
	   another one-off value, so the UI keeps reading as one system as more
	   screens are added rather than drifting further. Existing rules are
	   migrated opportunistically, not all at once — a wholesale find/replace
	   across 2000+ lines with no visual QA available is how you introduce
	   the exact "did this break something" risk this scale exists to avoid. */
	--fc-text-2xs: 11px;
	--fc-text-xs: 12px;
	--fc-text-sm: 13px;
	--fc-text-base: 14px;
	--fc-text-md: 15px;
	--fc-text-lg: 17px;
	--fc-text-xl: 19px;
	--fc-text-2xl: 23px;
	--fc-text-3xl: 27px;
	--fc-icon-lg: 32px;
	--fc-icon-xl: 40px;

	--fc-space-1: 4px;
	--fc-space-2: 8px;
	--fc-space-3: 12px;
	--fc-space-4: 16px;
	--fc-space-5: 20px;
	--fc-space-6: 24px;
	--fc-space-8: 32px;
	/* Phase 3 addition (docs/design/CHARGEFORMS_PRODUCT_DESIGN_SYSTEM.md
	   §3): two larger steps at the same 4px cadence, for structural gaps
	   (major section separation) the existing scale had no step for —
	   never used as component-internal padding, only between major page
	   regions. */
	--fc-space-10: 40px;
	--fc-space-12: 48px;
}

.chargeforms-wrap {
	color: var(--fc-text);
	font-family: var(--fc-font);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

/* admin.js's submit-loading-state handler: visible "this is working"
   feedback during a form's full-page-reload round trip. */
.chargeforms-wrap .chargeforms-is-saving {
	position: relative;
	color: transparent !important;
	pointer-events: none;
}
.chargeforms-wrap .chargeforms-is-saving::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 14px;
	height: 14px;
	margin: -7px 0 0 -7px;
	border: 2px solid currentColor;
	border-top-color: transparent;
	border-radius: 50%;
	color: #fff;
	animation: chargeforms-spin 0.7s linear infinite;
}
.chargeforms-wrap .button:not(.button-primary).chargeforms-is-saving::after {
	color: var(--fc-text);
}
@keyframes chargeforms-spin {
	to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
	.chargeforms-wrap .chargeforms-is-saving::after {
		animation: none;
	}
}

/* One consistent focus system for every ChargeForms screen. Two different
   cases need two different treatments:
   - Click targets (buttons, tabs, links, toggle switches): WP core's
     default focus box-shadow fires on every mouse click, not just
     keyboard nav, which reads as a stray border after clicking a tab.
     Suppressed on plain :focus, replaced with a ring only on
     :focus-visible (keyboard/assistive tech).
   - Text inputs/selects/textareas: the opposite — a focus ring on click
     is actually useful here (shows you where you're typing), so those
     keep their existing glow on plain :focus, defined per-context
     alongside each field's own border/radius rules elsewhere in this file. */
.chargeforms-wrap button,
.chargeforms-wrap .button,
.chargeforms-wrap a {
	box-shadow: none;
}
.chargeforms-wrap button:focus,
.chargeforms-wrap .button:focus,
.chargeforms-wrap a:focus {
	outline: none !important;
	box-shadow: none !important;
	border-color: inherit !important;
}
.chargeforms-wrap button:focus-visible,
.chargeforms-wrap .button:focus-visible,
.chargeforms-wrap a:focus-visible {
	outline: 2px solid var(--fc-primary) !important;
	outline-offset: 2px;
	border-radius: 4px;
}

/* the reference product's admin screens run edge-to-edge inside the WP content area —
   no capped content width. WP core's default .wrap has its own small
   right margin, and #wpbody-content can carry its own constraints
   depending on the active admin color scheme/theme — force full width
   everywhere on ChargeForms screens specifically (not other plugins'
   .wrap usage) rather than relying on a single narrow override. */
#wpbody-content:has(.chargeforms-wrap) {
	max-width: none !important;
}
.chargeforms-wrap {
	max-width: none !important;
	width: auto !important;
	margin-right: 10px;
	box-sizing: border-box;
}
.chargeforms-wrap * {
	box-sizing: border-box;
	font-family: inherit;
}
/* Dashicons render from their own icon font (font-family: dashicons) —
   the wildcard rule above has the same (0,1,0) specificity as core's own
   .dashicons rule and loads after it, so without this override every
   icon across every tab renders as a blank tofu box instead of a glyph. */
.chargeforms-wrap .dashicons,
.chargeforms-wrap .dashicons-before::before {
	font-family: dashicons !important;
}
.chargeforms-topbar,
.chargeforms-bar-chart,
.chargeforms-list-toolbar,
.chargeforms-wrap .wp-list-table,
.chargeforms-settings-shell,
.chargeforms-new-form-grid,
.chargeforms-template-grid {
	width: 100%;
}
/* Now nested inside .chargeforms-page-head (flex row, title left / actions
   right) rather than its own standalone full-width row below the status
   tabs — the old width:100% forced it to consume the entire row on its
   own, pushing it onto a second line below the title instead of sitting
   beside it (live-checked via getBoundingClientRect(): actions measured
   1488px wide, the full row, at 1440px viewport). .chargeforms-page-head's
   own flex-wrap still lets it drop to its own line at narrow widths. */
.chargeforms-page-head-actions.chargeforms-entries-actions {
	width: auto;
	flex-wrap: wrap;
	justify-content: flex-end;
}

/* Forms list — page head: title + one-line subtitle on the left, the
   primary action on the right. Replaces a bare <h1> with no context and
   an "+ Add New Form" button buried inside the toolbar row (competing
   for attention with filters/search instead of reading as the page's
   one primary action). */
.chargeforms-page-head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
	margin: 16px 0 20px;
	flex-wrap: wrap;
}
/* Real bug (live Playwright overflow audit, 390px): .chargeforms-page-head-actions'
   own flex-shrink:0 kept the action button at full intrinsic width with
   nowhere to go once the title took its share of a narrow viewport,
   pushing the whole page wider than the screen. flex-wrap above lets the
   actions drop to their own row instead of being forced to coexist with
   the title on one line that no longer fits. */
@media (max-width: 480px) {
	.chargeforms-page-head-actions {
		width: 100%;
	}
	/* Entries has a more specific width:auto rule for its action group;
	   override it here so Import, Chart, and Filter stack inside the phone
	   viewport instead of leaving the Filter trigger half off-canvas. */
	.chargeforms-page-head-actions.chargeforms-entries-actions {
		width: 100%;
	}
	.chargeforms-page-head-actions .button {
		width: 100%;
		justify-content: center;
	}
}
.chargeforms-page-head h1 {
	margin: 0 0 4px;
	font-size: 23px;
	font-weight: 700;
}
.chargeforms-page-head-sub {
	margin: 0;
	color: var(--fc-muted);
	font-size: var(--fc-text-base);
}
.chargeforms-btn-icon.button {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	flex-shrink: 0;
}
.chargeforms-btn-icon .dashicons {
	font-size: 16px;
	width: 16px;
	height: 16px;
}

/* Empty state — the zero-forms hero gets its own larger treatment
   (h2 + longer supporting copy + a bigger CTA) since it's the very first
   thing a brand-new install shows; the "no results for this filter"
   empty state nested inside the list card stays the smaller, quieter
   variant already defined below. */
.chargeforms-empty-state-hero {
	padding: 72px 24px;
}
.chargeforms-empty-state-hero h2 {
	margin: 0 0 8px;
	font-size: var(--fc-text-xl);
}
.chargeforms-empty-state-hero p {
	max-width: 420px;
	margin-left: auto;
	margin-right: auto;
}
.chargeforms-wrap .button-hero {
	padding: 10px 22px;
	font-size: var(--fc-text-base);
	height: auto;
}

/* Forms list — toolbar/table/pagination share one surface instead of a
   toolbar row and a bare wp-list-table sitting separately on the page
   background. Flattened (no border/shadow) to match the reference product
   reference (the plugin's internal reference-screenshot archive/entries-table--*.webp,
   entries-search-filter--01.webp) — every list table there sits directly
   on the page's own light-gray background with no card frame at all, just
   thin row-separator lines. Same "cut the ambient elevation" treatment
   already applied to the builder shell in the v0.65.0 visual-parity pass. */
.chargeforms-list-card {
	background: var(--fc-surface);
	border: 1px solid var(--fc-border);
	border-radius: var(--fc-radius-lg);
	box-shadow: none;
	overflow: hidden;
}
.chargeforms-list-card .chargeforms-list-toolbar {
	padding: 14px 18px;
	border-bottom: 1px solid var(--fc-border);
	margin: 0;
}
.chargeforms-list-card .chargeforms-table-scroll {
	padding: 0;
}
.chargeforms-list-card .wp-list-table {
	border: none;
	border-radius: 0;
	box-shadow: none;
}
.chargeforms-list-card .chargeforms-pagination {
	padding: 12px 18px;
	border-top: 1px solid var(--fc-border);
	margin: 0;
}

/* Forms list table — matches the classic WordPress list-table convention
   (ID / Title / ShortCode / Entries / Updated columns, plain-text row
   actions revealed on row hover via core's own `.row-actions` behavior)
   rather than an icon-button/overflow-menu row, per explicit, repeated
   request to match the reference product' own Forms screen. */
.chargeforms-forms-table th,
.chargeforms-forms-table td {
	padding: 14px 16px;
	/* Real alignment bug found live (user screenshot): the Title cell is
	   taller than its siblings (title text + shortcode chip + row-actions
	   + status toggle, all stacked in one cell), and every simple numeric
	   column (Fields/Entries/Views/Conv./Updated) used vertical-align:
	   middle — so a "1" or "100%" floated centered in that taller row
	   instead of lining up with the title's own first line, which is what
	   the eye actually expects. `top` makes every cell start flush with
	   the row's top edge, same padding, so single-line and multi-line
	   cells' first lines land on the same baseline. */
	vertical-align: top;
}
.chargeforms-forms-table thead th {
	/* Mockup uses a distinct near-white #fafbfd for the table header row —
	   not the same gray as --fc-bg (#f2f2f2), which is a noticeably darker,
	   more saturated neutral meant for hover/active states elsewhere. */
	background: #ffffff;
}
.chargeforms-forms-table tbody tr {
	border-bottom: 1px solid var(--fc-border-light);
	transition: background var(--fc-motion-fast) var(--fc-ease);
}
.chargeforms-forms-table tbody tr:last-child {
	border-bottom: none;
}
.chargeforms-forms-table tbody tr:hover {
	/* Mockup's row hover is a light violet tint (style-hover:
	   background:#f2effe), not a plain gray — was --fc-bg, a real color
	   mismatch. */
	background: var(--fc-primary-50);
}
.chargeforms-col-id {
	width: 5%;
	color: var(--fc-muted);
	font-variant-numeric: tabular-nums;
}
.chargeforms-col-form {
	width: 28%;
}
.chargeforms-col-shortcode {
	width: 16%;
}
.chargeforms-col-entries {
	width: 8%;
}
.chargeforms-col-status {
	width: 12%;
}
.chargeforms-col-updated {
	width: 10%;
}
.chargeforms-col-actions {
	width: 12%;
}
/* Fields/Views/Conv. — real gap found live: design_handoff_chargeforms's
   Forms List spec has these three columns; neither this page nor the
   now-retired Vue rewrite ever implemented them. */
.chargeforms-col-fields,
.chargeforms-col-views,
.chargeforms-col-conv {
	width: 7%;
}
.chargeforms-col-num {
	text-align: right;
	font-variant-numeric: tabular-nums;
	color: var(--fc-muted);
}
/* Real bug found live (user screenshot): WP core's own list-table CSS
   sets `.widefat thead th { text-align: left; }`, a descendant
   selector with higher specificity than the plain `.chargeforms-col-num`
   class rule above — so on the `<th>` elements (Fields/Entries/Views/
   Conv.) that rule won, leaving every numeric header left-aligned
   while its own `<td>` values (no such WP override applies to td)
   rendered right-aligned per the rule above. Each header sat flush
   left while its column's values drifted right beneath it — a gap
   that widened toward the right edge of the table. This redeclares
   the header alignment at higher specificity so header and value
   share the same right edge. */
.chargeforms-forms-table thead th.chargeforms-col-num {
	text-align: right;
}
.chargeforms-col-num.chargeforms-col-entries {
	color: var(--fc-text);
	font-weight: 600;
}
.chargeforms-form-title {
	font-weight: 600;
	font-size: var(--fc-text-base);
	color: var(--fc-text);
	text-decoration: none;
	display: block;
	margin-bottom: 3px;
}
.chargeforms-form-title:hover {
	color: var(--fc-primary-dark);
	text-decoration: underline;
}
.chargeforms-forms-table .row-actions {
	font-size: var(--fc-text-sm);
	color: var(--fc-muted-light);
}
.chargeforms-forms-table .row-actions a {
	color: var(--fc-muted);
	text-decoration: none;
}
.chargeforms-forms-table .row-actions a:hover {
	color: var(--fc-primary-dark);
	text-decoration: underline;
}
.chargeforms-forms-table .row-actions .chargeforms-row-action-danger {
	color: var(--fc-danger);
}
/* Real gap found live (user screenshot): WP core's `.row-actions`
   above this reserves its own line of space even while invisible
   (pre-hover) — `visibility: hidden`, not `display: none` — so an
   extra 8px on top of that reserved line read as an oversized dead
   zone between the shortcode chip and the toggle. 4px keeps a small
   deliberate gap without stacking on top of the row-actions line's
   own height. */
.chargeforms-toggle-inline {
	margin-top: 4px;
}
/* Email Notifications list (Form Settings > Email Notifications) — a plain
   .button variant of the danger color above, for the Delete action there
   (that list isn't inside .chargeforms-forms-table, so the row-actions-
   scoped rule above doesn't reach it). */
.chargeforms-row-action-danger.button {
	color: var(--fc-danger);
	border-color: var(--fc-danger);
}
.chargeforms-row-action-danger.button:hover {
	background: var(--fc-danger);
	color: #fff;
}
.chargeforms-card-head-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 12px;
}
.chargeforms-card-head-row h2 {
	margin: 0;
}
.chargeforms-shortcode-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	width: fit-content;
	max-width: 100%;
	background: none;
	border: none;
	padding: 0;
	cursor: pointer;
	color: var(--fc-muted);
	font-size: var(--fc-text-sm);
}
.chargeforms-shortcode-chip code {
	background: var(--fc-bg);
	border: 1px solid var(--fc-border);
	border-radius: 4px;
	padding: 2px 6px;
	font-size: 11px;
	color: var(--fc-muted-light);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.chargeforms-shortcode-chip .dashicons {
	font-size: 13px;
	width: 13px;
	height: 13px;
	opacity: 0;
	transition: opacity var(--fc-motion-fast) var(--fc-ease);
}
.chargeforms-shortcode-chip:hover .dashicons {
	opacity: 0.7;
}
.chargeforms-shortcode-chip:hover code {
	border-color: var(--fc-primary-100);
	color: var(--fc-primary-dark);
}
.chargeforms-shortcode-chip.is-copied code {
	border-color: var(--fc-success);
	color: var(--fc-success);
}
.chargeforms-shortcode-chip.is-copied .dashicons::before {
	content: "\f147";
	opacity: 1;
	color: var(--fc-success);
}
.chargeforms-entries-count {
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	color: var(--fc-text);
	text-decoration: none;
}
.chargeforms-entries-count:hover {
	color: var(--fc-primary-dark);
}

/* "Find" modal — where a form's shortcode is actually used on the site.
   Simple centered dialog, same overlay convention as this admin's other
   confirm/preview surfaces. */
.chargeforms-find-modal-backdrop {
	position: fixed;
	inset: 0;
	background: rgba(15, 23, 42, 0.45);
	z-index: 100000;
}
.chargeforms-find-modal-panel {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 100001;
	width: min(520px, calc(100vw - 40px));
	max-height: calc(100vh - 80px);
	overflow-y: auto;
	background: var(--fc-surface);
	border-radius: var(--fc-radius-lg);
	box-shadow: var(--fc-shadow-lg);
}
.chargeforms-find-modal-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 18px 20px;
	border-bottom: 1px solid var(--fc-border);
}
.chargeforms-find-modal-head h2 {
	margin: 0;
	font-size: var(--fc-text-base);
	font-weight: 700;
}
.chargeforms-find-modal-close {
	background: none;
	border: none;
	cursor: pointer;
	font-size: 22px;
	line-height: 1;
	color: var(--fc-muted);
	padding: 4px;
}
.chargeforms-find-modal-close:hover {
	color: var(--fc-text);
}
.chargeforms-find-modal-body {
	padding: 20px;
}
.chargeforms-find-loading,
.chargeforms-find-empty {
	margin: 0;
	color: var(--fc-muted);
	font-size: var(--fc-text-sm);
	text-align: center;
	padding: 20px 0;
}
.chargeforms-find-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.chargeforms-find-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 10px 4px;
	border-bottom: 1px solid var(--fc-border);
}
.chargeforms-find-item:last-child {
	border-bottom: none;
}
.chargeforms-find-item-main {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}
.chargeforms-find-item-main a {
	font-weight: 600;
	color: var(--fc-text);
	text-decoration: none;
}
.chargeforms-find-item-main a:hover {
	color: var(--fc-primary-dark);
	text-decoration: underline;
}
.chargeforms-find-item-meta {
	font-size: var(--fc-text-sm);
	color: var(--fc-muted);
}
.chargeforms-find-item-view {
	flex-shrink: 0;
	font-size: var(--fc-text-sm);
	color: var(--fc-primary-dark);
	text-decoration: none;
}
.chargeforms-find-item-view:hover {
	text-decoration: underline;
}
.chargeforms-find-note {
	margin: 14px 0 0;
	font-size: 12px;
	color: var(--fc-muted);
}

.chargeforms-wrap h1,
.chargeforms-wrap h2 {
	color: var(--fc-text);
}

/* WP core's own left sidebar — the top-level "ChargeForms" menu item and
   its active submenu row are recolored to the brand accent, matching
   design_handoff_chargeforms's admin-shell mockup (ChargeForms Screens.dc.html)
   exactly: `background: #6c4ef5` + `box-shadow: inset 4px 0 0 #4527ab` on
   the active top-level item, white text on the active submenu row against
   the submenu's own unchanged dark background. Scoped by the WP-assigned
   #toplevel_page_chargeforms id (unique to this plugin's menu slug), so
   this can never bleed into another plugin's sidebar entry. */
#adminmenu #toplevel_page_chargeforms.wp-has-current-submenu > a.wp-has-current-submenu,
#adminmenu #toplevel_page_chargeforms.wp-has-current-submenu:hover > a.wp-has-current-submenu,
#adminmenu #toplevel_page_chargeforms.current > a.current {
	background: var(--fc-primary) !important;
	color: #fff !important;
	box-shadow: inset 4px 0 0 var(--fc-primary-darker) !important;
}
#adminmenu #toplevel_page_chargeforms.wp-has-current-submenu .wp-menu-image::before {
	color: #fff !important;
}
#adminmenu #toplevel_page_chargeforms ul.wp-submenu li.current a,
#adminmenu #toplevel_page_chargeforms ul.wp-submenu a:focus {
	color: #fff !important;
}

/* Top bar */
/* Flush app bar — matches the reference product's real top nav (a flat bar with
   just a bottom border, no card border/radius/shadow). A prior version
   wrapped this in a bordered, rounded, shadowed card with margin above
   AND below, which read as a settings widget floating inside the page
   rather than the page's own top-level navigation chrome — a real,
   visible difference from the reference product's flat bar found on direct side-by-side
   comparison. Margin-top is dropped entirely (0, not just reduced) so the
   bar sits immediately under the WP admin bar the same way the reference product's does,
   rather than floating in a strip of gray canvas first; .wrap's own
   `margin: 10px 10px 0 2px` (no padding) still gives it the same left/right
   inset as the rest of the page, so this stays within .wrap's box rather
   than bleeding past it with a negative-margin trick that would need to
   track .wrap's margin across every sidebar-collapsed/expanded state. */
.chargeforms-topbar {
	display: flex;
	align-items: center;
	gap: 8px;
	background: var(--fc-surface);
	border: none;
	border-bottom: 1px solid var(--fc-border);
	border-radius: 0;
	box-shadow: none;
	padding: 14px 16px;
	margin: 0 0 24px;
}
.chargeforms-brand {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: var(--fc-text-lg);
	font-weight: 700;
	color: var(--fc-text);
	text-decoration: none;
	margin-right: 12px;
}
.chargeforms-brand-mark {
	display: inline-flex;
	color: var(--fc-primary);
	filter: drop-shadow(0 2px 6px rgba(108, 78, 245, 0.35));
	transition: transform 0.2s var(--fc-ease);
}
.chargeforms-brand:hover .chargeforms-brand-mark {
	transform: scale(1.06);
}
.chargeforms-topbar-nav {
	display: flex;
	align-items: center;
	gap: 2px;
	flex: 1;
	min-width: 0;
}
/* Text-only tabs (no per-tab icon chip) — a prior icon+label treatment
   measured ~150px per tab, which forced horizontal scroll for all 8 tabs
   at completely ordinary laptop widths (1440px) where a plain-text nav
   fits with room to spare. The WP sidebar submenu one level over already
   carries icons; repeating them here cost width for no real wayfinding
   gain once a user knows the plugin at all. */
.chargeforms-topbar-nav a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 12px;
	border-radius: var(--fc-radius-md);
	font-size: var(--fc-text-base);
	font-weight: 500;
	color: var(--fc-muted);
	text-decoration: none;
	white-space: nowrap;
	position: relative;
	transition: background var(--fc-motion-base) var(--fc-ease), color var(--fc-motion-base) var(--fc-ease), transform var(--fc-motion-fast) var(--fc-ease);
}
.chargeforms-topbar-nav a:active {
	transform: scale(0.97);
}
.chargeforms-topbar-nav a:hover {
	color: var(--fc-text);
	background: var(--fc-bg-soft);
}
/* Active tab is a calm flat tint, not a loud gradient pill — direct
   side-by-side comparison against the reference product's own top nav showed their
   quieter tinted-background treatment reads as more professional than an
   earlier gradient-pill version here; a plain-text row doesn't need heavy
   chrome to make "you are here" clear, a color contrast is enough. */
.chargeforms-topbar-nav a.is-active {
	background: var(--fc-primary-50);
	color: var(--fc-primary);
	font-weight: 600;
}
.chargeforms-topbar-nav a.is-active:hover {
	background: var(--fc-primary-100);
	color: var(--fc-primary);
}
/* Unread-entries count on the Entries tab — same signal as the WP toolbar
   badge (class-menu.php), surfaced again here since that's the nav a user
   actually looks at while working inside ChargeForms's own screens. */
.chargeforms-nav-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 16px;
	height: 16px;
	padding: 0 4px;
	border-radius: 999px;
	background: var(--fc-danger);
	color: #fff;
	font-size: var(--fc-text-2xs);
	font-weight: 700;
	line-height: 1;
}
.chargeforms-topbar-nav a.is-active .chargeforms-nav-badge {
	background: rgba(255, 255, 255, 0.9);
	color: var(--fc-primary-dark);
}
.chargeforms-upgrade-btn {
	display: inline-flex;
	align-items: center;
	background: linear-gradient(135deg, var(--fc-primary-dark), var(--fc-primary));
	color: #fff !important;
	padding: 8px 16px;
	border-radius: 6px;
	font-size: var(--fc-text-base);
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
	box-shadow: 0 2px 6px rgba(108, 78, 245, 0.35);
}
.chargeforms-upgrade-btn:hover {
	color: #fff;
	opacity: 0.92;
}

/* Responsive top bar — tab names stay visible as text at every width
   (per explicit preference: labels are more scannable than an icon-only
   row). The nav also scrolls horizontally as a last-resort safety net for
   anything narrower than the collapse sequence below assumes.

   Explicit staged collapse per design_handoff_chargeforms/README.md
   ("Admin shell" — this order matters, it was derived by measuring, and
   label-only collapses run out before the 8-tab nav actually fits):
     <=1180px  hide the Ctrl K kbd hint
     <=1120px  hide the Upgrade button's label (icon/pill stays)
     <=1060px  hide the whole action group (Upgrade + search trigger) AND
               the wordmark; tighten tab padding/font-size
   The action group can be dropped safely at 1060px because Pro also lives
   in the sidebar as a License screen, and Ctrl+K still works as a pure
   keyboard shortcut with no visible trigger. These are real viewport
   breakpoints (not gated on the WP sidebar's collapsed state) since the
   design's own three-step sequence already assumes progressively less
   room, unlike the single previous 1400px cutoff this replaces. */
.chargeforms-topbar {
	flex-wrap: nowrap;
}
.chargeforms-topbar-nav {
	flex-wrap: nowrap;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}
.chargeforms-topbar-nav::-webkit-scrollbar {
	display: none;
}
.chargeforms-topbar-nav a,
.chargeforms-upgrade-btn {
	flex-shrink: 0;
}
/* Real bug found live: at ordinary laptop widths (1366px) with the full
   9-tab nav, the last 1-2 tabs (Integrations/Support) scroll out of the
   visible area with ZERO indication anything is hidden — no scrollbar
   (deliberately hidden above), no partial tab poking into view, nothing.
   A user has no way to discover Support exists at that width. Rather
   than one more magic-number breakpoint (this nav has already grown
   from fewer tabs to 9 over the project's life, and will again), a mask
   fade that only appears when there's actually more to scroll to is
   correct at any tab count, forever — admin.js toggles these two
   classes from the nav's own real scrollLeft/scrollWidth. */
.chargeforms-topbar-nav.chargeforms-has-overflow-end {
	mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent 100%);
	-webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent 100%);
}
.chargeforms-topbar-nav.chargeforms-has-overflow-start {
	mask-image: linear-gradient(to left, #000 calc(100% - 28px), transparent 100%);
	-webkit-mask-image: linear-gradient(to left, #000 calc(100% - 28px), transparent 100%);
}
.chargeforms-topbar-nav.chargeforms-has-overflow-start.chargeforms-has-overflow-end {
	mask-image: linear-gradient(to right, transparent 0, #000 28px, #000 calc(100% - 28px), transparent 100%);
	-webkit-mask-image: linear-gradient(to right, transparent 0, #000 28px, #000 calc(100% - 28px), transparent 100%);
}
@media (max-width: 1180px) {
	.chargeforms-search-trigger kbd {
		display: none;
	}
}
@media (max-width: 1120px) {
	.chargeforms-upgrade-btn-label {
		display: none;
	}
}
@media (max-width: 1060px) {
	.chargeforms-upgrade-btn,
	.chargeforms-search-trigger,
	.chargeforms-brand-text {
		display: none;
	}
	.chargeforms-topbar-nav a {
		padding: 8px 7px;
		font-size: 12.5px;
	}
}
@media (max-width: 782px) {
	.chargeforms-topbar {
		padding: 8px 10px;
		gap: 6px;
	}
	.chargeforms-brand {
		margin-right: 4px;
	}
}

/* Buttons — recolor default WP buttons inside our pages toward the theme.
   Radius/padding corrected to the reference product's exact sourced button tokens
   (_element_ui_var.scss: $--button-border-radius = $--border-radius-base
   = 7px, i.e. --fc-radius-md here). the reference product's own `.el-button--primary` is
   a FLAT solid color, not a gradient, and its hover state
   ($primary-button-hover-bg: #1565C9, _variables.scss) is just a solid
   color swap with no lift/transform — corrected from the previous
   gradient + translateY(-1px) hover, which was an invented "premium"
   effect with no source basis. */
.chargeforms-wrap .button,
.chargeforms-wrap .button-primary,
.chargeforms-wrap .page-title-action {
	/* Padding sourced from Element UI's real medium-button tokens
	   ($--button-medium-padding-vertical: 10px, -horizontal: 20px,
	   _element_ui_var.scss — the reference product's own buttons mostly use size="medium")
	   — WP core's native .button default (~4px 10px, much shorter) was
	   left unoverridden before this, so buttons read noticeably more
	   compact/dense than the reference product's real ones. */
	padding: 10px 20px;
	line-height: 1.2;
	border-radius: var(--fc-radius-md);
	transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
.chargeforms-wrap .button-primary,
.chargeforms-wrap .page-title-action {
	background: var(--fc-primary);
	border-color: var(--fc-primary);
	color: #fff !important;
	text-decoration: none;
	box-shadow: none;
	text-shadow: none;
}
/* Explicit, not just inherited from the button's own color: #fff above —
   a blue icon on this same blue background is invisible, and inheritance
   alone wasn't reliably winning against whatever color a .dashicons glyph
   picks up elsewhere on the page. */
.chargeforms-wrap .button-primary .dashicons,
.chargeforms-wrap .page-title-action .dashicons {
	color: #fff !important;
}
.chargeforms-wrap .button-primary:hover,
.chargeforms-wrap .page-title-action:hover {
	background: var(--fc-primary-dark);
	border-color: var(--fc-primary-dark);
	color: #fff !important;
	box-shadow: none;
}
/* Secondary buttons (plain .button) — WP core's default is fine tonally,
   just needs the same radius/hover-feedback language as everything else. */
.chargeforms-wrap .button:not(.button-primary):hover {
	border-color: var(--fc-primary);
	color: var(--fc-primary-dark);
}
.chargeforms-wrap a {
	color: var(--fc-primary-dark);
}

/* Empty state */
.chargeforms-empty-state {
	background: var(--fc-surface);
	border: 1px solid var(--fc-border);
	border-radius: var(--fc-radius-lg);
	box-shadow: var(--fc-shadow-sm);
	padding: 56px 24px;
	text-align: center;
	margin-top: 16px;
}
.chargeforms-empty-state p {
	color: var(--fc-muted);
	font-size: 15px;
	margin-bottom: 16px;
}
.chargeforms-col-info {
	font-size: var(--fc-text-md);
	width: 14px;
	height: 14px;
	color: var(--fc-muted);
	cursor: help;
	vertical-align: text-bottom;
}
/* A bare 40px Dashicons glyph read as pixelated/crude at that size — the
   same "icon chip" treatment the builder's canvas empty-state already
   uses (a colored circle, a modestly-sized glyph inside it) instead of
   just blowing the raw icon font up. */
.chargeforms-empty-state > .dashicons {
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 16px;
	width: 64px;
	height: 64px;
	font-size: 28px;
	color: var(--fc-primary);
	background: var(--fc-primary-50);
	border-radius: var(--fc-radius-xl);
}
/* A smaller variant for empty states living inside an already-compact
   card slot (Reports' Country/Device cards) — the default's 56px
   vertical padding is sized for a full-width standalone empty page, not
   a card sharing a row with two others. */
.chargeforms-empty-state-compact {
	padding: 28px 20px;
	margin-top: 0;
	box-shadow: none;
	border: none;
	background: var(--fc-bg);
}
.chargeforms-empty-state-compact p {
	font-size: var(--fc-text-base);
	margin-bottom: 4px;
}
.chargeforms-empty-state-hint {
	font-size: 12px !important;
	color: var(--fc-muted);
	opacity: 0.85;
}

/* Tables — real values from the reference product's .ff-table-container (_table.scss):
   NO visible border around the table (`border: 1px solid $border-color`
   here was an invented boxed-grid look) — theirs is defined purely by a
   subtle shadow (`0px 1px 3px rgba(30,31,33,.08)`) and lives inside a
   padded container (10px 24px), same rhythm as .chargeforms-card above.
   Header cells have NO background fill and NO uppercase/letter-spacing —
   just dark text ($base-color) at font-weight 600, reduced top padding
   (padding-top: 0, padding-bottom: 8px) since the container already
   supplies the outer breathing room. Body-cell padding can't be copied
   literally to 0 the way the reference product's does (their `.cell` reset relies on
   Element UI's own internal `<el-table>` cell markup, which this native
   `<table>` doesn't have) — kept at a real value for cell readability,
   the one deliberate non-literal adaptation in this block. */
.chargeforms-wrap .wp-list-table {
	width: 100%;
	border: none;
	border-radius: var(--fc-radius-lg);
	overflow: hidden;
	box-shadow: 0 1px 3px rgba(30, 31, 33, 0.08);
	border-spacing: 0;
}
.chargeforms-wrap .wp-list-table thead th {
	background: transparent;
	color: var(--fc-text);
	font-size: var(--fc-text-sm);
	font-weight: 600;
	border-bottom: 1px solid var(--fc-border);
	padding: 0 10px 8px;
}
.chargeforms-wrap .wp-list-table.striped > tbody > tr:nth-child(odd) {
	background: color-mix(in srgb, var(--fc-bg) 40%, var(--fc-surface));
}
/* WP core's default row padding (~8px) reads as cramped once every other
   surface in the plugin (cards, stat tiles, list toolbars) uses a more
   generous 12-20px rhythm — and a hover highlight is standard practice for
   scannable data tables, giving a clear "this is the row I'm looking at"
   cue on wide tables with many columns (Forms, Entries). */
.chargeforms-wrap .wp-list-table td,
.chargeforms-wrap .wp-list-table th {
	padding: 12px 10px;
}
/* the reference product's real container padding is 10px 24px on the OUTER
   .ff-table-container, giving the first/last column real breathing room
   from the card edge — can't be replicated as literal padding on a plain
   <table> element (unreliable cross-browser), so applied to the edge
   cells instead for the same visual effect. */
.chargeforms-wrap .wp-list-table th:first-child,
.chargeforms-wrap .wp-list-table td:first-child {
	padding-left: 20px;
}
.chargeforms-wrap .wp-list-table th:last-child,
.chargeforms-wrap .wp-list-table td:last-child {
	padding-right: 20px;
}
.chargeforms-wrap .wp-list-table > tbody > tr {
	transition: background var(--fc-motion-fast) var(--fc-ease);
}
.chargeforms-wrap .wp-list-table > tbody > tr:hover {
	background: var(--fc-primary-soft);
}
.chargeforms-wrap .wp-list-table code {
	background: var(--fc-primary-soft);
	color: var(--fc-primary-dark);
	padding: 3px 8px;
	border-radius: var(--fc-radius-sm);
	font-size: var(--fc-text-sm);
}

/* List toolbar (Forms + Entries) */
.chargeforms-list-toolbar {
	display: flex;
	align-items: center;
	margin-bottom: 10px;
	flex-wrap: wrap;
	gap: 10px;
}
.chargeforms-toolbar-spacer {
	flex: 1;
}
.chargeforms-sortable-col {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	text-decoration: none;
	color: inherit;
	font-weight: inherit;
}
.chargeforms-sortable-col .chargeforms-sort-arrow {
	font-size: var(--fc-text-xs);
	opacity: 0.35;
}
.chargeforms-sortable-col.is-active .chargeforms-sort-arrow {
	opacity: 1;
	color: var(--fc-primary);
}
.chargeforms-filter-form {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}
.chargeforms-filter-form select {
	border: 1px solid var(--fc-border);
	border-radius: var(--fc-radius-md);
	padding: 6px 28px 6px 10px;
	font-size: var(--fc-text-base);
	background: var(--fc-surface) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none'><path d='M1 1L5 5L9 1' stroke='%23606266' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>") no-repeat right 10px center;
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	transition: border-color var(--fc-motion-fast) var(--fc-ease), box-shadow var(--fc-motion-fast) var(--fc-ease);
}
.chargeforms-filter-form select:hover {
	border-color: var(--fc-primary-100);
}
.chargeforms-filter-form select:focus {
	border-color: var(--fc-primary);
	box-shadow: 0 0 0 3px var(--fc-primary-50);
	outline: none;
}
.chargeforms-filter-btn {
	display: inline-flex !important;
	align-items: center;
	gap: 5px;
}
.chargeforms-filter-btn .dashicons {
	font-size: 15px;
	width: 15px;
	height: 15px;
}
.chargeforms-search-box {
	display: flex;
	align-items: center;
	gap: 4px;
	border: 1px solid var(--fc-border);
	border-radius: var(--fc-radius-md);
	padding: 0 10px;
	background: var(--fc-surface);
	transition: border-color var(--fc-motion-fast) var(--fc-ease), box-shadow var(--fc-motion-fast) var(--fc-ease);
}
.chargeforms-search-box .dashicons {
	color: var(--fc-muted);
	font-size: var(--fc-text-lg);
	width: 16px;
	height: 16px;
}
.chargeforms-search-box input[type="search"] {
	border: none;
	padding: 7px 4px;
	min-width: 200px;
	font-size: var(--fc-text-base);
	outline: none;
	background: none;
	/* Strip native type="search" chrome (Chrome/Edge draw their own
	   rounded box + cancel button for this input type by default) —
	   without this it visually fights with our own wrapper border,
	   especially on focus. */
	-webkit-appearance: none;
	appearance: none;
	box-shadow: none;
}
.chargeforms-search-box input[type="search"]::-webkit-search-decoration,
.chargeforms-search-box input[type="search"]::-webkit-search-cancel-button,
.chargeforms-search-box input[type="search"]::-webkit-search-results-button,
.chargeforms-search-box input[type="search"]::-webkit-search-results-decoration {
	-webkit-appearance: none;
	appearance: none;
}
.chargeforms-search-input {
	border: 1px solid var(--fc-border);
	border-radius: var(--fc-radius-md);
	padding: 7px 12px;
	min-width: 240px;
	font-size: var(--fc-text-base);
	transition: border-color var(--fc-motion-fast) var(--fc-ease), box-shadow var(--fc-motion-fast) var(--fc-ease);
}
.chargeforms-search-input:focus,
.chargeforms-search-box:focus-within {
	border-color: var(--fc-primary);
	box-shadow: 0 0 0 3px var(--fc-primary-50);
	outline: none;
}
.chargeforms-clear-filters {
	font-size: var(--fc-text-base);
	color: var(--fc-muted);
	text-decoration: underline;
}
.chargeforms-col-id {
	width: 60px;
	color: var(--fc-muted);
}

/* Toolbars (Forms list, Entries) on narrow screens — each control gets its
   own full-width row instead of a 200px search box squeezed next to two
   selects on a 320-375px phone. */
@media (max-width: 600px) {
	.chargeforms-list-toolbar,
	.chargeforms-filter-form {
		flex-direction: column;
		align-items: stretch;
	}
	.chargeforms-filter-form select,
	.chargeforms-search-box,
	.chargeforms-tabs {
		width: 100%;
	}
	.chargeforms-search-box input[type="search"] {
		min-width: 0;
		width: 100%;
	}
	.chargeforms-tabs {
		display: flex;
	}
	.chargeforms-tabs a {
		flex: 1;
		text-align: center;
	}
}

/* Wide tables scroll horizontally inside their own box instead of forcing
   the whole page to scroll (or squashing columns) on narrow screens. */
.chargeforms-table-scroll {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}
@media (max-width: 782px) {
	.chargeforms-table-scroll .wp-list-table {
		min-width: 640px;
	}
}

/* Tabs (Entries: All / Unread / Read / Favorites / Trash) — the mockup's
   own entryTabs spec is individual rounded pills (radius 999px, inactive
   fill #f2f2f2, active fill the accent violet), not a connected segmented
   control with dividers — corrected to match. */
/* Real fidelity gap found live (pixel comparison against the reference product's own
   All/Unread Only/Read Only control, its `el-radio-group`/`el-radio-button`
   Element UI component): the reference product renders this as ONE joined segmented
   control — a single shared outer border, flush buttons with only a
   1px divider between them, square corners except the two outer ends —
   not separate rounded pill buttons with gaps between them, which is what
   this used to be. Values (padding, radius) read directly off the live
   .el-radio-button__inner elements via getComputedStyle(), not guessed. */
.chargeforms-tabs {
	display: inline-flex;
	border: 1px solid var(--fc-border);
	border-radius: var(--fc-radius-md);
	overflow: hidden;
}
.chargeforms-tabs a {
	padding: 8px 16px;
	font-size: var(--fc-text-base);
	font-weight: 400;
	color: var(--fc-muted);
	text-decoration: none;
	background: var(--fc-surface);
	line-height: 1.3;
	white-space: nowrap;
	border-left: 1px solid var(--fc-border);
	margin-left: -1px;
}
.chargeforms-tabs a:first-child {
	border-left: none;
	margin-left: 0;
}
.chargeforms-tabs a.is-active {
	background: var(--fc-primary);
	color: #fff;
	font-weight: 500;
	border-left-color: var(--fc-primary);
	position: relative;
	z-index: 1;
}

/* Underline tabs — Reports (Overview/Payments/Submissions), Payment
   Settings/Payment Methods sub-tabs. A distinct, lighter component from
   the filled-pill .chargeforms-tabs above (Entries All/Unread/Read): plain
   text + a sliding underline on the active item, matching the real
   product's own convention for this specific kind of section-level tab. */
.chargeforms-underline-tabs {
	display: flex;
	align-items: center;
	gap: 4px;
	border-bottom: 1px solid var(--fc-border);
	margin-bottom: 20px;
}
.chargeforms-underline-tabs a,
.chargeforms-underline-tabs span.chargeforms-tabs-disabled {
	position: relative;
	padding: 10px 4px;
	margin-right: 20px;
	font-size: var(--fc-text-md);
	font-weight: 500;
	color: var(--fc-muted);
	text-decoration: none;
	background: none;
	border: none;
	transition: color 0.15s ease;
}
.chargeforms-underline-tabs a:hover {
	color: var(--fc-text);
}
.chargeforms-underline-tabs a.is-active {
	color: var(--fc-text);
	font-weight: 600;
}
.chargeforms-underline-tabs a.is-active::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px;
	height: 2px;
	background: var(--fc-primary);
	border-radius: 2px 2px 0 0;
}
.chargeforms-underline-tabs span.chargeforms-tabs-disabled {
	opacity: 0.55;
	cursor: default;
	padding: 10px 4px;
}

/* Pagination (Forms + Entries) */
.chargeforms-pagination {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 14px;
	padding: 10px 4px;
}
.chargeforms-pagination-total {
	color: var(--fc-muted);
	font-size: var(--fc-text-base);
}
.chargeforms-per-page-form select {
	border: 1px solid var(--fc-border);
	border-radius: 6px;
	padding: 5px 8px;
	font-size: var(--fc-text-base);
	background: #fff;
}
.chargeforms-pagination-nav {
	display: flex;
	align-items: center;
	gap: 8px;
}
.chargeforms-page-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border: 1px solid var(--fc-border);
	border-radius: 6px;
	background: #fff;
	color: var(--fc-text);
	text-decoration: none;
	font-size: var(--fc-text-lg);
}
.chargeforms-page-btn.is-disabled {
	opacity: 0.4;
	pointer-events: none;
}
.chargeforms-page-current {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 26px;
	height: 26px;
	background: var(--fc-primary);
	color: #fff;
	border-radius: 6px;
	font-size: var(--fc-text-base);
	padding: 0 6px;
}
.chargeforms-page-of {
	color: var(--fc-muted);
	font-size: var(--fc-text-base);
}
.chargeforms-page-number {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 28px;
	height: 28px;
	padding: 0 6px;
	border: 1px solid transparent;
	border-radius: 6px;
	color: var(--fc-text);
	text-decoration: none;
	font-size: var(--fc-text-base);
}
.chargeforms-page-number:hover {
	background: var(--fc-bg-soft);
}
.chargeforms-page-number.is-current {
	background: var(--fc-primary);
	border-color: var(--fc-primary);
	color: #fff;
	font-weight: 600;
}
.chargeforms-page-ellipsis {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 20px;
	color: var(--fc-muted);
}
.chargeforms-pagination-jumper {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-left: 8px;
	padding-left: 12px;
	border-left: 1px solid var(--fc-border);
	color: var(--fc-muted);
	font-size: var(--fc-text-base);
}
.chargeforms-pagination-jumper input[type="number"] {
	width: 48px;
	border: 1px solid var(--fc-border);
	border-radius: 6px;
	padding: 4px 6px;
	font-size: var(--fc-text-base);
	text-align: center;
}

/* Entries overview header actions — now a flex child of .chargeforms-page-head
   (title left / actions right, same row) rather than its own standalone
   section below the title, so no top/bottom margin of its own here; the
   parent's gap/margin already space it correctly against the title block. */
.chargeforms-entries-actions {
	display: flex;
	gap: 8px;
	align-items: center;
	flex-wrap: wrap;
}
.chargeforms-entries-actions .button .dashicons {
	font-size: 15px;
	width: 15px;
	height: 15px;
	vertical-align: text-bottom;
}
.chargeforms-entries-actions .button.is-active {
	background: var(--fc-primary);
	border-color: var(--fc-primary-dark);
	color: #fff;
}

/* Per-form Entries screen — header, toolbar, columns picker, Advanced
   Filter. Dynamic-column table (one column per real form field, not a
   fixed generic set), matching the real product's own per-form screen. */
.chargeforms-entries-form-head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--fc-space-4);
	margin: 20px 0 4px;
	flex-wrap: wrap;
}
.chargeforms-entries-form-head h1 {
	margin: 4px 0 0;
}
.chargeforms-entries-form-head-title h1 {
	margin: 0 0 3px;
}
.chargeforms-entries-form-subtitle {
	font-size: 13px;
	color: #606266;
}
.chargeforms-entries-stats {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 14px;
	margin: 0 0 18px;
}
.chargeforms-entries-stat-card {
	background: #fff;
	border: 1px solid #dadbdd;
	border-radius: 8px;
	padding: 16px 18px;
	box-shadow: var(--fc-shadow-xs);
	transition: box-shadow var(--fc-motion-fast, .15s) ease;
}
.chargeforms-entries-stat-card:hover {
	box-shadow: var(--fc-shadow-sm);
}
.chargeforms-entries-stat-label {
	font-size: 11px;
	font-weight: 700;
	color: #909399;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}
.chargeforms-entries-stat-value {
	font-size: 25px;
	font-weight: 700;
	letter-spacing: -0.02em;
	margin: 5px 0 2px;
	color: #1a1a1a;
}
.chargeforms-entries-stat-delta {
	font-size: 12px;
	color: #909399;
}
@media (max-width: 782px) {
	.chargeforms-entries-stats {
		grid-template-columns: repeat(2, 1fr);
	}
}
.chargeforms-entries-form-actions {
	display: flex;
	gap: 8px;
	flex-shrink: 0;
}
.chargeforms-entries-form-actions .button .dashicons {
	font-size: 15px;
	width: 15px;
	height: 15px;
	vertical-align: text-bottom;
}
.chargeforms-export-dropdown {
	position: relative;
}
.chargeforms-export-dropdown-toggle .dashicons-arrow-down-alt2 {
	font-size: var(--fc-text-sm);
	width: 12px;
	height: 12px;
	margin-left: -2px;
}
.chargeforms-export-dropdown-menu {
	position: absolute;
	top: calc(100% + 6px);
	right: 0;
	z-index: 200;
	min-width: 170px;
	background: #fff;
	border: 1px solid var(--fc-border);
	border-radius: 8px;
	box-shadow: var(--fc-shadow-hover);
	padding: 6px;
}
.chargeforms-export-dropdown-menu a {
	display: block;
	padding: 8px 10px;
	border-radius: 6px;
	font-size: var(--fc-text-base);
	color: var(--fc-text);
	text-decoration: none;
}
.chargeforms-export-dropdown-menu a:hover {
	background: var(--fc-bg-soft);
	color: var(--fc-primary-dark);
}

/* Form switcher + kebab menu (per-form Entries header) */
.chargeforms-form-switcher,
.chargeforms-kebab-menu {
	position: relative;
}
.chargeforms-form-switcher-menu,
.chargeforms-kebab-panel {
	position: absolute;
	top: calc(100% + 6px);
	right: 0;
	z-index: 200;
	min-width: 200px;
	max-height: 320px;
	overflow-y: auto;
	background: #fff;
	border: 1px solid var(--fc-border);
	border-radius: 8px;
	box-shadow: var(--fc-shadow-hover);
	padding: 6px;
}
.chargeforms-form-switcher-menu a,
.chargeforms-kebab-panel a {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 10px;
	border-radius: 6px;
	font-size: var(--fc-text-base);
	color: var(--fc-text);
	text-decoration: none;
}
.chargeforms-form-switcher-menu a:hover,
.chargeforms-kebab-panel a:hover {
	background: var(--fc-bg-soft);
	color: var(--fc-primary-dark);
}
.chargeforms-form-switcher-menu a.is-active {
	background: var(--fc-primary-soft);
	color: var(--fc-primary-dark);
	font-weight: 600;
}
.chargeforms-form-switcher-all {
	border-bottom: 1px solid var(--fc-border);
	border-radius: 0 !important;
	margin-bottom: 4px;
	padding-bottom: 10px !important;
}
.chargeforms-kebab-panel .dashicons {
	font-size: var(--fc-text-lg);
	width: 16px;
	height: 16px;
}

/* Sortable column headers */
.chargeforms-sortable-col {
	cursor: pointer;
	user-select: none;
}
.chargeforms-sort-icon {
	font-size: var(--fc-text-base);
	width: 13px;
	height: 13px;
	opacity: 0.4;
	vertical-align: text-bottom;
}
.chargeforms-sort-link {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	color: inherit;
	text-decoration: none;
}
.chargeforms-sort-link .dashicons {
	font-size: var(--fc-text-base);
	width: 13px;
	height: 13px;
	opacity: 0.4;
}
.chargeforms-sort-link.is-active .dashicons {
	opacity: 1;
	color: var(--fc-primary);
}

/* Footer: Compact View + fuller pagination bar */
.chargeforms-entries-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--fc-space-4);
	margin-top: var(--fc-space-4);
	flex-wrap: wrap;
}
.chargeforms-compact-view-toggle {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: var(--fc-text-sm);
	color: var(--fc-muted);
	cursor: pointer;
}
.chargeforms-entries-table.is-compact td,
.chargeforms-entries-table.is-compact th {
	padding: 5px 8px;
}
.chargeforms-pagination {
	display: flex;
	align-items: center;
	gap: var(--fc-space-3);
	flex-wrap: wrap;
}
.chargeforms-per-page-form select {
	margin: 0;
}
.chargeforms-pagination-links {
	display: flex;
	align-items: center;
	gap: 4px;
}
.chargeforms-pagination-links .button {
	min-width: 30px;
	padding: 0 6px;
	text-align: center;
}
.chargeforms-pagination-links .button.disabled {
	opacity: 0.4;
	pointer-events: none;
}
.chargeforms-pagination-current {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 28px;
	height: 28px;
	border-radius: 6px;
	background: var(--fc-primary);
	color: #fff;
	font-size: var(--fc-text-sm);
	font-weight: 700;
}
.chargeforms-goto-page-form {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: var(--fc-text-sm);
	color: var(--fc-muted);
}
.chargeforms-goto-page-form input[type="number"] {
	width: 56px;
	margin: 0;
}
.chargeforms-entries-search-form {
	display: inline-flex;
}

.chargeforms-entries-toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--fc-space-3);
	margin: 20px 0;
	flex-wrap: wrap;
}

/* Appears once at least one row checkbox is checked on Entries/Payments —
   the actual destination for the row-checkbox column, which previously led
   nowhere once selected. */
.chargeforms-bulk-bar {
	display: flex;
	align-items: center;
	gap: var(--fc-space-3);
	margin: 12px 0;
	padding: 10px 14px;
	background: var(--fc-primary-soft);
	border: 1px solid var(--fc-primary-100);
	border-radius: var(--fc-radius-md);
}
.chargeforms-bulk-bar[hidden] {
	display: none;
}
.chargeforms-bulk-bar-count {
	font-weight: 600;
	color: var(--fc-primary-dark);
}
.chargeforms-bulk-delete-btn.button {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--fc-danger);
	border-color: var(--fc-danger);
}
.chargeforms-bulk-delete-btn.button:hover {
	background: var(--fc-danger);
	border-color: var(--fc-danger);
	color: #fff;
}
.chargeforms-filter-toggle-btn.button {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}
.chargeforms-filter-toggle-btn[aria-expanded="true"] {
	background: var(--fc-primary-soft);
	border-color: var(--fc-primary-100);
	color: var(--fc-primary-dark);
}

/* Shared "premium toolbar button" treatment — every dropdown/toggle
   trigger in the Entries/Forms toolbars (Advanced Filter, Columns,
   Date Filter, Export, form switcher, kebab, refresh) gets the same
   subtle hover lift and consistent icon spacing, instead of each one
   inheriting bare WP-core .button defaults. */
.chargeforms-entries-toolbar .button,
.chargeforms-entries-form-actions .button,
.chargeforms-columns-toggle,
.chargeforms-export-dropdown-toggle,
.chargeforms-form-switcher-toggle,
.chargeforms-kebab-toggle {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.chargeforms-entries-toolbar .button:hover,
.chargeforms-entries-form-actions .button:hover,
.chargeforms-columns-toggle:hover,
.chargeforms-export-dropdown-toggle:hover,
.chargeforms-form-switcher-toggle:hover,
.chargeforms-kebab-toggle:hover {
	border-color: var(--fc-primary-100);
	color: var(--fc-primary-dark);
	box-shadow: 0 2px 8px rgba(90, 62, 224, 0.08);
	transform: translateY(-1px);
}
/* Any dropdown trigger whose panel is currently open reads as "active"
   the same way the Advanced Filter button already did, instead of
   looking identical to a closed one. */
.chargeforms-columns-picker:has(.chargeforms-columns-panel:not([hidden])) .chargeforms-columns-toggle,
.chargeforms-export-dropdown:has(.chargeforms-export-dropdown-menu:not([hidden])) .chargeforms-export-dropdown-toggle,
.chargeforms-form-switcher:has(.chargeforms-form-switcher-menu:not([hidden])) .chargeforms-form-switcher-toggle,
.chargeforms-kebab-menu:has(.chargeforms-kebab-panel:not([hidden])) .chargeforms-kebab-toggle {
	background: var(--fc-primary-soft);
	border-color: var(--fc-primary-100);
	color: var(--fc-primary-dark);
}
.chargeforms-kebab-toggle {
	padding-left: 8px;
	padding-right: 8px;
}
.chargeforms-kebab-toggle .dashicons {
	margin: 0;
}
.chargeforms-filter-count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	border-radius: 999px;
	background: var(--fc-primary);
	color: #fff;
	font-size: var(--fc-text-xs);
	font-weight: 700;
}
.chargeforms-entries-toolbar-right {
	display: flex;
	align-items: center;
	gap: 8px;
}
.chargeforms-columns-picker {
	position: relative;
}
.chargeforms-columns-panel {
	position: absolute;
	top: calc(100% + 6px);
	right: 0;
	z-index: 200;
	width: 240px;
	max-height: 320px;
	overflow-y: auto;
	background: #fff;
	border: 1px solid var(--fc-border);
	border-radius: 10px;
	box-shadow: var(--fc-shadow-hover);
	padding: var(--fc-space-3);
}
.chargeforms-columns-pin-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: var(--fc-text-sm);
	font-weight: 600;
	color: var(--fc-text);
	padding-bottom: var(--fc-space-2);
	margin-bottom: var(--fc-space-2);
	border-bottom: 1px solid var(--fc-border);
}
.chargeforms-columns-list {
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.chargeforms-columns-list label {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 6px 4px;
	border-radius: 6px;
	font-size: var(--fc-text-base);
	color: var(--fc-text);
	cursor: pointer;
}
.chargeforms-columns-list label:hover {
	background: var(--fc-bg-soft);
}

/* Advanced Filter panel */
/* Real values from the reference product's .ff_as_container / .ff_filter_help_bar
   (entries.scss) — no visible border on the outer panel (shadow-only,
   same "card" language as .chargeforms-card), and the help bar is a
   smaller, quieter light-blue notice than what was here before. */
.chargeforms-adv-filter {
	background: #fff;
	border: none;
	border-radius: var(--fc-radius-lg);
	box-shadow: 0 1px 3px rgba(30, 31, 33, 0.08);
	padding: 12px;
	margin-bottom: var(--fc-space-5);
}
.chargeforms-adv-filter-notice {
	display: flex;
	align-items: center;
	gap: 8px;
	background: #f4f8fb;
	border: 1px solid #dfe6ef;
	color: var(--fc-muted);
	font-size: var(--fc-text-xs);
	padding: 8px 12px;
	border-radius: var(--fc-radius-sm);
	margin-bottom: 10px;
}
.chargeforms-adv-filter-notice strong {
	color: var(--fc-primary-dark);
	font-weight: 700;
}
.chargeforms-adv-filter-notice .dashicons {
	font-size: var(--fc-text-lg);
	width: 16px;
	height: 16px;
	flex-shrink: 0;
}
.chargeforms-adv-filter-group {
	border: 1px solid var(--fc-border);
	border-radius: 8px;
	padding: var(--fc-space-3);
	margin-bottom: var(--fc-space-3);
	background: var(--fc-bg);
}
.chargeforms-adv-filter-group-or {
	text-align: center;
	font-size: var(--fc-text-xs);
	font-weight: 700;
	color: var(--fc-muted);
	letter-spacing: 0.05em;
	margin: var(--fc-space-2) 0;
}
.chargeforms-adv-filter-row {
	display: grid;
	grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1.4fr) auto;
	gap: 8px;
	margin-bottom: 8px;
	align-items: center;
}
.chargeforms-adv-filter-row:last-child {
	margin-bottom: 0;
}
.chargeforms-adv-filter-row select,
.chargeforms-adv-filter-row input[type="text"] {
	width: 100%;
	margin: 0;
}
.chargeforms-adv-filter-row-remove {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: 6px;
	border: 1px solid rgba(229, 72, 77, 0.3);
	background: rgba(229, 72, 77, 0.08);
	color: var(--fc-danger);
	cursor: pointer;
}
.chargeforms-adv-filter-row-remove:hover {
	background: var(--fc-danger);
	color: #fff;
}
.chargeforms-adv-filter-group-footer {
	display: flex;
	justify-content: flex-end;
	margin-top: 6px;
}
.chargeforms-adv-filter-actions {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	margin-bottom: var(--fc-space-3);
}
.chargeforms-adv-filter-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding-top: var(--fc-space-3);
	border-top: 1px solid var(--fc-border);
}

/* Entries table specifics */
.chargeforms-entries-table .check-column {
	width: 44px !important;
	min-width: 44px;
	box-sizing: border-box;
	padding: 10px 8px !important;
	text-align: center;
	vertical-align: middle;
}
.chargeforms-col-id {
	white-space: nowrap;
	min-width: 108px;
	box-sizing: border-box;
	padding-left: 16px !important;
	padding-right: 16px !important;
}
.chargeforms-col-actions {
	width: 90px;
}
.chargeforms-entries-table.chargeforms-pin-id-col .chargeforms-col-id,
.chargeforms-entries-table.chargeforms-pin-id-col td.chargeforms-col-id {
	position: sticky;
	left: 44px;
	background: #fff;
	z-index: 2;
	box-shadow: 2px 0 4px rgba(0, 0, 0, 0.04);
}
.chargeforms-entries-table.chargeforms-pin-id-col .check-column {
	position: sticky;
	left: 0;
	background: #fff;
	z-index: 2;
}

/* Entries "Filter" dropdown (date presets + custom range) */
.chargeforms-filter-dropdown {
	position: relative;
}
.chargeforms-filter-panel {
	position: absolute;
	top: calc(100% + 6px);
	right: 0;
	z-index: 50;
	background: #fff;
	border: 1px solid var(--fc-border);
	border-radius: 8px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
	padding: 16px;
	width: 260px;
}
.chargeforms-filter-radio {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 6px 0;
	font-size: var(--fc-text-base);
}
.chargeforms-filter-range {
	margin-top: 10px;
	padding-top: 10px;
	border-top: 1px solid var(--fc-border);
}
.chargeforms-filter-range span {
	font-size: var(--fc-text-sm);
	color: var(--fc-muted);
}
.chargeforms-filter-range-inputs {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-top: 6px;
}
.chargeforms-filter-range-inputs input[type="date"] {
	flex: 1;
	min-width: 0;
}
.chargeforms-filter-panel > form > .button {
	margin-top: 12px;
	margin-right: 6px;
}

/* Generic centered modal (Import Entries) */
.chargeforms-modal-overlay {
	position: fixed;
	inset: 0;
	background: rgba(15, 17, 21, 0.6);
	/* The actual CSS maximum -- other plugins' own toasts (Git Updater's
	   "Done.", LiteSpeed Cache's "Purged all caches successfully") were
	   still beating a merely-very-high value like 999999, so this stops
	   the z-index arms race outright: nothing can legally out-rank it.
	   Belt-and-suspenders with the JS side, which hides WP admin notices
	   outright while any ChargeForms modal is open — see admin.js. */
	z-index: 2147483647;
	display: flex;
	align-items: center;
	justify-content: center;
	animation: chargeforms-modal-fade var(--fc-motion-base) var(--fc-ease);
}
@keyframes chargeforms-modal-fade {
	from { opacity: 0; }
	to { opacity: 1; }
}
/* [hidden] and .chargeforms-modal-overlay both carry (0,1,0) specificity —
   without this, whichever rule is declared later in the stylesheet wins
   the tie, which would make display:flex above always beat the
   browser's own [hidden] { display: none } for any modal toggled via
   the hidden attribute rather than an inline style. Same bug already
   fixed once for .chargeforms-search-overlay. */
.chargeforms-modal-overlay[hidden] {
	display: none;
}
/* While any ChargeForms modal is open, admin notices from WordPress core
   or other plugins (cache-purge confirmations, update toasts, etc.) are
   hidden outright rather than just out-z-indexed — see the
   chargeforms-modal-open body class toggled in admin.js. A notice
   visually intruding into a confirmation dialog is confusing regardless
   of which layer technically wins. */
body.chargeforms-modal-open .notice,
body.chargeforms-modal-open #wpbody-content > div.updated,
body.chargeforms-modal-open #wpbody-content > div.error {
	display: none !important;
}
.chargeforms-modal {
	background: var(--fc-surface);
	border-radius: var(--fc-radius-xl);
	padding: 28px;
	width: 420px;
	max-width: 90vw;
	box-shadow: var(--fc-shadow-xl);
	animation: chargeforms-modal-pop var(--fc-motion-slow) var(--fc-ease);
}
/* Pro feature gate — matches the reference product's own pattern of a small inline "PRO"
   badge on a still-visible (not hidden) action, plus a lock-icon upsell
   block in place of the real feature when clicked. See
   the plugin's internal Pro-feature research doc and Settings::has_pro(). */
/* Template-card category tag + PAYMENT badge — matches the mockup's own
   tagStyle()/PAYMENT-badge spec on the New Form template grid. */
.chargeforms-template-tags {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 9px;
}
.chargeforms-template-cat-tag {
	font-size: 9.5px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	padding: 2px 7px;
	border-radius: 4px;
}
.chargeforms-template-payment-tag {
	font-size: 9.5px;
	font-weight: 700;
	color: var(--fc-primary);
	background: var(--fc-primary-50);
	padding: 2px 6px;
	border-radius: 4px;
}
.chargeforms-pro-badge-inline {
	display: inline-flex;
	align-items: center;
	margin-left: 6px;
	padding: 1px 6px;
	border-radius: var(--fc-radius-full, 999px);
	background: var(--fc-accent);
	color: #fff;
	font-size: 9.5px;
	font-weight: 700;
	letter-spacing: 0.04em;
	vertical-align: middle;
}
.chargeforms-pro-upsell {
	text-align: center;
	padding: 8px 4px 4px;
}
.chargeforms-pro-upsell-icon {
	font-size: 32px;
	width: 32px;
	height: 32px;
	color: var(--fc-accent);
	margin-bottom: 8px;
}
.chargeforms-pro-upsell p {
	color: var(--fc-text-secondary, #4b5565);
	margin: 0 0 16px;
}
@keyframes chargeforms-modal-pop {
	from { opacity: 0; transform: translateY(8px) scale(0.97); }
	to { opacity: 1; transform: translateY(0) scale(1); }
}
.chargeforms-modal h2 {
	margin-top: 0;
}
.chargeforms-confirm-modal {
	width: 400px;
	text-align: center;
	padding: 32px 28px 28px;
}
.chargeforms-confirm-modal .chargeforms-modal-head {
	justify-content: flex-end;
	margin-bottom: -8px;
}
.chargeforms-confirm-modal .chargeforms-modal-head h2 {
	display: none;
}
.chargeforms-confirm-modal-body {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	font-size: var(--fc-text-base, 13px);
	color: var(--fc-text);
	line-height: 1.5;
	margin: 4px 0 20px;
}
.chargeforms-confirm-modal-body .dashicons {
	flex-shrink: 0;
	font-size: 26px;
	width: 26px;
	height: 26px;
	color: var(--fc-surface);
	background: var(--fc-warning);
	border-radius: var(--fc-radius-circle);
	padding: 12px;
	box-sizing: content-box;
	box-shadow: 0 4px 14px rgba(240, 160, 32, 0.35);
}
.chargeforms-confirm-modal-body #chargeforms-delete-confirm-message {
	line-height: 1.55;
	color: var(--fc-text);
}
.chargeforms-confirm-modal .chargeforms-modal-actions {
	justify-content: center;
	width: 100%;
}
.chargeforms-confirm-modal .chargeforms-modal-actions .button {
	min-width: 110px;
}
.chargeforms-btn-danger {
	background: var(--fc-danger) !important;
	border-color: var(--fc-danger) !important;
	color: #fff !important;
}
.chargeforms-btn-danger:hover {
	background: #e5493d !important;
	border-color: #e5493d !important;
	color: #fff !important;
}
.chargeforms-browser-cell {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: var(--fc-text-sm);
	color: var(--fc-muted);
	max-width: 220px;
}
.chargeforms-browser-icon {
	flex-shrink: 0;
	font-size: 15px;
	width: 15px;
	height: 15px;
	color: var(--fc-primary);
	opacity: 0.7;
}

/* Entries table row actions — small circular icon buttons with a tooltip,
   replacing plain "Mark Read | Delete" text links for a more polished,
   premium-app feel consistent with the Reports page's icon language. */
.chargeforms-row-actions {
	display: flex;
	align-items: center;
	gap: 6px;
}
.chargeforms-icon-action {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	padding: 0;
	border: none;
	border-radius: 8px;
	color: var(--fc-muted);
	background: var(--fc-bg);
	text-decoration: none;
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.chargeforms-icon-action .dashicons,
.chargeforms-icon-action svg {
	font-size: 15px;
	width: 15px;
	height: 15px;
}
/* Lucide has no separate filled/outline star icon (unlike the old
   dashicons-star-filled/star-empty pair) — .is-starred fills the same
   outline glyph with currentColor instead of swapping icons. */
svg.chargeforms-icon-star.is-starred {
	color: var(--fc-warning, #fcbe2d);
	fill: currentColor;
}
.chargeforms-icon-action:hover {
	background: var(--fc-primary-soft);
	color: var(--fc-primary-dark);
	transform: translateY(-1px);
}
.chargeforms-icon-action.is-danger:hover {
	background: rgba(229, 72, 77, 0.12);
	color: var(--fc-danger);
}
/* Entries table row actions — always-visible solid squares (not the
   hover-only tint above), a compact icon-button row that reads as a
   deliberate action bar. */
.chargeforms-row-actions-icons {
	display: flex;
	gap: 8px;
	justify-content: flex-end;
}
.chargeforms-row-actions-icons .chargeforms-icon-action {
	width: 32px;
	height: 32px;
	border-radius: 9px;
	background: var(--fc-primary-soft);
	color: var(--fc-primary);
	box-shadow: 0 1px 2px rgba(90, 62, 224, 0.06);
	transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease, transform 0.12s ease;
}
.chargeforms-row-actions-icons .chargeforms-icon-action .dashicons {
	font-size: var(--fc-text-lg);
	width: 16px;
	height: 16px;
}
.chargeforms-row-actions-icons .chargeforms-icon-action:hover {
	transform: translateY(-1px) scale(1.05);
}
.chargeforms-row-actions-icons .chargeforms-icon-action:active {
	transform: translateY(0) scale(0.96);
}
.chargeforms-row-actions-icons .chargeforms-icon-action.is-view:hover {
	background: var(--fc-primary);
	color: #fff;
	box-shadow: 0 4px 10px rgba(90, 62, 224, 0.28);
}
.chargeforms-row-actions-icons .chargeforms-icon-action.is-delete {
	background: rgba(229, 72, 77, 0.12);
	color: var(--fc-danger);
	box-shadow: 0 1px 2px rgba(229, 72, 77, 0.08);
}
.chargeforms-row-actions-icons .chargeforms-icon-action.is-delete:hover {
	background: var(--fc-danger);
	color: #fff;
	box-shadow: 0 4px 10px rgba(229, 72, 77, 0.32);
}

/* Status pill dot — a small solid circle matching the pill's own color,
   giving each status a quick-scan visual anchor beyond text alone. */
.chargeforms-status-dot {
	display: inline-block;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: currentColor;
	margin-right: 5px;
	vertical-align: middle;
}

/* Status badges (Forms list) */
.chargeforms-status {
	display: inline-block;
	padding: 3px 10px;
	border-radius: 999px;
	font-size: var(--fc-text-sm);
	font-weight: 500;
	background: #e6f7ee;
	color: #1a7f4e;
}
.chargeforms-status-draft {
	background: #f1eee6;
	color: #8a8060;
}
.chargeforms-status-unread {
	background: var(--fc-primary-soft);
	color: var(--fc-primary-dark);
}
.chargeforms-cancel-subscription-link {
	display: inline-block;
	margin-left: 8px;
	font-size: var(--fc-text-sm);
	color: var(--fc-danger);
}
.chargeforms-cancel-subscription-link:hover {
	text-decoration: underline;
}
.chargeforms-status-read {
	background: #eef0f2;
	color: #5b6470;
}
/* Payments' "Succeeded" status — matches the mockup's Paid chip colors
   (a real gap: this had no color modifier at all before). */
.chargeforms-status-succeeded {
	background: var(--fc-success-soft);
	color: var(--fc-success-dark);
}
/* Payments table used bare default WP .wp-list-table styling (white
   header, no row hover) — a real gap against the mockup's own header/hover
   treatment, matching the same values already applied to the Forms List
   and Entries tables. */
.chargeforms-payments-table thead th {
	background: #ffffff;
}
.chargeforms-payments-table tbody tr:hover {
	background: var(--fc-primary-50);
}

/* Active/Inactive toggle switch (Forms list) */
.chargeforms-toggle {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	text-decoration: none;
	color: var(--fc-muted);
	font-size: var(--fc-text-sm);
}
.chargeforms-toggle-track {
	display: inline-block;
	width: 34px;
	height: 18px;
	border-radius: var(--fc-radius-full);
	background: var(--fc-border);
	position: relative;
	transition: background var(--fc-motion-base) var(--fc-ease);
	flex-shrink: 0;
}
.chargeforms-toggle:hover .chargeforms-toggle-track {
	background: var(--fc-muted-light);
}
.chargeforms-toggle.is-on:hover .chargeforms-toggle-track {
	background: var(--fc-success);
	filter: brightness(1.1);
}
.chargeforms-toggle-thumb {
	position: absolute;
	top: 2px;
	left: 2px;
	width: 14px;
	height: 14px;
	border-radius: var(--fc-radius-circle);
	background: var(--fc-surface);
	transition: left var(--fc-motion-base) var(--fc-ease), transform var(--fc-motion-fast) var(--fc-ease);
	box-shadow: var(--fc-shadow-xs);
}
.chargeforms-toggle:active .chargeforms-toggle-thumb {
	transform: scale(0.9);
}
.chargeforms-toggle.is-on .chargeforms-toggle-track {
	background: var(--fc-success);
}
.chargeforms-toggle.is-on .chargeforms-toggle-thumb {
	left: 18px;
}
.chargeforms-toggle.is-on .chargeforms-toggle-label {
	color: #1a7f4e;
	font-weight: 600;
}

.chargeforms-delete-link {
	color: var(--fc-danger);
}

/* Checkbox-backed toggle switch — Global Settings > Miscellaneous, etc. Distinct from .chargeforms-toggle above, which is an <a>-based toggle for the Forms list Active/Inactive control, not a form input. */
.chargeforms-switch {
	display: inline-flex;
	position: relative;
	cursor: pointer;
}
.chargeforms-switch input[type="checkbox"] {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
}
.chargeforms-switch-track {
	display: inline-block;
	width: 36px;
	height: 20px;
	border-radius: 999px;
	background: var(--fc-border);
	position: relative;
	transition: background 0.15s ease;
}
.chargeforms-switch-thumb {
	position: absolute;
	top: 2px;
	left: 2px;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: #fff;
	transition: left 0.15s ease;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}
.chargeforms-switch input:checked + .chargeforms-switch-track {
	/* Real color mismatch found live (user report): design_handoff_
	   chargeforms's own generator functions use two deliberately
	   different toggle colors for two different meanings — gTrack()
	   (violet, var(--fc-primary)) for a feature on/off preference like
	   these Global Settings switches, vs. track() (green, var(--fc-
	   success)) reserved for a record's own status (Forms List Active/
	   Inactive, Email Notifications Enabled) — a settings checkbox isn't
	   a status, so it should never have used the status color. */
	background: var(--fc-primary);
}
.chargeforms-switch input:checked + .chargeforms-switch-track .chargeforms-switch-thumb {
	left: 18px;
}
.chargeforms-switch input:focus-visible + .chargeforms-switch-track {
	outline: 2px solid var(--fc-primary);
	outline-offset: 2px;
}

/* Inline "not built yet" notice, matching the visual weight of the real product's own Pro-upsell banners without the fake paywall */
.chargeforms-pro-notice {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	background: var(--fc-primary-soft);
	border: 1px solid var(--fc-primary-100);
	border-radius: 8px;
	padding: 12px 16px;
	max-width: 520px;
}
.chargeforms-pro-notice .dashicons {
	color: var(--fc-primary);
	flex-shrink: 0;
}
.chargeforms-pro-notice strong {
	display: block;
}

.chargeforms-settings-subtabs {
	margin-bottom: 20px;
}
.chargeforms-tabs-disabled {
	padding: 7px 14px;
	font-size: var(--fc-text-base);
	color: var(--fc-muted);
	background: #fff;
	opacity: 0.6;
	cursor: default;
}
.chargeforms-role-checkboxes label {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-weight: 600;
}

/* New Form template picker */
/* Category filter pills — same pattern as the marketing site's own
   /templates gallery, so "Templates" reads as one consistent feature
   whether you're picking one in wp-admin or browsing them on the
   website. */
.chargeforms-template-categories {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 20px;
}
.chargeforms-template-category-btn {
	border: 1px solid var(--fc-border);
	background: #fff;
	color: var(--fc-muted);
	font-size: var(--fc-text-base);
	font-weight: 500;
	padding: 7px 16px;
	border-radius: 999px;
	cursor: pointer;
	transition: background 0.15s var(--fc-ease, ease), border-color 0.15s var(--fc-ease, ease), color 0.15s var(--fc-ease, ease);
}
.chargeforms-template-category-btn:hover {
	border-color: var(--fc-primary-100);
	color: var(--fc-text);
}
.chargeforms-template-category-btn.is-active {
	background: var(--fc-gradient-primary, var(--fc-primary));
	border-color: transparent;
	color: #fff;
}
.chargeforms-template-empty {
	color: var(--fc-muted);
	text-align: center;
	padding: 48px 0;
}

.chargeforms-template-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 16px;
	margin-top: 20px;
}
.chargeforms-template-card {
	background: #fff;
	border: 1px solid var(--fc-border);
	border-radius: 8px;
	box-shadow: var(--fc-card-shadow);
	padding: 28px 20px;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	transition: box-shadow 0.2s var(--fc-ease), transform 0.2s var(--fc-ease), border-color 0.2s var(--fc-ease);
}
/* Pro-gated template card — feature stays visible (honest about existing)
   with a small inline "PRO" badge next to its title; the action button
   becomes a direct Upgrade link instead of submitting the create form. See
   the plugin's internal Pro-feature research doc and Settings::has_pro(). */
.chargeforms-template-card.is-pro-locked {
	background: var(--fc-bg-soft, #f8f9fb);
}
.chargeforms-template-card.is-pro-locked h3 {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
	flex-wrap: wrap;
}
.chargeforms-template-card:hover {
	box-shadow: var(--fc-shadow-hover);
	border-color: var(--fc-primary-100);
	transform: translateY(-2px);
}
.chargeforms-template-card .dashicons {
	font-size: 30px;
	width: 56px;
	height: 56px;
	line-height: 56px;
	color: var(--fc-primary);
	background: var(--fc-primary-soft);
	border-radius: 50%;
	margin-bottom: 10px;
}
.chargeforms-template-card h3 {
	margin: 0;
	font-size: 15px;
}
.chargeforms-template-card p {
	color: var(--fc-muted);
	font-size: var(--fc-text-base);
	flex-grow: 1;
	margin: 0 0 16px;
}

.chargeforms-truncate {
	max-width: 220px;
	min-width: 60px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	cursor: default;
}

/* "Create A New Form" card picker */
.chargeforms-new-form-topbar {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 20px;
	flex-wrap: wrap;
}
.chargeforms-new-form-topbar h1 {
	margin: 0;
}
.chargeforms-new-form-topbar .chargeforms-page-subtitle {
	margin-bottom: 0;
}
.chargeforms-new-form-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 16px;
}
.chargeforms-new-form-card,
.chargeforms-new-form-card-btn {
	background: #fff;
	border: 1px solid var(--fc-border);
	border-radius: 8px;
	box-shadow: var(--fc-card-shadow);
	padding: 28px 20px;
	text-align: left;
	display: flex;
	flex-direction: column;
	gap: 6px;
	text-decoration: none;
	color: inherit;
	transition: box-shadow 0.2s var(--fc-ease), transform 0.2s var(--fc-ease), border-color 0.2s var(--fc-ease);
	cursor: pointer;
	width: 100%;
	font: inherit;
}
.chargeforms-new-form-card:hover,
.chargeforms-new-form-card-btn:hover {
	box-shadow: var(--fc-shadow-hover);
	border-color: var(--fc-primary-100);
	transform: translateY(-2px);
}
.chargeforms-new-form-card.is-disabled {
	cursor: default;
	opacity: 0.7;
}
.chargeforms-new-form-card.is-disabled:hover {
	box-shadow: var(--fc-card-shadow);
	transform: none;
}
.chargeforms-new-form-card-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: 10px;
	background: var(--fc-primary-soft);
	color: var(--fc-primary);
	margin-bottom: 10px;
}
.chargeforms-new-form-card-icon .dashicons {
	font-size: 26px;
	width: 26px;
	height: 26px;
}
.chargeforms-new-form-card-icon-dashed {
	background: transparent;
	border: 2px dashed var(--fc-border);
	color: var(--fc-muted);
}
.chargeforms-new-form-card-icon-ai {
	/* Violet-to-magenta rather than violet-to-violet — now that the brand
	   primary itself is violet, the old two-stop gradient here (primary to
	   a near-identical purple) had flattened into one flat color. A second,
	   genuinely different hue keeps this card reading as "a distinct,
	   AI-powered option" rather than just a slightly-off Blank/Template card. */
	background: linear-gradient(135deg, var(--fc-primary), #d6409f);
	color: #fff;
}
.chargeforms-new-form-card h3 {
	margin: 0;
	font-size: 15px;
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}
.chargeforms-new-form-card p {
	color: var(--fc-muted);
	font-size: var(--fc-text-base);
	margin: 0;
}
.chargeforms-badge-soon {
	font-size: var(--fc-text-2xs);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	background: #f4f5f6;
	color: var(--fc-muted);
	padding: 2px 8px;
	border-radius: 999px;
}
/** Payment gateway badge (Payments table "Source" column) — colored pill
   with the gateway's real brand color, same pill shape as the badges
   above, matching the reference product's own ff_badge_stripe/ff_badge_paypal
   convention (a colored text badge, not a full logo icon — the reference product itself
   doesn't render one there either). */
/* Mockup uses solid brand-color fills with white text, not soft tint
   badges — and PayPal's real navy (#003087), not a lighter blue. */
.chargeforms-gateway-badge {
	display: inline-block;
	font-size: 10px;
	font-weight: 700;
	color: #fff;
	padding: 3px 8px;
	border-radius: 999px;
}
.chargeforms-gateway-badge.is-stripe {
	background: #635bff;
}
.chargeforms-gateway-badge.is-paypal {
	background: #003087;
}
.chargeforms-badge-new {
	font-size: var(--fc-text-2xs);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	background: var(--fc-gradient-primary);
	color: #fff;
	padding: 2px 8px;
	border-radius: 999px;
}

/* Industry Packs — a highlighted entry point on the New Form screen
   (a subtle gradient border + tint, not a full repaint) so it reads as
   "worth a look" without competing with the primary Blank/Template
   cards for attention. */
.chargeforms-new-form-card-highlight {
	border-color: var(--fc-primary-100);
	background: linear-gradient(180deg, var(--fc-primary-soft) 0%, #fff 60%);
}
.chargeforms-new-form-card-highlight:hover {
	border-color: var(--fc-primary);
}
.chargeforms-new-form-card-icon-packs {
	background: var(--fc-gradient-primary);
	color: #fff;
}

/* Industry Packs — an accordion instead of a two-page drill-down
   (pack list -> separate pack-detail page). Every pack's templates are
   already in the DOM; expanding one is a class toggle, not a navigation,
   so browsing multiple packs back-to-back never re-triggers a page load. */
.chargeforms-pack-accordion {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-top: 20px;
}
.chargeforms-pack-section {
	background: #fff;
	border: 1px solid var(--fc-border);
	border-radius: 10px;
	box-shadow: var(--fc-card-shadow);
	overflow: hidden;
	transition: border-color 0.2s var(--fc-ease), box-shadow 0.2s var(--fc-ease);
}
.chargeforms-pack-section.is-expanded {
	border-color: var(--fc-primary-100);
	box-shadow: var(--fc-shadow-hover);
}
.chargeforms-pack-section-head {
	display: flex;
	align-items: center;
	gap: 16px;
	width: 100%;
	padding: 18px 20px;
	background: none;
	border: none;
	box-shadow: none;
	cursor: pointer;
	text-align: left;
	font: inherit;
}
.chargeforms-pack-card-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	flex-shrink: 0;
	border-radius: 12px;
	background: var(--fc-primary-soft);
	color: var(--fc-primary);
}
.chargeforms-pack-card-icon .dashicons {
	font-size: 22px;
	width: 22px;
	height: 22px;
}
.chargeforms-pack-section-title {
	flex: 1;
	min-width: 0;
}
.chargeforms-pack-section-title h3 {
	margin: 0;
	font-size: 15px;
}
.chargeforms-pack-section-title p {
	margin: 2px 0 0;
	color: var(--fc-muted);
	font-size: var(--fc-text-base);
}
.chargeforms-pack-card-count {
	font-size: var(--fc-text-sm);
	font-weight: 600;
	color: var(--fc-primary-dark);
	white-space: nowrap;
}
.chargeforms-pack-section-chevron {
	color: var(--fc-muted);
	transition: transform 0.2s var(--fc-ease);
	flex-shrink: 0;
}
.chargeforms-pack-section.is-expanded .chargeforms-pack-section-chevron {
	transform: rotate(180deg);
}
.chargeforms-pack-section-body {
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.25s var(--fc-ease);
}
.chargeforms-pack-section.is-expanded .chargeforms-pack-section-body {
	max-height: 2000px;
}
.chargeforms-pack-section-body .chargeforms-template-grid {
	margin: 0 20px 20px;
}

/* Builder page shell */
.chargeforms-back-link {
	display: inline-block;
	margin-bottom: 12px;
	text-decoration: none;
	color: var(--fc-muted, #606266);
}

/* Single entry detail view */
.chargeforms-entry-single-head {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px 16px;
	margin-bottom: 16px;
}
.chargeforms-entry-single-head .chargeforms-back-link {
	width: 100%;
	margin-bottom: 4px;
}
.chargeforms-entry-nav {
	margin-left: auto;
	display: flex;
	gap: 8px;
}
.chargeforms-entry-nav .button.disabled {
	opacity: 0.4;
	pointer-events: none;
}

.chargeforms-entry-single-grid {
	display: grid;
	grid-template-columns: minmax(0, 2fr) minmax(240px, 1fr);
	gap: 20px;
	align-items: start;
}
@media (max-width: 900px) {
	.chargeforms-entry-single-grid {
		grid-template-columns: 1fr;
	}
}

/* No hover state — verified against the reference product's real `.ff_card` (_card.scss):
   a static content container, never a link or button, gets no hover
   treatment at all. Every real usage of .chargeforms-card across the admin
   (Reports, Entries, Integrations, Form Settings — grep-confirmed) is a
   plain <div>, never an <a> or clickable element, so the hover-lift this
   previously had implied interactivity that never existed. */
.chargeforms-card {
	/* Corrected to the .dc.html mockup's own card spec (Email Summaries
	   screen and every other card instance): visible border in
	   --fc-border, not transparent — the earlier "the reference product's real .ff_card
	   source" reasoning was built from the wrong authority. Per the user's
	   explicit design-authority rule, the .dc.html mockups always win over
	   any reasoning about what a competitor's real source does. Padding
	   22px, shadow --fc-card-shadow (already the correct
	   `0 1px 3px rgba(15,23,42,.06), 0 1px 2px rgba(15,23,42,.04)`), radius
	   --fc-radius-lg (8px) — all already matched the mockup, only the
	   border was wrong. */
	background: var(--fc-surface);
	border: 1px solid var(--fc-border);
	border-radius: var(--fc-radius-lg);
	box-shadow: var(--fc-card-shadow);
	padding: 22px;
	margin-bottom: 16px;
}
.chargeforms-card h2 {
	/* Corrected to the mockup's own card-title spec: 15px/700, 3px bottom
	   margin, no divider border — the "the reference product's real card-title" 18px
	   bold-with-divider treatment this replaces was, like the border
	   above, built from the wrong source. */
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 15px;
	font-weight: 700;
	color: var(--fc-text);
	margin: 0 0 3px;
	padding-bottom: 0;
	border-bottom: none;
}
/* Charts/empty-states nested inside .chargeforms-card shouldn't double-box —
   the outer card already provides the border/shadow/background. */
.chargeforms-card .chargeforms-bar-chart,
.chargeforms-card .chargeforms-hbar-chart {
	background: none;
	border: none;
	box-shadow: none;
	padding: 0;
	margin: 0;
}
.chargeforms-card .chargeforms-empty-state {
	background: none;
	border: none;
	box-shadow: none;
	margin-top: 0;
}
.chargeforms-card-head {
	/* Corrected to match the mockup's card-head-with-action rows (e.g.
	   Email Summaries' "What gets sent" + "Send me a test" button):
	   `gap:10px; margin-bottom:3px`, no divider. Same source-authority
	   correction as .chargeforms-card above. */
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-bottom: 3px;
	padding-bottom: 0;
	border-bottom: none;
}
.chargeforms-card-head h2 {
	font-size: 15px;
	font-weight: 700;
	color: var(--fc-text);
	margin: 0;
	padding: 0;
	border: none;
}
/* Email Delivery's intro card — frames the SMTP feature as a real,
   built-in, free capability (not a Pro upsell) rather than starting
   straight on a bare settings form. */
.chargeforms-ed-intro {
	display: flex;
	align-items: flex-start;
	gap: 14px;
}
.chargeforms-ed-intro-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	flex-shrink: 0;
	border-radius: var(--fc-radius-lg);
	background: var(--fc-primary-soft);
	color: var(--fc-primary);
}
.chargeforms-ed-intro-body h2 {
	display: flex;
	align-items: center;
	gap: 9px;
	font-size: 16px;
	font-weight: 700;
	color: var(--fc-text);
	margin: 0 0 6px;
}
.chargeforms-ed-intro-body p {
	margin: 0;
	font-size: var(--fc-text-sm);
	color: var(--fc-muted);
	line-height: 1.55;
	max-width: 640px;
}

/* ------------------------------------------------------------------
 * Email Summaries — "What gets sent" preview card. Was a wall of
 * ~40 inline style="" attributes producing this exact same result;
 * extracted to real classes for the same reason any of this plugin's
 * other screens use classes over inline styles — maintainable, and
 * consistent with how every sibling screen (Email Delivery included)
 * is actually built. Visual output unchanged, plus a small amount of
 * genuine polish (a real shadow and CTA hover) inline styles made
 * more awkward to add consistently.
 * ------------------------------------------------------------------ */

.chargeforms-summary-sent-banner {
	margin: 0 0 16px;
	padding: 10px 13px;
	border-radius: var(--fc-radius-md);
	background: var(--fc-success-soft);
	color: var(--fc-success-dark);
	font-size: var(--fc-text-sm);
	font-weight: 600;
}

.chargeforms-summary-test-btn {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 7px 13px;
	border: 1px solid var(--fc-border);
	border-radius: var(--fc-radius-md);
	background: var(--fc-surface);
	color: var(--fc-muted);
	font-size: 12.5px;
	font-weight: 600;
	cursor: pointer;
	transition: border-color .12s ease, color .12s ease;
}
.chargeforms-summary-test-btn:hover {
	border-color: var(--fc-primary);
	color: var(--fc-primary);
}

.chargeforms-summary-lede {
	margin: 0 0 16px;
}

.chargeforms-summary-mockup {
	border: 1px solid #e8e9eb;
	border-radius: 9px;
	overflow: hidden;
	background: #f7f7f9;
}

.chargeforms-summary-mockup-bar {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 9px 13px;
	background: #fff;
	border-bottom: 1px solid #e8e9eb;
}
.chargeforms-summary-mockup-label {
	font-size: 11.5px;
	color: var(--fc-muted-light);
}
.chargeforms-summary-mockup-subject {
	font-size: 12px;
	font-weight: 600;
}
.chargeforms-summary-mockup-attach {
	margin-left: auto;
	display: flex;
	align-items: center;
	gap: 5px;
	font-size: 10.5px;
	font-weight: 600;
	color: var(--fc-muted);
	background: var(--fc-bg);
	padding: 3px 8px;
	border-radius: 999px;
}

.chargeforms-summary-preview-wrap {
	padding: 16px;
	display: flex;
	justify-content: center;
}

.chargeforms-summary-preview {
	width: 100%;
	max-width: 460px;
	background: #fff;
	border: 1px solid #e8e9eb;
	border-radius: 8px;
	overflow: hidden;
	box-shadow: 0 1px 2px rgba(20, 18, 40, .04), 0 8px 22px -12px rgba(20, 18, 40, .14);
}

.chargeforms-summary-preview-head {
	background: var(--fc-primary);
	padding: 18px 20px;
}
.chargeforms-summary-preview-brand {
	font-size: 15px;
	font-weight: 700;
	color: #fff;
}
.chargeforms-summary-preview-tag {
	font-size: 11.5px;
	color: #d9cffd;
	margin-top: 2px;
}

.chargeforms-summary-preview-total {
	padding: 20px;
	text-align: center;
	border-bottom: 1px solid var(--fc-border-light);
}
.chargeforms-summary-preview-total-num {
	font-size: 32px;
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1;
	font-variant-numeric: tabular-nums;
}
.chargeforms-summary-preview-total-label {
	font-size: 12px;
	color: var(--fc-muted-light);
	margin-top: 5px;
}

.chargeforms-summary-preview-rows {
	padding: 4px 20px 16px;
}
.chargeforms-summary-preview-row {
	display: flex;
	font-size: 12.5px;
	padding: 8px 0;
	border-top: 1px solid #f6f6f7;
}
.chargeforms-summary-preview-row.is-head {
	font-size: 10.5px;
	font-weight: 700;
	color: var(--fc-faint);
	text-transform: uppercase;
	letter-spacing: .05em;
	padding: 11px 0 8px;
	border-top: 0;
}
.chargeforms-summary-preview-row span:nth-child(1) { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chargeforms-summary-preview-row span:nth-child(2) { width: 62px; text-align: right; }
.chargeforms-summary-preview-row span:nth-child(3) { width: 68px; text-align: right; }
.chargeforms-summary-preview-form { font-weight: 400; }
.chargeforms-summary-preview-week { font-weight: 600; }
.chargeforms-summary-preview-all { color: var(--fc-muted-light); }

.chargeforms-summary-preview-cta-row {
	text-align: center;
	margin-top: 18px;
}
.chargeforms-summary-preview-cta {
	display: inline-block;
	background: var(--fc-primary);
	color: #fff;
	font-size: 12.5px;
	font-weight: 600;
	padding: 10px 22px;
	border-radius: 7px;
	transition: filter .12s ease;
}
/* A mockup element, not a real link — this preview shows what the EMAIL
   looks like, and clicking it here wouldn't go anywhere meaningful. The
   hover still responds, so the card doesn't read as broken/dead on
   pointer-over, just doesn't pretend to be a functioning button. */
.chargeforms-summary-preview:hover .chargeforms-summary-preview-cta {
	filter: brightness(1.06);
}

.chargeforms-summary-preview-footer {
	padding: 12px 20px;
	background: #fafafa;
	border-top: 1px solid var(--fc-border-light);
	font-size: 10.5px;
	color: var(--fc-faint);
	line-height: 1.5;
	text-align: center;
}

/* Shared text/select/email input treatment — sourced from the Email
   Summaries mockup's own inline input styles (border #dadbdd/7px radius,
   9px 11px padding, 13px text). Global Settings screens were previously
   relying on unstyled default WP .form-table inputs, a real visual gap
   against every styled input the .dc.html mockups show. */
.chargeforms-form-input,
.chargeforms-form-select {
	width: 100%;
	max-width: 380px;
	padding: 9px 11px;
	border: 1px solid var(--fc-border);
	border-radius: var(--fc-radius-md);
	font-size: var(--fc-text-base);
	background: var(--fc-surface);
	outline: none;
}
.chargeforms-form-label {
	display: block;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--fc-muted);
	margin-bottom: 6px;
}
.chargeforms-form-row {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 13px 0;
	border-top: 1px solid var(--fc-border-light);
}
.chargeforms-form-row:first-of-type {
	border-top: none;
}
.chargeforms-form-row-title {
	font-size: var(--fc-text-sm);
	font-weight: 600;
	color: var(--fc-text);
}
.chargeforms-form-row-desc {
	font-size: var(--fc-text-xs);
	color: var(--fc-muted-light);
}
.chargeforms-entry-edit-actions {
	margin-top: 16px;
}
.chargeforms-edit-radio-option {
	display: block;
	font-weight: 400;
	margin-bottom: 4px;
}

.chargeforms-entry-data-table {
	width: 100%;
	border-collapse: collapse;
}
.chargeforms-entry-data-table th,
.chargeforms-entry-data-table td {
	text-align: left;
	padding: 10px 0;
	border-bottom: 1px solid var(--fc-border);
	vertical-align: top;
}
.chargeforms-entry-data-table th {
	width: 220px;
	color: var(--fc-muted, #606266);
	font-weight: 600;
	font-size: var(--fc-text-base);
}
.chargeforms-entry-data-table tr:last-child th,
.chargeforms-entry-data-table tr:last-child td {
	border-bottom: none;
}

.chargeforms-entry-sidebar .chargeforms-card:last-child {
	margin-bottom: 0;
}
.chargeforms-meta-list {
	margin: 0;
	font-size: var(--fc-text-base);
}
.chargeforms-meta-list dt {
	color: var(--fc-muted, #606266);
	margin-bottom: 2px;
}
.chargeforms-meta-list dd {
	margin: 0 0 14px;
	font-weight: 500;
}
.chargeforms-meta-list dd:last-child {
	margin-bottom: 0;
}
.chargeforms-meta-wrap {
	word-break: break-word;
	font-weight: 400 !important;
}

/* Entry single-view breadcrumb */
.chargeforms-entry-breadcrumb {
	font-size: var(--fc-text-base);
	color: var(--fc-muted);
	margin-bottom: 10px;
}
.chargeforms-entry-breadcrumb a {
	color: var(--fc-primary);
	text-decoration: none;
}
.chargeforms-breadcrumb-sep {
	margin: 0 6px;
}
.chargeforms-breadcrumb-current {
	color: var(--fc-text);
	font-weight: 500;
}

/* Form Entry Data card header controls (star, show-empty toggle, edit) */
.chargeforms-entry-data-controls {
	display: flex;
	align-items: center;
	gap: 10px;
}
.chargeforms-icon-action.is-active {
	color: #dd8f10;
	background: rgba(245, 166, 35, 0.14);
}
.chargeforms-show-empty-toggle {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: var(--fc-text-sm);
	font-weight: 400;
	color: var(--fc-muted);
	white-space: nowrap;
}

/* Form Entry Data field list — label above value with a thin divider,
   replacing the old two-column table for a cleaner, more scannable read
   on both wide and narrow screens. */
.chargeforms-entry-field-row {
	padding: 12px 0;
	border-bottom: 1px solid var(--fc-border);
}
.chargeforms-entry-field-row:last-child {
	border-bottom: none;
}
.chargeforms-entry-field-row.is-empty {
	display: none;
}
.chargeforms-entry-field-list.chargeforms-show-empty .chargeforms-entry-field-row.is-empty {
	display: block;
}
.chargeforms-entry-json-view {
	width: 100%;
	min-height: 360px;
	font-family: Consolas, Monaco, "Courier New", monospace;
	font-size: var(--fc-text-sm);
	line-height: 1.6;
	color: var(--fc-text);
	background: var(--fc-bg);
	border: 1px solid var(--fc-border);
	border-radius: var(--fc-radius-md);
	padding: 12px 14px;
	resize: vertical;
}
.chargeforms-entry-field-label {
	font-size: var(--fc-text-sm);
	font-weight: 700;
	color: var(--fc-text);
	margin-bottom: 4px;
}
.chargeforms-entry-field-value {
	font-size: var(--fc-text-base);
	color: var(--fc-muted);
	word-break: break-word;
}
.chargeforms-entry-field-image {
	max-width: 240px;
	max-height: 160px;
	border-radius: 6px;
	border: 1px solid var(--fc-border);
	display: block;
}

/* Submission Notes */
.chargeforms-notes-empty {
	color: var(--fc-muted);
	font-size: var(--fc-text-base);
}
.chargeforms-notes-list {
	list-style: none;
	margin: 0 0 14px;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.chargeforms-note-item {
	background: var(--fc-bg);
	border-radius: 8px;
	padding: 10px 12px;
}
.chargeforms-note-meta {
	display: flex;
	justify-content: space-between;
	font-size: var(--fc-text-sm);
	color: var(--fc-muted);
	margin-bottom: 4px;
}
.chargeforms-note-item p {
	margin: 0;
	font-size: var(--fc-text-base);
	color: var(--fc-text);
}
.chargeforms-add-note-form {
	display: flex;
	flex-direction: column;
	gap: 8px;
	align-items: flex-start;
}
.chargeforms-add-note-form textarea {
	width: 100%;
}

/* Submission Logs */
.chargeforms-log-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.chargeforms-log-item {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 0;
	border-bottom: 1px solid var(--fc-border);
	font-size: var(--fc-text-base);
}
.chargeforms-log-item:last-child {
	border-bottom: none;
}
.chargeforms-log-item .dashicons {
	color: var(--fc-muted);
	font-size: 15px;
	width: 15px;
	height: 15px;
	flex-shrink: 0;
}
.chargeforms-log-message {
	flex: 1;
	color: var(--fc-text);
}
.chargeforms-log-meta {
	font-size: var(--fc-text-xs);
	color: var(--fc-muted);
	white-space: nowrap;
}

/* Submission Info sidebar — Edit + Change status dropdown */
.chargeforms-entry-info-actions {
	display: flex;
	gap: 8px;
	margin-top: 16px;
	padding-top: 16px;
	border-top: 1px solid var(--fc-border);
}
.chargeforms-status-dropdown {
	position: relative;
	flex: 1;
}
.chargeforms-status-dropdown-btn,
#chargeforms-status-dropdown-btn {
	width: 100%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
}
.chargeforms-status-dropdown-menu {
	position: absolute;
	top: calc(100% + 6px);
	right: 0;
	z-index: 50;
	background: var(--fc-surface);
	border: 1px solid var(--fc-border);
	border-radius: var(--fc-radius-lg);
	box-shadow: var(--fc-shadow-lg);
	padding: 6px;
	min-width: 140px;
	animation: fc-dropdown-in var(--fc-motion-fast) var(--fc-ease);
	transform-origin: top right;
}
@keyframes fc-dropdown-in {
	from { opacity: 0; transform: translateY(-4px) scale(0.98); }
	to { opacity: 1; transform: translateY(0) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
	.chargeforms-status-dropdown-menu {
		animation: none;
	}
}
.chargeforms-status-dropdown-menu a {
	display: block;
	padding: 7px 10px;
	border-radius: var(--fc-radius-md);
	font-size: var(--fc-text-base);
	color: var(--fc-text);
	text-decoration: none;
	transition: background var(--fc-motion-fast) var(--fc-ease), color var(--fc-motion-fast) var(--fc-ease);
}
.chargeforms-status-dropdown-menu a:hover {
	background: var(--fc-primary-soft);
	color: var(--fc-primary-dark);
}

/* Modal header/body additions shared by the Resend Notification and Entry
   Actions modals — built on the existing .chargeforms-modal component. */
.chargeforms-modal-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 16px;
}
.chargeforms-modal-head h2 {
	margin: 0;
	font-size: var(--fc-text-lg);
}
.chargeforms-modal-close {
	background: none;
	border: none;
	font-size: 20px;
	line-height: 1;
	color: var(--fc-muted);
	cursor: pointer;
	padding: 4px;
}
.chargeforms-modal-close:hover {
	color: var(--fc-text);
}
.chargeforms-modal-field {
	margin: 0 0 14px;
}
.chargeforms-modal-field label {
	display: block;
	font-size: var(--fc-text-sm);
	font-weight: 600;
	color: var(--fc-muted);
	margin-bottom: 6px;
}
.chargeforms-modal-field select {
	width: 100%;
}
.chargeforms-segmented {
	display: inline-flex;
	border: 1px solid var(--fc-border);
	border-radius: 6px;
	overflow: hidden;
}
.chargeforms-segmented button {
	padding: 8px 14px;
	font-size: var(--fc-text-base);
	background: #fff;
	border: none;
	border-right: 1px solid var(--fc-border);
	cursor: pointer;
	color: var(--fc-text);
}
.chargeforms-segmented button:last-child {
	border-right: none;
}
.chargeforms-segmented button.is-active {
	background: var(--fc-text);
	color: #fff;
}
/* .chargeforms-segmented also doubles as a label-based radio group (the
   Notification editor's "Send To" choice) — same chip look, driven by
   :has() instead of a JS-toggled .is-active class where supported, with
   .is-active kept in sync by JS as a fallback for browsers without :has(). */
.chargeforms-segmented label {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 14px;
	font-size: var(--fc-text-base);
	background: #fff;
	border-right: 1px solid var(--fc-border);
	cursor: pointer;
	color: var(--fc-text);
}
.chargeforms-segmented label:last-child {
	border-right: none;
}
.chargeforms-segmented label input[type="radio"] {
	margin: 0;
}
.chargeforms-segmented label.is-active,
.chargeforms-segmented label:has(input:checked) {
	background: var(--fc-text);
	color: #fff;
}
.chargeforms-segmented label.is-disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

/* Notification editor — grouped cards + plain-language "what will happen"
   summary, replacing a flat form-table so the recipient/message/advanced
   hierarchy is visible at a glance instead of one undifferentiated list
   of rows. */
.chargeforms-notif-editor .chargeforms-back-link {
	display: inline-block;
	margin-bottom: 16px;
	font-size: var(--fc-text-sm);
}
.chargeforms-notif-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 14px;
}
.chargeforms-notif-name-input {
	flex: 1;
	font-size: var(--fc-text-lg);
	font-weight: 600;
	padding: 8px 10px;
	border: 1px solid transparent;
	border-radius: var(--fc-radius-md);
	background: transparent;
}
.chargeforms-notif-name-input:hover,
.chargeforms-notif-name-input:focus {
	border-color: var(--fc-border);
	background: #fff;
}
.chargeforms-notif-status-switch {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	flex-shrink: 0;
	font-size: var(--fc-text-sm);
	font-weight: 600;
	color: var(--fc-muted);
}
.chargeforms-notif-summary {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	margin: 0 0 20px;
	padding: 12px 14px;
	border-radius: var(--fc-radius-md);
	background: var(--fc-primary-soft);
	color: var(--fc-primary-dark);
	font-size: var(--fc-text-base);
}
.chargeforms-notif-summary svg {
	flex-shrink: 0;
	margin-top: 2px;
}
.chargeforms-notif-summary.is-incomplete {
	background: var(--fc-warning-soft);
	color: var(--fc-warning-dark);
}
.chargeforms-notif-section {
	padding: 18px 0;
	border-top: 1px solid var(--fc-border);
}
.chargeforms-notif-section h3 {
	margin: 0 0 12px;
	font-size: var(--fc-text-base);
	font-weight: 600;
}
.chargeforms-notif-field-row {
	margin-top: 14px;
}
.chargeforms-notif-field-row > label {
	display: block;
	font-size: var(--fc-text-sm);
	font-weight: 600;
	color: var(--fc-muted);
	margin-bottom: 6px;
}
.chargeforms-notif-merge-tags {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	margin-top: 10px;
}
.chargeforms-notif-merge-tags-label {
	font-size: var(--fc-text-xs);
	font-weight: 600;
	color: var(--fc-muted);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	margin-right: 2px;
}
.chargeforms-notif-merge-tags code {
	font-size: var(--fc-text-xs);
	background: var(--fc-bg);
	border: 1px solid var(--fc-border);
	border-radius: 999px;
	padding: 3px 9px;
	cursor: help;
}
.chargeforms-notif-advanced {
	padding: 14px 0 0;
	border-top: 1px solid var(--fc-border);
}
.chargeforms-notif-advanced summary {
	cursor: pointer;
	font-weight: 600;
	font-size: var(--fc-text-base);
	list-style: none;
	display: flex;
	align-items: center;
	gap: 8px;
}
.chargeforms-notif-advanced summary::-webkit-details-marker {
	display: none;
}
.chargeforms-notif-advanced summary::before {
	content: '\25B8';
	display: inline-block;
	transition: transform var(--fc-motion-fast) var(--fc-ease);
}
.chargeforms-notif-advanced[open] summary::before {
	transform: rotate(90deg);
}
.chargeforms-notif-save-row {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 20px;
	padding-top: 20px;
	border-top: 1px solid var(--fc-border);
}
.chargeforms-notif-test-form {
	margin-top: 14px;
}

/* Notification list */
.chargeforms-notif-table {
	width: 100%;
	border-collapse: collapse;
}
.chargeforms-notif-table th {
	text-align: left;
	font-size: var(--fc-text-xs);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--fc-muted);
	padding: 10px 12px;
	border-bottom: 1px solid var(--fc-border);
}
.chargeforms-notif-table td {
	padding: 12px;
	font-size: var(--fc-text-base);
	border-bottom: 1px solid var(--fc-border);
	vertical-align: middle;
}
.chargeforms-notif-recipient {
	color: var(--fc-muted);
	font-size: var(--fc-text-sm);
}
.chargeforms-notif-recipient-incomplete {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	color: var(--fc-warning-dark);
	background: var(--fc-warning-soft);
	border-radius: 999px;
	padding: 3px 10px;
	font-size: var(--fc-text-xs);
	font-weight: 600;
}
.chargeforms-notif-recipient-incomplete svg {
	width: 12px;
	height: 12px;
}
.chargeforms-modal-actions {
	display: flex;
	justify-content: flex-end;
	gap: 8px;
	margin-top: 18px;
}
/* Reusable rich hover tooltip — CSS-only (no JS positioning to get
   wrong), a real styled callout instead of the browser's own plain,
   delayed [title] tooltip. Put the display text in data-tooltip and an
   aria-label with the same content for assistive tech, since data-* isn't
   read by screen readers the way title normally would be. */
[data-tooltip] {
	position: relative;
}
[data-tooltip]:hover::after {
	content: attr(data-tooltip);
	position: absolute;
	bottom: 100%;
	left: 50%;
	transform: translateX(-50%) translateY(-6px);
	background: #1e1f21;
	color: #fff;
	padding: 6px 10px;
	border-radius: 6px;
	font-size: var(--fc-text-sm);
	font-weight: 500;
	line-height: 1.4;
	white-space: nowrap;
	box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18);
	z-index: 60;
	pointer-events: none;
	animation: fc-tooltip-in 0.12s var(--fc-ease, ease) forwards;
}
[data-tooltip]:hover::before {
	content: "";
	position: absolute;
	bottom: 100%;
	left: 50%;
	transform: translateX(-50%) translateY(1px);
	border: 5px solid transparent;
	border-top-color: #1e1f21;
	z-index: 60;
	pointer-events: none;
	animation: fc-tooltip-in 0.12s var(--fc-ease, ease) forwards;
}
@keyframes fc-tooltip-in {
	from { opacity: 0; transform: translateX(-50%) translateY(2px); }
	to { opacity: 1; transform: translateX(-50%) translateY(-6px); }
}
/* Real bug found live (user screenshot, both the Entries and Reports
   charts — they share .chargeforms-bar-col): the chart's own
   overflow-x:auto (needed so a 14-column chart scrolls instead of
   blowing the page out at narrow widths, see .chargeforms-bar-chart's own
   comment) clips this shared tooltip when it's centered over the FIRST or
   LAST column — a centered callout pokes past that column's own edge,
   landing in what the scroll container treats as clipped overflow, so it
   got cut off mid-word instead of showing in full. Anchoring the callout
   to the inside edge for exactly the two columns where this can happen
   keeps its whole box inside the scrollable content area.

   A plain `transform` override on ::after/::before isn't enough on its
   own: fc-tooltip-in's own keyframes still set `transform` every frame
   while the animation runs, and an animation's own keyframe values win
   over any other transform declaration on the same element for as long
   as it's running — so the inherited translateX(-50%) would silently
   undo the left:0/right:0 fix the instant the animation played. Giving
   these two cases their own keyframes (dropping translateX entirely,
   since left/right already position them) is what actually makes the fix
   stick, not just the static override above. */
/* :first-child alone silently never matched on any chart that also
   renders a y-axis-max label (Entries, Reports, Dashboard all do) —
   that label is DOM sibling #1, making the real first .chargeforms-bar-col
   sibling #2, so this whole edge-case fix was dead CSS there (confirmed
   live: the first bar's tooltip fell back to the centered rule and
   rendered its left few pixels — the entire first word — clipped past
   the chart's own edge). The adjacent-sibling case covers charts that
   render the axis-max label; the plain :first-child case still covers
   any chart that doesn't. */
.chargeforms-bar-col:first-child[data-tooltip]:hover::after,
.chargeforms-bar-chart-axis-max + .chargeforms-bar-col[data-tooltip]:hover::after {
	left: 0;
	animation-name: fc-tooltip-in-edge;
}
.chargeforms-bar-col:first-child[data-tooltip]:hover::before,
.chargeforms-bar-chart-axis-max + .chargeforms-bar-col[data-tooltip]:hover::before {
	left: 14px;
	animation-name: fc-tooltip-in-edge-arrow;
}
.chargeforms-bar-col:last-child[data-tooltip]:hover::after {
	left: auto;
	right: 0;
	animation-name: fc-tooltip-in-edge;
}
.chargeforms-bar-col:last-child[data-tooltip]:hover::before {
	left: auto;
	right: 14px;
	animation-name: fc-tooltip-in-edge-arrow;
}
@keyframes fc-tooltip-in-edge {
	from { opacity: 0; transform: translateY(2px); }
	to { opacity: 1; transform: translateY(-6px); }
}
@keyframes fc-tooltip-in-edge-arrow {
	from { opacity: 0; transform: translateY(2px); }
	to { opacity: 1; transform: translateY(1px); }
}
@keyframes fc-grow-width {
	from { width: 0; }
}
@keyframes fc-grow-height {
	from { height: 0; }
}
@keyframes fc-fade-in {
	from { opacity: 0; }
	to { opacity: 1; }
}

/* Reports */
.chargeforms-reports-subtabs {
	margin-bottom: 16px;
}
.chargeforms-reports-export {
	display: flex;
	justify-content: flex-end;
	gap: 8px;
	margin-bottom: 16px;
}
.chargeforms-reports-export .button .dashicons {
	font-size: var(--fc-text-lg);
	width: 16px;
	height: 16px;
	vertical-align: text-bottom;
}

/* Report category headers — grouping widgets by what they're actually
   about (trends, performance, audience, timing) instead of one
   undifferentiated stack of cards. Each gets its own small gradient icon
   badge so the sections are scannable at a glance while scrolling, the
   same way a real product's report groupings read. */
/* Icon-chip category header — matches the mockup's own "Key Metrics"/
   "Submission Trends" section headers (30x30 chip, 8px radius, ~10%-opacity
   accent tint, icon in the solid accent color, title 15px/700) rather than
   the plain-underlined-heading treatment this replaced. */
.chargeforms-reports-category {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 28px 0 12px;
}
.chargeforms-reports-category:first-of-type {
	margin-top: 0;
}
.chargeforms-reports-category-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: var(--fc-radius-md);
	flex-shrink: 0;
}
.chargeforms-reports-category-title {
	margin: 0;
	font-size: 15px;
	font-weight: 700;
	color: var(--fc-text);
}
.chargeforms-reports-category-desc {
	margin: 2px 0 0;
	font-size: var(--fc-text-xs);
	color: var(--fc-muted-light);
}

/* Custom line-icon set (Reports) — replaces WP-core dashicon glyphs so
   report surfaces don't read as generic wp-admin chrome. */
.chargeforms-icon-svg {
	width: 17px;
	height: 17px;
	display: block;
}

/* Stat tile change badges (Overview) */
/* Mockup's badge() is a filled pill (padding 2px 8px, radius 999px,
   text-on-tint colors), not plain colored text with no background — a
   real gap. Down uses a darker red (#c0392f on #ffe9e7), not the bright
   --fc-danger used for destructive actions elsewhere. */
.chargeforms-stat-change {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	font-size: 11.5px;
	font-weight: 600;
	margin-top: 2px;
	padding: 2px 8px;
	border-radius: 999px;
}
.chargeforms-stat-change .dashicons {
	font-size: var(--fc-text-sm);
	width: 12px;
	height: 12px;
}
.chargeforms-stat-change.is-up { color: var(--fc-success-dark); background: var(--fc-success-soft); }
.chargeforms-stat-change.is-down { color: #b3261e; background: #fbe9e7; }
.chargeforms-stat-change.is-flat { color: var(--fc-muted); background: var(--fc-bg); font-weight: 500; }

/* Overview chart legend + stacked multi-series bars */
.chargeforms-chart-legend {
	display: flex;
	align-items: center;
	gap: 4px;
	font-size: var(--fc-text-sm);
	color: var(--fc-muted);
}
.chargeforms-legend-dot {
	display: inline-block;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	margin-left: 10px;
}
.chargeforms-legend-dot:first-child { margin-left: 0; }
/* Colorblind-safe categorical triplet (validated: run
   dataviz/scripts/validate_palette.js "#0f9d70,#d97706,#2a78d6" — all
   checks pass) — replaces the previous --fc-success/--fc-warning/
   --fc-muted trio, which failed validation: --fc-warning (#fcbe2d) sat
   outside the safe lightness band and --fc-muted read as too
   desaturated to carry series identity once adjacent to it in the
   stack. */
.chargeforms-legend-dot.is-read { background: #0f9d70; }
.chargeforms-legend-dot.is-unread { background: #d97706; }
.chargeforms-legend-dot.is-pending { background: #2a78d6; }

/* A real stacked bar: .chargeforms-bar-group's own height is the day's
   total (as a % of the chart's max), and each .chargeforms-bar-segment
   inside it is that status's share of *that bar's own height* — plain
   CSS block flow stacks them bottom-to-top automatically, so the parts
   always visually sum to the whole with no absolute-positioning or
   z-index tricks to get wrong. */
.chargeforms-bar-chart-stacked .chargeforms-bar-group {
	position: relative;
	width: 100%;
	max-width: 28px;
	display: flex;
	flex-direction: column-reverse;
	border-radius: 6px 6px 2px 2px;
	overflow: hidden;
	background: var(--fc-bg);
}
.chargeforms-bar-segment {
	width: 100%;
}
.chargeforms-bar-segment.is-read { background: #0f9d70; }
.chargeforms-bar-segment.is-unread { background: #d97706; }
.chargeforms-bar-segment.is-pending { background: #2a78d6; }

/* Reusable pill toggle-button pair — Top Performing Forms
   (Submissions/Views) and Submission Timeline Patterns (AM/PM). */
.chargeforms-toggle-group {
	display: inline-flex;
	background: var(--fc-bg);
	border-radius: 999px;
	padding: 3px;
	gap: 2px;
}
.chargeforms-toggle-group button {
	border: none;
	background: none;
	padding: 6px 14px;
	border-radius: 999px;
	font-size: var(--fc-text-sm);
	font-weight: 600;
	color: var(--fc-muted);
	cursor: pointer;
	transition: background 0.15s var(--fc-ease), color 0.15s var(--fc-ease);
}
.chargeforms-toggle-group button.is-active {
	background: var(--fc-gradient-primary);
	color: #fff;
}


/* Submission Timeline Patterns heatmap — one panel per AM/PM toggle
   state, 12 hour-columns each (see the two-panel render in
   class-reports-page.php) rather than 24 columns squeezed into one row. */
/* Fixed-size grid tracks (not minmax(...,1fr)) — a flexible 1fr column on
   a full-width card stretches each cell to whatever share of the card
   width it gets (60-100px+), and with aspect-ratio:1 the cell's height
   follows, producing huge, unevenly-gapped squares instead of a compact
   heatmap. Real heatmaps use small fixed cells with the grid staying
   compact and left-aligned, not stretched to fill the card. */
.chargeforms-timeline-heatmap {
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.chargeforms-timeline-hours,
.chargeforms-timeline-row {
	display: grid;
	grid-template-columns: 42px repeat(6, minmax(0, 1fr));
	gap: 6px;
	align-items: center;
}
.chargeforms-timeline-hour-label {
	font-size: var(--fc-text-xs);
	color: var(--fc-muted);
	text-align: center;
	font-weight: 600;
}
.chargeforms-timeline-day-label {
	font-size: var(--fc-text-sm);
	color: var(--fc-muted);
	font-weight: 600;
}
.chargeforms-timeline-cell {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 40px;
	border-radius: 8px;
	background: var(--fc-bg);
	color: #fff;
	font-size: var(--fc-text-xs);
	font-weight: 700;
	transition: transform 0.12s var(--fc-ease), box-shadow 0.12s var(--fc-ease);
	cursor: default;
	opacity: 0;
	animation: fc-fade-in 0.3s var(--fc-ease) forwards;
}
.chargeforms-timeline-cell:not(.has-value) {
	color: transparent;
}
.chargeforms-timeline-cell:hover {
	transform: scale(1.06);
	box-shadow: 0 4px 12px rgba(108, 78, 245, 0.3);
	z-index: 5;
	position: relative;
}
.chargeforms-timeline-legend-swatch {
	display: inline-block;
	width: 14px;
	height: 10px;
	border-radius: 2px;
	margin: 0 1px;
	vertical-align: middle;
}
.chargeforms-timeline-legend-label {
	font-size: var(--fc-text-xs);
	color: var(--fc-muted);
	vertical-align: middle;
}
.chargeforms-timeline-legend {
	margin: 10px 0 0;
	font-size: var(--fc-text-sm);
	color: var(--fc-muted);
}
.chargeforms-reports-filterbar {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 16px;
	margin-bottom: 20px;
}
.chargeforms-reports-heading {
	margin: 0 0 2px;
	font-size: 22px;
	font-weight: 700;
	letter-spacing: -0.01em;
}
.chargeforms-reports-filters {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}
.chargeforms-reports-filters select {
	border: 1px solid var(--fc-border);
	border-radius: 6px;
	padding: 7px 30px 7px 12px;
	font-size: var(--fc-text-base);
	font-weight: 500;
	background: #fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none'><path d='M1 1L5 5L9 1' stroke='%23606266' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>") no-repeat right 12px center;
	appearance: none;
	-webkit-appearance: none;
	transition: border-color 0.15s ease;
}
.chargeforms-reports-filters select:hover {
	border-color: var(--fc-primary-100);
}
.chargeforms-reports-daterange {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	border: 1px solid var(--fc-primary-100);
	border-radius: 6px;
	padding: 7px 12px;
	font-size: var(--fc-text-base);
	font-weight: 500;
	color: var(--fc-primary-dark);
	background: var(--fc-primary-soft);
}
.chargeforms-reports-daterange .dashicons {
	font-size: 15px;
	width: 15px;
	height: 15px;
}
.chargeforms-reports-columns {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
	gap: 16px;
	margin-bottom: 16px;
	align-items: start;
}
.chargeforms-card-full {
	grid-column: 1 / -1;
}
.chargeforms-pro-gate-card .chargeforms-pro-gate-body {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 48px 20px;
	background: linear-gradient(135deg, var(--fc-bg), #fff);
	border-radius: 8px;
	color: var(--fc-muted);
}
.chargeforms-pro-gate-body .dashicons {
	font-size: 36px;
	width: 36px;
	height: 36px;
	color: var(--fc-primary-100);
	margin-bottom: 10px;
}
.chargeforms-pro-gate-body p {
	margin: 0;
	font-size: var(--fc-text-base);
	max-width: 320px;
}
.chargeforms-stat-grid-4 {
	grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 900px) {
	.chargeforms-stat-grid-4 {
		grid-template-columns: repeat(2, 1fr);
	}
}
.chargeforms-stat-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 12px;
	margin: 20px 0 32px;
}
/* the reference product's real Key Metrics cards (the plugin's internal reference-screenshot archive/
   reports-dashboard--01.webp) have no colored top border and no per-card
   icon color-coding — every icon chip is the same neutral light-blue
   square regardless of what the card represents (Total Submissions, Spam,
   Unread, Created Forms all look identical here). The colored stripe +
   danger/warning/success/info icon-chip variants below were this
   project's own invention, never checked against the real reference —
   removed so every stat tile matches exactly instead of only some of
   them accidentally being close. */
.chargeforms-stat-tile {
	position: relative;
	background: var(--fc-surface);
	border: 1px solid var(--fc-border);
	border-radius: var(--fc-radius-lg);
	box-shadow: var(--fc-card-shadow);
	padding: 20px 22px;
	display: flex;
	flex-direction: column;
	gap: 16px;
	overflow: hidden;
	transition: box-shadow var(--fc-motion-fast) var(--fc-ease), transform var(--fc-motion-fast) var(--fc-ease), border-color var(--fc-motion-fast) var(--fc-ease);
}
/* Two-row layout from the approved redesign: icon + change badge on top,
   number/label + trend sparkline (where real daily data backs one) on
   the bottom — replaces the previous single vertical stack (icon,
   number, label, badge each on their own line). */
.chargeforms-stat-tile-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.chargeforms-stat-tile-bottom {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 10px;
}
.chargeforms-stat-spark {
	flex-shrink: 0;
}
.chargeforms-stat-tile:hover {
	box-shadow: var(--fc-shadow-hover);
	border-color: var(--fc-primary-100);
	transform: translateY(-2px);
}

.chargeforms-stat-icon,
.chargeforms-stat-icon.is-danger,
.chargeforms-stat-icon.is-warning,
.chargeforms-stat-icon.is-success,
.chargeforms-stat-icon.is-info,
.chargeforms-stat-icon.is-neutral,
.chargeforms-stat-icon.is-primary {
	color: var(--fc-primary);
	background: var(--fc-primary-soft);
}
.chargeforms-stat-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 16px;
	width: 34px;
	height: 34px;
	border-radius: 9px;
	color: var(--fc-primary);
	background: var(--fc-primary-soft);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.6), 0 1px 2px rgba(20, 30, 60, 0.06);
	transition: transform var(--fc-motion-fast) var(--fc-ease);
}
.chargeforms-stat-tile:hover .chargeforms-stat-icon {
	transform: scale(1.06);
}
.chargeforms-stat-icon .chargeforms-icon-svg {
	width: 18px;
	height: 18px;
}
.chargeforms-stat-number {
	display: block;
	font-size: 27px;
	font-weight: 700;
	color: var(--fc-ink);
	letter-spacing: -0.02em;
	line-height: 1.15;
	font-variant-numeric: tabular-nums;
}
.chargeforms-stat-label {
	display: block;
	font-size: 12px;
	font-weight: 500;
	margin-top: 2px;
	color: var(--fc-muted-light);
}
/* Secondary line under a stat tile's number (e.g. Payments' "214
   transactions") — per the mockup's payStats spec. */
.chargeforms-stat-sub {
	font-size: var(--fc-text-xs);
	color: var(--fc-muted);
}

.chargeforms-bar-chart {
	display: flex;
	align-items: flex-end;
	gap: 8px;
	/* Was 180px — `.chargeforms-wrap * { box-sizing: border-box }` applies
	   here too, so the +32px of top padding added below (for the hover-
	   tooltip clipping fix) would otherwise eat directly into the bars'
	   own drawable area, making every bar ~20% shorter than before.
	   Grown by the same 32px so the actual bar-drawing height is
	   unchanged — only the reserved space above it grew. */
	height: 212px;
	background: #fff;
	border: 1px solid var(--fc-border);
	border-radius: 8px;
	box-shadow: var(--fc-card-shadow);
	/* Top padding real bug found live (user report, "hover date issue"):
	   setting overflow-x:auto on an element whose overflow-y is otherwise
	   visible forces the BROWSER's used value of overflow-y to auto too,
	   per the CSS Overflow spec — there is no way to scroll one axis and
	   leave the other genuinely unclipped on the same element. That
	   silently clipped this chart's own hover tooltip ([data-tooltip]
	   below, `bottom: 100%` positioned above each bar), which needs
	   roughly 40px of clearance above a bar's top edge (its own padding/
	   line-height/arrow/offset) — the previous 16px of top padding wasn't
	   enough room to fit inside before the forced auto-clip cut it off.
	   Bumped so the tooltip's whole box now sits inside the padded area
	   that never gets clipped, without needing a separate scroll-only
	   wrapper element around every one of this class's several call sites
	   (Entries' own chart, Reports' three). */
	padding: 48px 12px 8px;
	margin-bottom: 32px;
	/* A 14-column chart's date labels ("Aug 8") don't shrink below their own
	   min-content width — flex children default to min-width:auto, not 0 —
	   so at narrow viewports the row's true min width exceeds the page,
	   found live at 390px (real horizontal-overflow bug, not a guess: see
	   the plugin's internal design-fidelity research doc's Reports pass). Scroll inside the card
	   instead of blowing out the page, matching the reference product's own
	   heatmap convention. */
	overflow-x: auto;
}
.chargeforms-bar-col {
	flex: 1 0 28px;
	min-width: 28px;
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	align-items: center;
	height: 100%;
}
/* A faint full-height rail behind every column, so a near-zero bar still
   sits inside a visibly bounded plotting area instead of reading as a
   stray colored sliver floating on blank white — the exact "is this chart
   broken?" impression a 2-3px bar on its own gives with no data. */
.chargeforms-bar-col::before {
	content: "";
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 100%;
	max-width: 26px;
	height: 100%;
	background: var(--fc-bg);
	border-radius: 6px 6px 2px 2px;
	z-index: 0;
}
.chargeforms-bar {
	width: 100%;
	max-width: 26px;
	background: linear-gradient(180deg, var(--fc-primary-500), var(--fc-primary-600));
	border-radius: 6px 6px 2px 2px;
	position: relative;
	z-index: 1;
	min-height: 3px;
	transition: opacity 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
	transform-origin: bottom;
	animation: fc-grow-height 0.5s var(--fc-ease) both;
}
.chargeforms-bar:hover {
	opacity: 0.9;
	transform: scaleX(1.08);
	box-shadow: 0 4px 10px rgba(108, 78, 245, 0.3);
}
/* A genuinely-zero day among days that DO have data — flat muted fill
   instead of the brand gradient, so "zero" reads as an intentional value,
   not a smaller version of a real bar. */
.chargeforms-bar.is-empty {
	background: var(--fc-border);
}
.chargeforms-bar.is-empty:hover {
	opacity: 1;
	transform: none;
	box-shadow: none;
}
.chargeforms-bar.is-empty .chargeforms-bar-value {
	color: var(--fc-muted-light);
	font-weight: 500;
}
/* Integration Deliveries chart (Reports) reuses the same .chargeforms-bar
   as Submission Trends — bar height is still total attempts, so a day with
   any failed delivery gets a thin red cap rather than recoloring the whole
   bar, which would make "how many attempts" harder to read at a glance. */
.chargeforms-bar--has-failures {
	box-shadow: inset 0 3px 0 0 #e5484d;
}
.chargeforms-bar-value {
	position: absolute;
	top: -18px;
	left: 50%;
	transform: translateX(-50%);
	font-size: var(--fc-text-xs);
	font-weight: 600;
	color: var(--fc-text);
}
.chargeforms-bar-label {
	margin-top: 8px;
	font-size: var(--fc-text-xs);
	color: var(--fc-muted);
	/* .chargeforms-bar-col::before (the full-column background rail) is
	   absolutely positioned with z-index:0 — CSS paints a positioned,
	   z-indexed element AFTER a plain in-flow sibling in the same stacking
	   context, so without its own stacking position this label (in-flow,
	   sitting at the same bottom edge the rail spans to) rendered
	   completely hidden underneath the rail on every bar, in every chart
	   that reuses this component (Entries, Reports, Dashboard) — a real,
	   confirmed bug (computed styles said "visible", the rail simply
	   painted on top), not a hypothetical one. */
	position: relative;
	z-index: 2;
}

/* Entries screen — live feedback: the always-on per-bar numbers read as
   clutter on a mostly-sparse 14-day range, closer to the reference product's own
   equivalent chart (an axis + hover tooltip, no per-bar values stamped on
   by default). Kept as a modifier on top of the shared bar-chart base
   (Reports' Submission Trends / Integration Deliveries still show their
   values) rather than changing .chargeforms-bar-value everywhere. */
.chargeforms-bar-chart--minimal {
	height: 220px;
	position: relative;
	padding-top: 28px;
}
.chargeforms-bar-chart--minimal .chargeforms-bar-value {
	opacity: 0;
	transition: opacity 0.15s ease;
	pointer-events: none;
}
.chargeforms-bar-chart--minimal .chargeforms-bar-col:hover .chargeforms-bar-value {
	opacity: 1;
}
.chargeforms-bar-chart-axis-max {
	position: absolute;
	top: 8px;
	left: 12px;
	font-size: var(--fc-text-xs);
	font-weight: 600;
	color: var(--fc-muted-light);
}

/* Dashboard — reuses .chargeforms-stat-tile/.chargeforms-bar-chart/
   .chargeforms-status-dot/.chargeforms-card/.chargeforms-empty-state as-is;
   only what's genuinely new to this screen is defined here. */
.chargeforms-page-head-actions {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-shrink: 0;
}
.chargeforms-dashboard-columns {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 300px;
	gap: 20px;
	align-items: start;
}
.chargeforms-dashboard-main,
.chargeforms-dashboard-side {
	display: flex;
	flex-direction: column;
	gap: 20px;
	min-width: 0;
}
@media (max-width: 960px) {
	.chargeforms-dashboard-columns {
		grid-template-columns: 1fr;
	}
}
.chargeforms-dashboard-activity {
	list-style: none;
	margin: 0;
	padding: 0;
}
.chargeforms-dashboard-activity li + li {
	border-top: 1px solid var(--fc-border);
}
.chargeforms-dashboard-activity a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 10px 0;
	text-decoration: none;
	color: inherit;
	flex-wrap: wrap;
}
/* Real bug at narrow widths (the Dashboard's side column at real mobile
   sizes, ~300px inside the card): a long title plus a same-line
   timestamp had no room to both stay on one row, and with no wrap
   allowed the title text wrapped to 2-3 lines while the fixed-width
   timestamp stayed vertically centered against the whole row — visually
   reading as overlapping/garbled text even though the boxes technically
   never touched. Letting the row wrap moves the timestamp to its own
   line under the title instead, which is legible instead of merely
   "technically not overlapping". */
@media (max-width: 480px) {
	.chargeforms-dashboard-activity-when {
		flex-basis: 100%;
		padding-left: 42px; /* aligns under the text, past the 30px icon + 12px gap */
	}
}
.chargeforms-dashboard-activity-form {
	font-size: var(--fc-text-sm);
	font-weight: 600;
	color: var(--fc-text);
}
.chargeforms-dashboard-activity-when {
	font-size: var(--fc-text-xs);
	color: var(--fc-muted);
	flex-shrink: 0;
}
.chargeforms-dashboard-status-row {
	display: flex;
	align-items: center;
	font-size: var(--fc-text-sm);
	color: var(--fc-text);
	padding: 5px 0;
}
.chargeforms-status-dot.is-good { color: var(--fc-success); }
.chargeforms-status-dot.is-warn { color: var(--fc-warning); }
.chargeforms-status-dot.is-error { color: var(--fc-danger); }
.chargeforms-dashboard-quick-actions {
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.chargeforms-dashboard-quick-actions .button {
	text-align: center;
}
.chargeforms-dashboard-firstrun .chargeforms-empty-state {
	padding: 48px 24px;
}

/* Dashboard stat-tile icon chip — one consistent size/radius/stroke across
   every categorical icon on the page (stat tiles, activity rows), so the
   Dashboard doesn't read as several components from different sources. */
.chargeforms-stat-tile--metric {
	position: relative;
}
.chargeforms-icon-chip {
	position: absolute;
	top: 18px;
	right: 18px;
	width: 30px;
	height: 30px;
	border-radius: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}
.chargeforms-icon-chip svg {
	width: 15px;
	height: 15px;
}
.chargeforms-activity-icon {
	width: 30px;
	height: 30px;
	border-radius: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}
.chargeforms-activity-icon svg {
	width: 14px;
	height: 14px;
}
.chargeforms-dashboard-activity a {
	gap: 12px;
}
.chargeforms-dashboard-activity-text {
	flex: 1;
	min-width: 0;
}

/* Dashboard trend chart — a real SVG area/line chart (server-computed from
   Entry::counts_by_day()) replacing the plain CSS bar chart, styled to the
   same violet accent already used everywhere else on this screen. */
.chargeforms-dashboard-trend-svg {
	width: 100%;
	height: 150px;
	overflow: visible;
}
.chargeforms-dashboard-trend-sub {
	font-size: var(--fc-text-sm);
	color: var(--fc-muted);
	margin: 0 0 4px;
}
.chargeforms-dashboard-trend-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 2px;
}
.chargeforms-segmented-nav {
	display: inline-flex;
	background: var(--fc-bg);
	border-radius: var(--fc-radius-sm);
	padding: 2px;
	gap: 2px;
}
.chargeforms-segmented-nav a {
	padding: 5px 12px;
	font-size: var(--fc-text-xs);
	font-weight: 600;
	color: var(--fc-muted);
	border-radius: 5px;
	text-decoration: none;
}
.chargeforms-segmented-nav a.is-active {
	background: #fff;
	color: var(--fc-ink);
	box-shadow: var(--fc-shadow-xs);
}

/* Dashboard status-dot variant for a neutral/informational Needs
   Attention row (a form that's never received a submission) — distinct
   from the existing is-good/is-warn/is-error tones, none of which fit
   "not broken, just worth knowing." */
.chargeforms-status-dot.is-neutral { color: var(--fc-muted); }

/* Dashboard "Key Metrics" header row — the h2 + 7/30-day range toggle
   that governs both the stat grid below it and the Submissions trend
   chart, replacing what used to be a range control attached only to
   the chart while the stat tiles silently showed different numbers
   with no way to tell what window they covered. */
.chargeforms-dashboard-range-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin: 4px 0 10px;
}
.chargeforms-dashboard-range-label {
	margin: 0;
	font-size: var(--fc-text-base);
	font-weight: 700;
	color: var(--fc-text);
}

/* Needs Attention — the one Dashboard card meant to be acted on, not
   just read, so it gets a small accent rule the other side-column cards
   don't. Only while it actually has something to report: the "all
   clear" state (no .chargeforms-dashboard-attention-list present) looks
   like every other neutral card, since there's nothing to draw the eye
   to at that point. */
.chargeforms-dashboard-needs-attention:has(.chargeforms-dashboard-attention-list) {
	border-left: 3px solid var(--fc-warning);
}
.chargeforms-dashboard-attention-list {
	list-style: none;
	margin: 0;
	padding: 0;
}
.chargeforms-dashboard-attention-row {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 9px 0;
	font-size: var(--fc-text-sm);
	color: var(--fc-text);
}
.chargeforms-dashboard-attention-row + .chargeforms-dashboard-attention-row {
	border-top: 1px solid var(--fc-border);
}
.chargeforms-dashboard-attention-text {
	flex: 1;
	min-width: 0;
}
.chargeforms-dashboard-attention-cta {
	flex-shrink: 0;
	font-size: var(--fc-text-xs);
	font-weight: 700;
	color: var(--fc-primary-500);
	text-decoration: none;
	white-space: nowrap;
}
.chargeforms-dashboard-attention-cta:hover {
	text-decoration: underline;
}

.chargeforms-country-scale {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 10px 0 16px;
	font-size: 10.5px;
	color: var(--fc-muted-light);
}
.chargeforms-country-scale-bar {
	flex: 1;
	height: 6px;
	border-radius: 999px;
	background: linear-gradient(90deg, var(--fc-primary-tint-2), var(--fc-primary-500));
}

/* Field Analytics (horizontal distribution bars) */
.chargeforms-hbar-chart {
	background: #fff;
	border: 1px solid var(--fc-border);
	border-radius: 8px;
	box-shadow: var(--fc-card-shadow);
	padding: 16px 18px;
	margin: 12px 0 32px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.chargeforms-hbar-row {
	display: grid;
	grid-template-columns: 140px 1fr 40px;
	align-items: center;
	gap: 10px;
}
/* Top Performing Forms — a rank badge column, fade-in on load, and a
   rich hover tooltip (see [data-tooltip] above) replacing the browser's
   own plain title tooltip. */
.chargeforms-top-forms-row {
	grid-template-columns: 22px 140px 1fr 40px;
	opacity: 0;
	animation: fc-fade-in 0.35s var(--fc-ease) forwards;
	cursor: default;
	padding: 3px 4px;
	border-radius: 6px;
	transition: background 0.15s var(--fc-ease);
}
.chargeforms-top-forms-row:hover {
	background: var(--fc-bg-soft);
}
.chargeforms-top-forms-rank {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: var(--fc-bg);
	color: var(--fc-muted);
	font-size: var(--fc-text-xs);
	font-weight: 700;
}
.chargeforms-top-forms-rank-0 {
	background: linear-gradient(135deg, #f0c419, #d99e0a);
	color: #fff;
}
.chargeforms-top-forms-rank-1 {
	background: linear-gradient(135deg, #c9ccd1, #a5a9b0);
	color: #fff;
}
.chargeforms-top-forms-rank-2 {
	background: linear-gradient(135deg, #cd8a5c, #b06e42);
	color: #fff;
}
.chargeforms-top-forms-list .chargeforms-hbar-fill {
	width: 0;
	animation: fc-grow-width 0.5s var(--fc-ease) forwards;
}
.chargeforms-hbar-label {
	font-size: var(--fc-text-base);
	color: var(--fc-text);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.chargeforms-hbar-track {
	/* Mockup spec: 8px track, fully pill radius, flat fill color per
	   section (no gradient) — was 14px/4px-radius/gradient, a real
	   mismatch. */
	background: var(--fc-bg);
	border-radius: var(--fc-radius-full);
	height: 8px;
	overflow: hidden;
}
.chargeforms-hbar-fill {
	height: 100%;
	/* Default (Submissions By Country): mockup uses the accent violet. */
	background: var(--fc-primary);
	border-radius: var(--fc-radius-full);
}
/* Device Breakdown fill: mockup uses green (--fc-success). Browser
   Breakdown fill: mockup uses a distinct blue, not otherwise part of this
   plugin's token set. */
.chargeforms-device-list--device .chargeforms-hbar-fill {
	background: var(--fc-success);
}
.chargeforms-device-list--browser .chargeforms-hbar-fill {
	background: #1a7efb;
}
.chargeforms-hbar-count {
	font-size: var(--fc-text-sm);
	color: var(--fc-muted);
	text-align: right;
}

/* Device Breakdown */
.chargeforms-device-list {
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.chargeforms-device-row {
	display: grid;
	grid-template-columns: 18px 70px 1fr 32px;
	align-items: center;
	gap: 10px;
}
.chargeforms-device-icon {
	font-size: var(--fc-text-lg);
	color: var(--fc-muted);
}
.chargeforms-device-label {
	font-size: var(--fc-text-base);
	color: var(--fc-text);
}

@media (max-width: 480px) {
	.chargeforms-hbar-row {
		grid-template-columns: 90px 1fr 32px;
		gap: 6px;
	}
}

/* Tools */
.chargeforms-tools-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 16px;
	margin: 20px 0 32px;
}
.chargeforms-tool-card {
	background: #fff;
	border: 1px solid var(--fc-border);
	border-radius: 8px;
	box-shadow: var(--fc-card-shadow);
	padding: 22px;
}
.chargeforms-tool-card h2 {
	margin-top: 0;
	font-size: var(--fc-text-lg);
}
.chargeforms-status-table td:first-child {
	font-weight: 600;
	width: 240px;
}

/* Global search trigger + command palette */
.chargeforms-search-trigger {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-left: 10px;
	padding: 7px 10px;
	background: var(--fc-surface);
	border: 1px solid var(--fc-border);
	border-radius: var(--fc-radius-md);
	color: var(--fc-muted);
	cursor: pointer;
	transition: border-color var(--fc-motion-base) var(--fc-ease), color var(--fc-motion-base) var(--fc-ease), box-shadow var(--fc-motion-base) var(--fc-ease);
}
.chargeforms-search-trigger:hover {
	border-color: var(--fc-primary-100);
	color: var(--fc-text);
	box-shadow: var(--fc-shadow-xs);
}
.chargeforms-search-trigger:focus-visible {
	outline: none;
	border-color: var(--fc-primary);
	box-shadow: 0 0 0 3px var(--fc-primary-50);
}
.chargeforms-search-trigger .dashicons {
	font-size: var(--fc-text-lg);
	width: 16px;
	height: 16px;
}
.chargeforms-search-trigger kbd {
	font-family: inherit;
	font-size: var(--fc-text-xs);
	font-weight: 600;
	background: var(--fc-bg);
	border: 1px solid var(--fc-border);
	border-radius: 4px;
	padding: 2px 6px;
	color: var(--fc-muted);
}

.chargeforms-search-overlay {
	position: fixed;
	inset: 0;
	background: rgba(20, 21, 23, 0.55);
	z-index: 2147483647;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	padding: 12vh 16px 16px;
	animation: fc-search-overlay-in var(--fc-motion-base) var(--fc-ease);
}
/* [hidden] and .chargeforms-search-overlay both carry (0,1,0) specificity —
   without this rule, whichever one is declared later in the stylesheet
   wins the tie, which would make display:flex above always beat the
   browser's own [hidden] { display: none } and leave the overlay visible
   even before openModal() ever runs. */
.chargeforms-search-overlay[hidden] {
	display: none;
}
@keyframes fc-search-overlay-in {
	from { opacity: 0; }
	to { opacity: 1; }
}
.chargeforms-search-modal {
	width: 100%;
	max-width: 640px;
	max-height: 70vh;
	display: flex;
	flex-direction: column;
	background: var(--fc-surface);
	border-radius: var(--fc-radius-xl);
	box-shadow: var(--fc-shadow-xl);
	overflow: hidden;
	animation: fc-search-modal-in var(--fc-motion-slow) var(--fc-ease);
}
@keyframes fc-search-modal-in {
	from { opacity: 0; transform: translateY(-8px) scale(0.98); }
	to { opacity: 1; transform: translateY(0) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
	.chargeforms-search-overlay,
	.chargeforms-search-modal,
	.chargeforms-modal-overlay,
	.chargeforms-modal {
		animation: none;
	}
}
.chargeforms-search-input-row {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 16px 20px;
	border-bottom: 1px solid var(--fc-border);
	flex-shrink: 0;
}
.chargeforms-search-input-row .dashicons {
	color: var(--fc-muted);
	font-size: 18px;
	width: 18px;
	height: 18px;
	flex-shrink: 0;
}
.chargeforms-search-input-row input {
	flex: 1;
	border: none;
	outline: none;
	font-size: var(--fc-text-lg);
	color: var(--fc-text);
	background: none;
}
.chargeforms-search-close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	flex-shrink: 0;
	border: none;
	background: var(--fc-bg);
	color: var(--fc-muted);
	border-radius: 6px;
	cursor: pointer;
}
.chargeforms-search-close:hover {
	background: var(--fc-primary-soft-dark, var(--fc-bg));
	color: var(--fc-text);
}
.chargeforms-search-close .dashicons {
	font-size: var(--fc-text-lg);
	width: 16px;
	height: 16px;
}
.chargeforms-search-results {
	overflow-y: auto;
	padding: 10px;
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.chargeforms-search-row {
	display: block;
	width: 100%;
	text-align: left;
	padding: 12px 14px;
	border: none;
	border-radius: var(--fc-radius-lg);
	background: var(--fc-bg);
	color: var(--fc-text);
	font-size: var(--fc-text-md);
	font: inherit;
	cursor: pointer;
	transition: background var(--fc-motion-fast) var(--fc-ease), color var(--fc-motion-fast) var(--fc-ease);
}
.chargeforms-search-row.is-active {
	background: #f1edff;
	color: #4f36c8;
}
.chargeforms-search-row.is-active .chargeforms-search-cat {
	color: #6d6488;
}
.chargeforms-search-cat {
	color: var(--fc-muted);
	margin-right: 4px;
}
.chargeforms-search-empty {
	padding: 24px;
	text-align: center;
	color: var(--fc-muted);
	font-size: var(--fc-text-md);
}
.chargeforms-search-footer {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 20px;
	padding: 12px 16px;
	border-top: 1px solid var(--fc-border);
	flex-shrink: 0;
	flex-wrap: wrap;
}
.chargeforms-search-footer span {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: var(--fc-text-sm);
	color: var(--fc-muted);
}
.chargeforms-search-footer kbd {
	font-family: inherit;
	font-size: var(--fc-text-xs);
	font-weight: 600;
	background: var(--fc-bg);
	border: 1px solid var(--fc-border);
	border-radius: 4px;
	padding: 2px 6px;
	color: var(--fc-text);
}
@media (max-width: 600px) {
	.chargeforms-search-trigger kbd {
		display: none;
	}
	.chargeforms-search-overlay {
		padding: 5vh 10px 10px;
	}
	.chargeforms-search-footer {
		gap: 10px;
	}
}

/* Payments (Transactions) */
.chargeforms-payments-topbar {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--fc-space-4);
	margin-bottom: 18px;
	flex-wrap: wrap;
}
.chargeforms-payments-topbar h1 {
	margin: 0 0 3px;
}
.chargeforms-payments-subtitle {
	font-size: 13px;
	color: #606266;
}
.chargeforms-payments-stats {
	margin-bottom: 18px;
}
.chargeforms-payments-topbar .button .dashicons {
	font-size: var(--fc-text-lg);
	width: 16px;
	height: 16px;
	vertical-align: text-bottom;
}
.chargeforms-payments-filters {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 16px;
	background: #fff;
	border: 1px solid var(--fc-border);
	border-radius: 8px;
	padding: 16px;
	margin-bottom: 16px;
}
.chargeforms-payments-filters label {
	display: block;
	font-weight: 600;
	font-size: var(--fc-text-base);
	margin-bottom: 6px;
}
.chargeforms-payments-filters select {
	width: 100%;
	border: 1px solid var(--fc-border);
	border-radius: 6px;
	padding: 7px 10px;
	font-size: var(--fc-text-base);
	background: #fff;
}
.chargeforms-payments-filters select:disabled {
	color: var(--fc-muted);
	background: var(--fc-bg);
}

/* Replaces a permanently-disabled <select> for the Status/Payment Type
   filters (only one real value exists for either today) — a disabled
   control styled like the working filters next to it reads as broken;
   a plain label/value pair reads as informative instead. The title
   attribute explains why there's nothing to choose. */
.chargeforms-payments-filter-static {
	display: flex;
	flex-direction: column;
	gap: 6px;
	cursor: help;
}
.chargeforms-payments-filter-static-label {
	font-weight: 600;
	font-size: var(--fc-text-base);
	color: var(--fc-muted);
}
.chargeforms-payments-filter-static-value {
	padding: 7px 10px;
	border: 1px dashed var(--fc-border);
	border-radius: 6px;
	font-size: var(--fc-text-base);
	color: var(--fc-muted);
	background: var(--fc-bg);
}

/* Integrations — each card leads with a brand-colored icon badge (real
   marks/colors where available, see Integrations_Page::icon_svg()) so the
   grid scans by color+shape before a word is read, matching the visual
   density of the reference product's own Integrations screen. Responsive down to a
   single column on narrow viewports via auto-fill + a min-width floor. */
.chargeforms-integrations-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 18px;
	margin-top: 20px;
}
.chargeforms-integration-card {
	background: var(--fc-surface);
	border: 1px solid var(--fc-border);
	border-radius: var(--fc-radius-lg, 8px);
	/* Matches the reference product's real add-on card (`.ff_card_s2` in _card.scss):
	   `box-shadow: none` at rest, a soft diffused lift only on hover — not
	   the plain `.ff_card` base shadow this used to reuse. No border-color
	   change or translateY on hover either: the reference product's own hover here is
	   shadow-only, and the card isn't a single clickable target (it holds
	   a real form), so a "lift" implying otherwise would overstate it. */
	box-shadow: none;
	padding: 22px;
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 14px;
	transition: box-shadow var(--fc-motion-fast, .15s) var(--fc-ease, ease);
}
.chargeforms-integration-card:hover {
	box-shadow: 0 12px 24px -4px rgba(129, 129, 129, 0.18);
}
/* A connected integration gets a quiet success-tinted edge — the card
   itself carries the "this is live" signal, not just the status pill
   buried in its footer. */
.chargeforms-integration-card.is-connected {
	border-color: rgba(22, 166, 114, 0.35);
}
.chargeforms-integration-card-head {
	display: flex;
	align-items: center;
	gap: 14px;
	padding-bottom: 14px;
	border-bottom: 1px solid var(--fc-border);
}
/* A compact, quietly-bordered tile rather than a large color-filled badge —
   each integration's own real brand mark (Slack purple, Mailchimp yellow,
   etc.) is the color here, so the tile itself stays neutral and just gives
   that mark a clean, consistent frame instead of fighting it for attention.
   Sized up from an earlier, cramped 34px pass and given a real elevation
   step so it reads as a deliberate badge, not an afterthought next to the
   card title. */
.chargeforms-integration-icon {
	flex-shrink: 0;
	width: 48px;
	height: 48px;
	border-radius: var(--fc-radius-md);
	border: 1px solid var(--fc-border);
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--fc-surface);
	box-shadow: var(--fc-shadow-sm);
	transition: transform var(--fc-motion-fast) var(--fc-ease);
}
.chargeforms-integration-card:hover .chargeforms-integration-icon {
	transform: scale(1.05);
}
.chargeforms-integration-icon svg {
	display: block;
	width: 22px;
	height: 22px;
}
.chargeforms-integration-icon .dashicons {
	font-size: 20px;
	width: 20px;
	height: 20px;
	color: var(--fc-muted);
}
.chargeforms-integration-icon--webhook,
.chargeforms-integration-icon--email {
	background: var(--fc-primary-soft);
	border-color: var(--fc-primary-100);
}

.chargeforms-integration-card h3 {
	margin: 0;
	font-size: var(--fc-text-md);
	font-weight: 700;
}
.chargeforms-integration-card p {
	color: var(--fc-muted);
	font-size: var(--fc-text-base);
	margin: 0;
	line-height: 1.5;
}
/* WP core's .regular-text class (used on the webhook URL field) is a
   fixed ~25em width, wider than this card — it needs to fill the card
   instead. */
.chargeforms-integration-card input.regular-text,
.chargeforms-integration-card textarea.large-text {
	display: block;
	width: 100%;
	max-width: 100%;
	margin: 0;
	box-sizing: border-box;
}
.chargeforms-integration-card form {
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.chargeforms-integration-card form p {
	margin: 0;
}
/* Real bug found live (user screenshot): the Save + Send Test Message/
   Test Connection button row had no gap styling of its own — only the
   parent form's 10px gap separated whole rows from each other, so once
   this <p>'s two buttons (plus the test-result message) wrapped onto
   separate lines at this card's width, they touched edge to edge with
   no breathing room, on every integration card that has both a Save
   and a test button (Slack/Discord/Telegram/Notion/HubSpot/Sheets/
   Mailchimp), not just one of them. */
.chargeforms-integration-card form p:has(button) {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
}
.chargeforms-integration-card .description {
	font-size: 12px;
	color: var(--fc-muted);
}
.chargeforms-integration-card.is-locked {
	background: var(--fc-bg);
}
.chargeforms-integration-card.is-locked .dashicons {
	opacity: 0.7;
}
.chargeforms-pro-badge {
	position: absolute;
	top: 20px;
	right: 20px;
	background: var(--fc-primary-soft);
	color: var(--fc-primary-dark);
	font-size: var(--fc-text-xs);
	font-weight: 700;
	padding: 3px 9px;
	border-radius: 999px;
	text-transform: uppercase;
}
.chargeforms-integration-card.is-enabled {
	border-color: var(--fc-primary-100);
}
.chargeforms-module-status {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 12px;
	font-weight: 600;
	color: var(--fc-muted);
	background: var(--fc-bg);
	padding: 4px 10px 4px 8px;
	border-radius: 999px;
	width: fit-content;
	margin-top: auto;
}
/* Matches the reference product's real `.ff_card_footer { border-top: 1px solid #e4e4e4;
   padding: 14px 20px; margin-top: auto; }` — a genuinely separated footer
   region below the connect form, not just a pill floating in the flow. */
.chargeforms-integration-footer {
	margin-top: auto;
	padding-top: 14px;
	border-top: 1px solid var(--fc-border);
}
.chargeforms-integration-footer > .chargeforms-module-status {
	margin-top: 0;
}
.chargeforms-module-status::before {
	content: "";
	display: inline-block;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--fc-muted);
	flex-shrink: 0;
}
.chargeforms-module-status.is-on {
	color: var(--fc-success);
	background: var(--fc-success-soft, #e8f7ef);
}
.chargeforms-module-status.is-on::before {
	background: var(--fc-success);
}
@media (max-width: 782px) {
	.chargeforms-integrations-grid {
		grid-template-columns: 1fr;
	}
}
.chargeforms-integration-test-result {
	font-size: var(--fc-text-sm);
	color: var(--fc-muted);
	margin-left: 6px;
}
.chargeforms-integration-test-result.is-success {
	color: var(--fc-success);
}
.chargeforms-integration-test-result.is-error {
	color: var(--fc-danger);
}
.chargeforms-integration-connect-form textarea.code {
	font-size: 11px;
	margin-bottom: 8px;
}
.chargeforms-mailchimp-list-status {
	font-size: var(--fc-text-sm);
	color: var(--fc-danger);
	display: block;
	margin-top: 6px;
}

/* Settings */
.chargeforms-settings-form .form-table th {
	width: 220px;
}

/* MCP for AI Agents — a static grid of tool-name chips, each carrying a
   small Read/Write badge so a site owner can see at a glance which tools
   can only read data vs. which ones can change it (write tools always go
   through the preview-then-confirm flow regardless — this badge is about
   scanability, not a separate permission toggle). */
.chargeforms-mcp-tools-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 8px;
}
.chargeforms-mcp-tool-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: var(--fc-bg);
	border: 1px solid var(--fc-border);
	border-radius: var(--fc-radius-md);
	padding: 6px 10px;
	font-size: 12px;
	font-family: Menlo, Consolas, monospace;
	color: var(--fc-text);
	cursor: default;
}
.chargeforms-mcp-tool-badge {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	font-style: normal;
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .03em;
	padding: 1px 6px;
	border-radius: 999px;
}
.chargeforms-mcp-tool-badge--read {
	background: var(--fc-primary-soft);
	color: var(--fc-primary-dark);
}
.chargeforms-mcp-tool-badge--write {
	background: #fff4e5;
	color: #b45309;
}

.chargeforms-settings-shell {
	display: grid;
	grid-template-columns: 232px minmax(0, 1fr);
	gap: 24px;
	align-items: start;
	margin-top: 20px;
}
@media (max-width: 782px) {
	.chargeforms-settings-shell {
		grid-template-columns: 1fr;
	}
	/* A grid item's default min-width is `auto` (not 0) — even with the
	   track collapsed to 1fr above, the nav still refused to shrink below
	   its own content's intrinsic width, forcing the whole page wider than
	   the viewport at narrow widths (found auditing Email Delivery at
	   390px, but this shell is shared by every Global Settings section). */
	.chargeforms-settings-nav,
	.chargeforms-settings-content {
		min-width: 0;
	}
}

/* Redesigned to match Tools_Page's own nav (assets/css/admin.css's
   .chargeforms-tools-nav* rules below) — icon-in-square + label +
   one-line description per row, instead of this panel's previous
   all-caps heading / bare 14px icon / no-description treatment. That
   gap between two side panels in the same plugin was a real, visible
   inconsistency (confirmed by direct screenshot comparison), not a
   hypothetical one. The accordion (only the active group's rows show)
   stays — with real descriptions on every row, going fully flat across
   all ~19 sections at once would run noticeably longer than Tools'
   own 8-item panel ever does. */
.chargeforms-settings-nav {
	display: flex;
	flex-direction: column;
	gap: 2px;
	background: #fff;
	border: 1px solid var(--fc-border);
	border-radius: 12px;
	padding: var(--fc-space-2);
	box-shadow: var(--fc-card-shadow);
}
.chargeforms-settings-nav-group {
	border-radius: 9px;
	overflow: hidden;
}
.chargeforms-settings-nav-heading {
	display: flex;
	align-items: center;
	gap: var(--fc-space-3);
	width: 100%;
	padding: var(--fc-space-3);
	font: inherit;
	font-size: var(--fc-text-base);
	font-weight: 600;
	text-align: left;
	color: var(--fc-text);
	background: none;
	border: none;
	box-shadow: none;
	border-radius: 9px;
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	transition: background 0.15s ease, color 0.15s ease;
}
.chargeforms-settings-nav-heading-label {
	flex: 1;
	min-width: 0;
}
.chargeforms-settings-nav-heading .chargeforms-settings-nav-chevron {
	flex-shrink: 0;
}
.chargeforms-settings-nav-group.is-expanded > .chargeforms-settings-nav-heading {
	background: var(--fc-primary-soft);
	color: var(--fc-primary-dark);
}
.chargeforms-settings-nav-group.is-expanded > .chargeforms-settings-nav-heading .chargeforms-settings-nav-icon {
	background: var(--fc-gradient-primary);
	color: #fff;
}
.chargeforms-settings-nav-heading:hover {
	background: var(--fc-bg-soft);
}
.chargeforms-settings-nav-group.is-expanded > .chargeforms-settings-nav-heading:hover {
	background: var(--fc-primary-soft);
}
.chargeforms-settings-nav-chevron {
	font-size: var(--fc-text-md);
	width: 14px;
	height: 14px;
	transition: transform 0.2s ease;
	opacity: 0.7;
}
.chargeforms-settings-nav-group.is-expanded .chargeforms-settings-nav-chevron {
	transform: rotate(180deg);
	opacity: 1;
}
/* Deliberately not the grid-template-rows: 0fr -> 1fr trick used
   elsewhere in this file — it depends on the exact parent/child grid
   structure staying intact, and any stray rule touching display/flow on
   either element quietly breaks it into a wrapped/columned mess instead
   of failing loudly. max-height is more verbose but can't misrender:
   the links list is always a normal block flow, just clipped to 0 or
   revealed up to a generous cap. Raised from 600 to 900: with real
   descriptions now on every row, a group's tallest expanded list
   (General, 4 rows) is taller than the old bare icon+label rows were. */
.chargeforms-settings-nav-body {
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.22s ease;
}
.chargeforms-settings-nav-links {
	display: block;
	width: 100%;
}
.chargeforms-settings-nav-group.is-expanded .chargeforms-settings-nav-body {
	max-height: 900px;
}
.chargeforms-settings-nav-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 34px;
	height: 34px;
	border-radius: 9px;
	background: var(--fc-bg);
	color: var(--fc-muted);
	transition: background 0.15s var(--fc-ease), color 0.15s var(--fc-ease);
}
.chargeforms-settings-nav-text {
	display: flex;
	flex-direction: column;
	gap: 1px;
	min-width: 0;
}
.chargeforms-settings-nav-label {
	font-size: var(--fc-text-base);
	font-weight: 600;
	color: var(--fc-text);
}
.chargeforms-settings-nav-desc {
	font-size: var(--fc-text-sm);
	color: var(--fc-muted);
	line-height: 1.4;
	white-space: normal;
}
.chargeforms-settings-nav a {
	display: flex;
	align-items: flex-start;
	gap: var(--fc-space-3);
	padding: var(--fc-space-2) var(--fc-space-3);
	text-decoration: none;
	color: var(--fc-muted);
	font-size: var(--fc-text-base);
	width: 100%;
	flex: none;
	position: relative;
	border-radius: 9px;
	margin: 1px 4px;
	transition: background 0.15s ease, color 0.15s ease;
	box-sizing: border-box;
}
.chargeforms-settings-nav a .chargeforms-settings-nav-icon {
	width: 28px;
	height: 28px;
	border-radius: 7px;
}
.chargeforms-settings-nav a .chargeforms-settings-nav-icon svg {
	width: 14px;
	height: 14px;
}
.chargeforms-settings-nav a.chargeforms-settings-nav-toplevel {
	padding-left: var(--fc-space-3);
	color: var(--fc-text);
	margin: 2px 0;
}
.chargeforms-settings-nav a.chargeforms-settings-nav-toplevel .chargeforms-settings-nav-icon {
	width: 34px;
	height: 34px;
	border-radius: 9px;
}
.chargeforms-settings-nav a.chargeforms-settings-nav-toplevel .chargeforms-settings-nav-icon svg {
	width: 18px;
	height: 18px;
}
.chargeforms-settings-nav > a.chargeforms-settings-nav-toplevel:first-of-type {
	margin-top: 8px;
	padding-top: 12px;
	border-top: 1px solid var(--fc-border);
	border-radius: 0;
}
.chargeforms-settings-nav a:hover {
	background: var(--fc-bg-soft);
	color: var(--fc-text);
}
.chargeforms-settings-nav a:hover .chargeforms-settings-nav-icon {
	color: var(--fc-text);
}
.chargeforms-settings-nav a.is-active {
	background: var(--fc-primary-soft);
	color: var(--fc-primary);
}
.chargeforms-settings-nav a.is-active .chargeforms-settings-nav-label {
	color: var(--fc-primary-dark);
}
.chargeforms-settings-nav a.is-active .chargeforms-settings-nav-icon {
	background: var(--fc-gradient-primary);
	color: #fff;
}
/* No active-state dot indicator here (unlike the old design) — the
   icon-square's own recolor to the primary gradient on .is-active,
   matching Tools' own nav exactly, already reads as "current" on its
   own without a second indicator competing for attention. */

/* Tools screen — its own nav (icon + label + one-line description per
   item, not the compact text-only Global Settings sidebar) and its own
   card system, since every section here is a genuinely standalone task
   (export, import, a status readout) rather than a form split across
   many small settings groups. */
.chargeforms-tools-shell {
	display: grid;
	grid-template-columns: 280px minmax(0, 1fr);
	gap: var(--fc-space-6);
	align-items: start;
	margin-top: var(--fc-space-5);
}
@media (max-width: 782px) {
	.chargeforms-tools-shell {
		grid-template-columns: 1fr;
	}
}
.chargeforms-tools-nav {
	display: flex;
	flex-direction: column;
	gap: 2px;
	background: #fff;
	border: 1px solid var(--fc-border);
	border-radius: 12px;
	padding: var(--fc-space-2);
	box-shadow: var(--fc-card-shadow);
}
.chargeforms-tools-nav-link {
	display: flex;
	align-items: flex-start;
	gap: var(--fc-space-3);
	padding: var(--fc-space-3);
	border-radius: 9px;
	text-decoration: none;
	transition: background 0.15s var(--fc-ease), color 0.15s var(--fc-ease);
}
.chargeforms-tools-nav-link:hover {
	background: var(--fc-bg-soft);
}
.chargeforms-tools-nav-link.is-active {
	background: var(--fc-primary-soft);
}
.chargeforms-tools-nav-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 34px;
	height: 34px;
	border-radius: 9px;
	background: var(--fc-bg);
	color: var(--fc-muted);
	transition: background 0.15s var(--fc-ease), color 0.15s var(--fc-ease);
}
.chargeforms-tools-nav-icon .dashicons {
	font-size: 18px;
	width: 18px;
	height: 18px;
}
.chargeforms-tools-nav-link.is-active .chargeforms-tools-nav-icon {
	background: var(--fc-gradient-primary);
	color: #fff;
}
.chargeforms-tools-nav-text {
	display: flex;
	flex-direction: column;
	gap: 1px;
	padding-top: 2px;
}
.chargeforms-tools-nav-label {
	font-size: var(--fc-text-base);
	font-weight: 600;
	color: var(--fc-text);
}
.chargeforms-tools-nav-link.is-active .chargeforms-tools-nav-label {
	color: var(--fc-primary-dark);
}
.chargeforms-tools-nav-desc {
	font-size: var(--fc-text-sm);
	color: var(--fc-muted);
	line-height: 1.4;
}

.chargeforms-tools-content {
	display: flex;
	flex-direction: column;
	gap: var(--fc-space-5);
}
.chargeforms-tool-card {
	background: #fff;
	border: 1px solid var(--fc-border);
	border-radius: 12px;
	box-shadow: var(--fc-card-shadow);
	padding: var(--fc-space-6);
	transition: box-shadow 0.2s var(--fc-ease);
}
.chargeforms-tool-card:hover {
	box-shadow: var(--fc-shadow-hover);
}
.chargeforms-tool-card-soon {
	background: var(--fc-bg);
}
.chargeforms-tool-card-head {
	display: flex;
	align-items: flex-start;
	gap: var(--fc-space-4);
	margin-bottom: var(--fc-space-5);
}
.chargeforms-tool-card-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: var(--fc-icon-xl);
	height: var(--fc-icon-xl);
	border-radius: 10px;
	background: var(--fc-primary-soft);
	color: var(--fc-primary);
}
.chargeforms-tool-card-icon .dashicons {
	font-size: 22px;
	width: 22px;
	height: 22px;
}
.chargeforms-tool-card-head h2 {
	margin: 0 0 4px;
	font-size: var(--fc-text-xl);
	font-weight: 600;
	color: var(--fc-text);
	padding: 0;
	border: none;
}
.chargeforms-tool-card-head p {
	margin: 0;
	font-size: var(--fc-text-base);
	color: var(--fc-muted);
	line-height: 1.5;
}
.chargeforms-tool-field-label {
	display: block;
	font-size: var(--fc-text-base);
	font-weight: 600;
	color: var(--fc-text);
	margin-bottom: var(--fc-space-2);
}
.chargeforms-tool-select {
	display: block;
	width: 100%;
	max-width: 420px;
	margin-bottom: var(--fc-space-4);
}
.chargeforms-export-select-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: var(--fc-space-2);
}
.chargeforms-export-select-head .chargeforms-tool-field-label {
	margin-bottom: 0;
}
.chargeforms-export-select-all .dashicons {
	font-size: 15px;
	width: 15px;
	height: 15px;
	vertical-align: text-bottom;
}
.chargeforms-export-checklist {
	list-style: none;
	margin: 0 0 var(--fc-space-5);
	padding: var(--fc-space-2);
	max-width: 420px;
	max-height: 260px;
	overflow-y: auto;
	border: 1px solid var(--fc-border);
	border-radius: 8px;
	background: var(--fc-bg);
}
.chargeforms-export-checklist li + li {
	margin-top: 1px;
}
.chargeforms-export-checklist label {
	display: flex;
	align-items: center;
	gap: var(--fc-space-2);
	padding: 7px var(--fc-space-2);
	border-radius: 6px;
	font-size: var(--fc-text-base);
	color: var(--fc-text);
	cursor: pointer;
	transition: background 0.12s ease;
}
.chargeforms-export-checklist label:hover {
	background: #fff;
}
.chargeforms-export-checklist input[type="checkbox"] {
	margin: 0;
	flex-shrink: 0;
}
.chargeforms-tool-dropzone {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--fc-space-2);
	max-width: 420px;
	padding: var(--fc-space-6) var(--fc-space-4);
	margin-bottom: var(--fc-space-5);
	border: 2px dashed var(--fc-border);
	border-radius: 10px;
	background: var(--fc-bg);
	color: var(--fc-muted);
	cursor: pointer;
	transition: border-color 0.15s var(--fc-ease), background 0.15s var(--fc-ease);
}
.chargeforms-tool-dropzone:hover {
	border-color: var(--fc-primary);
	background: var(--fc-primary-soft);
	color: var(--fc-primary-dark);
}
.chargeforms-tool-dropzone .dashicons {
	font-size: 26px;
	width: 26px;
	height: 26px;
}
.chargeforms-tool-dropzone-text {
	font-size: var(--fc-text-base);
	font-weight: 500;
}
.chargeforms-tool-dropzone input[type="file"] {
	/* Visually hidden but still focusable/clickable — the label IS the
	   click target, this just needs to exist for the browser's native
	   file picker and form submission. */
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
}
.chargeforms-tool-submit {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.chargeforms-status-grid {
	display: flex;
	flex-direction: column;
	gap: var(--fc-space-1);
}
.chargeforms-status-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--fc-space-4);
	padding: var(--fc-space-3) var(--fc-space-2);
	border-bottom: 1px solid var(--fc-border);
	flex-wrap: wrap;
}
.chargeforms-status-row:last-child {
	border-bottom: none;
}
.chargeforms-status-label {
	font-size: var(--fc-text-base);
	color: var(--fc-muted);
}
.chargeforms-status-value {
	font-size: var(--fc-text-base);
	font-weight: 600;
	color: var(--fc-text);
}
.chargeforms-status-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	justify-content: flex-end;
}
.chargeforms-status-pill {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: var(--fc-text-sm);
	font-weight: 600;
	padding: 3px 10px;
	border-radius: 999px;
}
.chargeforms-status-pill .dashicons {
	font-size: var(--fc-text-base);
	width: 13px;
	height: 13px;
}
.chargeforms-status-pill.is-ok {
	background: rgba(22, 166, 114, 0.12);
	color: var(--fc-success);
}
.chargeforms-status-pill.is-missing {
	background: rgba(229, 72, 77, 0.12);
	color: var(--fc-danger);
}

/* Migrator — source picker grid + per-source form list. */
.chargeforms-migrator-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: var(--fc-space-4);
}
.chargeforms-migrator-source {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--fc-space-2);
	padding: var(--fc-space-5);
	border: 1px solid var(--fc-border);
	border-radius: 12px;
	text-decoration: none;
	position: relative;
	transition: border-color 0.15s var(--fc-ease), box-shadow 0.15s var(--fc-ease), transform 0.15s var(--fc-ease);
}
.chargeforms-migrator-source:hover {
	border-color: var(--fc-primary-100);
	box-shadow: var(--fc-shadow-hover);
	transform: translateY(-1px);
}
.chargeforms-migrator-source.is-empty {
	opacity: 0.6;
}
.chargeforms-migrator-source-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--fc-icon-xl);
	height: var(--fc-icon-xl);
	border-radius: 10px;
	background: var(--fc-primary-soft);
	color: var(--fc-primary);
	margin-bottom: 2px;
}
.chargeforms-migrator-source-icon .dashicons {
	font-size: 22px;
	width: 22px;
	height: 22px;
}
.chargeforms-migrator-source-icon-logo,
.chargeforms-tool-card-icon-logo {
	background: #fff;
	border: 1px solid var(--fc-border);
}
.chargeforms-migrator-source-icon-logo img,
.chargeforms-tool-card-icon-logo img {
	width: 60%;
	height: 60%;
	object-fit: contain;
	border-radius: 4px;
}
.chargeforms-migrator-source-label {
	font-size: var(--fc-text-md);
	font-weight: 600;
	color: var(--fc-text);
}
.chargeforms-migrator-source-status {
	font-size: var(--fc-text-sm);
	color: var(--fc-muted);
}
.chargeforms-migrator-source .chargeforms-badge-soon {
	position: absolute;
	top: var(--fc-space-4);
	right: var(--fc-space-4);
}
.chargeforms-migrator-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--fc-space-1);
}
.chargeforms-migrator-list li {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--fc-space-4);
	padding: var(--fc-space-3) var(--fc-space-2);
	border-bottom: 1px solid var(--fc-border);
}
.chargeforms-migrator-list li:last-child {
	border-bottom: none;
}
.chargeforms-migrator-list-title {
	font-size: var(--fc-text-base);
	font-weight: 500;
	color: var(--fc-text);
}
.chargeforms-migrator-list .button .dashicons {
	font-size: 15px;
	width: 15px;
	height: 15px;
	vertical-align: text-bottom;
}

/* Activity Logs — timeline list. */
.chargeforms-activity-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
}
.chargeforms-activity-list li {
	display: flex;
	align-items: flex-start;
	gap: var(--fc-space-3);
	padding: var(--fc-space-3) var(--fc-space-2);
	border-bottom: 1px solid var(--fc-border);
}
.chargeforms-activity-list li:last-child {
	border-bottom: none;
}
.chargeforms-activity-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 30px;
	height: 30px;
	border-radius: 8px;
	background: var(--fc-bg);
	color: var(--fc-muted);
	font-size: 15px;
}
/* A deletion should read as a different weight of event than a routine
   edit at a glance — color-coded by what actually happened, not a flat
   grey for every row regardless of action. */
.chargeforms-activity-icon.is-success {
	background: rgba(22, 166, 114, 0.12);
	color: var(--fc-success);
}
.chargeforms-activity-icon.is-info {
	background: var(--fc-primary-soft);
	color: var(--fc-primary);
}
.chargeforms-activity-icon.is-danger {
	background: rgba(229, 72, 77, 0.12);
	color: var(--fc-danger);
}
.chargeforms-activity-body {
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.chargeforms-activity-desc {
	font-size: var(--fc-text-base);
	color: var(--fc-text);
}
.chargeforms-activity-meta {
	font-size: var(--fc-text-sm);
	color: var(--fc-muted);
}

.chargeforms-settings-content {
	background: #fff;
	border: 1px solid var(--fc-border);
	border-radius: 10px;
	box-shadow: var(--fc-card-shadow);
	padding: 24px 28px;
}
.chargeforms-settings-content h2:first-child {
	margin-top: 0;
}
.chargeforms-settings-content h2 {
	font-size: var(--fc-text-lg);
	font-weight: 600;
	padding-bottom: 12px;
	margin-bottom: 16px;
	border-bottom: 1px solid var(--fc-border);
}
.chargeforms-settings-content .form-table th {
	font-weight: 500;
	color: var(--fc-text);
	padding: 16px 12px 16px 0;
}
.chargeforms-settings-content .form-table td {
	padding: 12px;
}
.chargeforms-settings-content .form-table tr {
	border-bottom: 1px solid #f0f1f2;
}
.chargeforms-settings-content .form-table tr:last-child {
	border-bottom: none;
}
/* Generalized from Settings-only to every screen — text/select/textarea
   inputs elsewhere (Entries filters, per-form Settings, Tools, Payments)
   had zero custom styling before this and fell back to WP core's own
   input look, a real inconsistency with Settings' own already-the reference product-
   leaning treatment. border-radius corrected from an invented 6px to
   Element UI's exact $--input-border-radius token (7px, same as
   $--border-radius-base — _element_ui_var.scss); padding widened toward
   their real ~40px input height ($--input-height, same file). */
.chargeforms-wrap input[type="text"],
.chargeforms-wrap input[type="email"],
.chargeforms-wrap input[type="password"],
.chargeforms-wrap input[type="url"],
.chargeforms-wrap input[type="number"],
.chargeforms-wrap textarea {
	border: 1px solid var(--fc-border);
	border-radius: var(--fc-radius-md);
	padding: 10px 15px;
	font-size: var(--fc-text-base);
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.chargeforms-wrap select {
	border: 1px solid var(--fc-border);
	border-radius: var(--fc-radius-md);
	padding: 10px 34px 10px 15px;
	font-size: var(--fc-text-base);
	color: var(--fc-text);
	background: #fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none'><path d='M1 1L5 5L9 1' stroke='%23606266' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>") no-repeat right 14px center;
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.chargeforms-wrap input[type="text"]:focus,
.chargeforms-wrap input[type="email"]:focus,
.chargeforms-wrap input[type="password"]:focus,
.chargeforms-wrap input[type="url"]:focus,
.chargeforms-wrap input[type="number"]:focus,
.chargeforms-wrap select:focus,
.chargeforms-wrap textarea:focus {
	border-color: var(--fc-primary);
	box-shadow: 0 0 0 3px var(--fc-primary-soft);
	outline: none;
}
.chargeforms-wrap select::-ms-expand {
	display: none;
}

/* Support */
.chargeforms-support-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 16px;
	margin-top: 20px;
}
.chargeforms-support-card {
	background: #fff;
	border: 1px solid var(--fc-border);
	border-radius: 8px;
	box-shadow: var(--fc-card-shadow);
	padding: 22px;
}
.chargeforms-support-card-head {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 4px;
}
.chargeforms-support-card-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: var(--fc-radius-md);
	flex-shrink: 0;
}
.chargeforms-support-card h2 {
	margin: 0;
	font-size: var(--fc-text-lg);
}
.chargeforms-support-card > p:first-of-type {
	color: var(--fc-muted);
	margin-top: 0;
}
.chargeforms-support-card ul {
	margin: 0;
	padding-left: 18px;
	/* WP core's own admin CSS resets every <ul> to list-style:none —
	   found by inspecting computed styles, not guessing: this list
	   rendered with zero markers and no visual indication its four lines
	   were a sequential how-to, not four unrelated sentences. */
	list-style: disc;
}
.chargeforms-support-card li {
	margin-bottom: 6px;
}
/* Numbered step list (Get Started card) — a plain bulleted list read as
   four unrelated facts rather than an ordered sequence, which is exactly
   what this content actually is. */
.chargeforms-support-steps {
	list-style: none !important;
	padding-left: 0 !important;
	margin: 0 !important;
	counter-reset: chargeforms-step;
}
.chargeforms-support-steps li {
	list-style: none;
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin-bottom: 14px;
	counter-increment: chargeforms-step;
}
.chargeforms-support-steps li:last-child {
	margin-bottom: 0;
}
.chargeforms-support-steps li::before {
	content: counter(chargeforms-step);
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	border-radius: 999px;
	background: var(--fc-primary-soft);
	color: var(--fc-primary);
	font-size: 12px;
	font-weight: 700;
	margin-top: 1px;
}
.chargeforms-support-steps li span {
	line-height: 1.5;
}
.chargeforms-support-columns {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
	gap: 16px;
	margin-top: 20px;
}
.chargeforms-guide-list {
	border-top: 1px solid var(--fc-border);
}
.chargeforms-guide-item {
	border-bottom: 1px solid var(--fc-border);
	margin: 0 -12px;
	padding: 10px 12px;
	border-radius: 6px;
	transition: background var(--fc-motion-fast, 0.12s) ease;
	cursor: pointer;
	font-size: var(--fc-text-md);
	font-weight: 500;
	color: var(--fc-text);
	text-decoration: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
}
.chargeforms-guide-item:hover {
	background: var(--fc-bg-soft, #f5f7fa);
	color: var(--fc-text);
}
.chargeforms-guide-item svg {
	flex-shrink: 0;
	color: var(--fc-muted-light);
}
.chargeforms-guide-item:hover svg {
	color: var(--fc-primary);
}
.chargeforms-system-info-wrap {
	position: relative;
}
.chargeforms-system-info {
	width: 100%;
	font-family: monospace;
	font-size: var(--fc-text-sm);
	border: 1px solid var(--fc-border);
	border-radius: 6px;
}
.chargeforms-copy-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	position: absolute;
	top: 8px;
	right: 8px;
	padding: 4px 10px !important;
	font-size: 12px !important;
	line-height: 1.4 !important;
	height: auto !important;
	min-height: 0 !important;
}
.chargeforms-copy-btn.is-copied {
	color: var(--fc-success, #00a86b) !important;
	border-color: var(--fc-success, #00a86b) !important;
}

/* Entries */
.chargeforms-entries-summary td {
	vertical-align: middle;
}

/* ==========================================================================
   Entries screen — premium redesign
   The per-form Entries table is the screen a site owner opens most often
   (every new lead lands here), so it gets the same "lifted card" treatment
   as the rest of the admin instead of a bare wp-list-table. Rules below
   come after the base rules above and win ties on the cascade rather than
   needing !important everywhere — keep new entries-screen rules in this
   block so the whole redesign stays in one place.
   ========================================================================== */

.chargeforms-entries-wrap {
	max-width: 1440px;
}

.chargeforms-entries-form-head {
	padding: 4px 0 20px;
}
.chargeforms-entries-form-head h1.wp-heading-inline {
	font-size: var(--fc-text-2xl);
	font-weight: 700;
	color: var(--fc-text);
}
.chargeforms-entries-form-actions .button {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: 36px;
	border-radius: 8px;
	font-size: var(--fc-text-sm);
	font-weight: 500;
	box-shadow: none;
	border-color: var(--fc-border);
}
.chargeforms-entries-form-actions .button-primary {
	background: var(--fc-gradient-primary);
	border-color: transparent;
	box-shadow: 0 2px 6px rgba(108, 78, 245, 0.28);
}
.chargeforms-entries-form-actions .button-primary:hover {
	box-shadow: 0 4px 12px rgba(108, 78, 245, 0.36);
	transform: translateY(-1px);
}

/* Toolbar — elevated card, not a bare row of controls floating on the page background */
.chargeforms-entries-toolbar {
	background: #fff;
	border: 1px solid var(--fc-border);
	border-radius: 12px;
	box-shadow: var(--fc-card-shadow);
	padding: 10px 14px;
	margin-bottom: 16px;
}
.chargeforms-entries-toolbar .button {
	border-radius: 7px;
	font-size: var(--fc-text-sm);
}
.chargeforms-filter-toggle-btn[aria-expanded="true"] {
	background: var(--fc-primary-soft);
	border-color: var(--fc-primary-100);
	color: var(--fc-primary-dark);
}
.chargeforms-filter-count {
	background: var(--fc-primary);
	color: #fff;
	border-radius: 999px;
	font-size: var(--fc-text-2xs);
	font-weight: 700;
	padding: 1px 7px;
	margin-left: 4px;
}
.chargeforms-search-box {
	background: var(--fc-bg);
	border: 1px solid var(--fc-border);
	border-radius: 8px;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.chargeforms-search-box:focus-within {
	border-color: var(--fc-primary);
	box-shadow: 0 0 0 3px var(--fc-primary-soft);
	background: #fff;
}
.chargeforms-search-box input[type="search"] {
	background: transparent;
	font-size: var(--fc-text-sm);
}

/* Table — wrapped as a card with a sticky, tinted header instead of the flat wp-list-table look */
.chargeforms-table-scroll {
	background: #fff;
	border: 1px solid var(--fc-border);
	border-radius: 12px;
	box-shadow: var(--fc-card-shadow);
	overflow: auto;
}
.chargeforms-entries-table {
	border: none;
	margin: 0;
}
/* white-space: nowrap avoids a header label wrapping onto a second line
   the moment its column is narrower than the label. On its own this
   wasn't enough to fix a real layout bug found live: the per-field
   headers (Name/Email/Message/Booking Calendar) reused the Forms List
   page's `.chargeforms-sortable-col` class, whose OWN rule (elsewhere in
   this file, written for an <a> sort link) sets `display: inline-flex` —
   applied straight to a `<th>` here, that pulls it out of the table's
   column grid entirely, so all four collapsed to stacked, overlapping,
   intrinsic-width boxes sitting on top of an otherwise perfectly normal,
   correctly-separated body row. Renamed to its own class
   (.chargeforms-entries-sort-th, admin/class-entries-page.php +
   assets/js/admin.js) specifically so it can never again silently inherit
   a rule meant for a different element in a different screen. */
.chargeforms-entries-table thead th,
.chargeforms-entries-table thead td {
	position: sticky;
	top: 0;
	z-index: 2;
	background: #ffffff;
	border-bottom: 1px solid var(--fc-border);
	box-shadow: none;
	font-size: var(--fc-text-xs);
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--fc-muted);
	padding: 12px 14px;
	white-space: nowrap;
	display: table-cell;
}
.chargeforms-entries-table .chargeforms-entries-sort-th {
	cursor: pointer;
}
.chargeforms-entries-table .chargeforms-entries-sort-th:hover {
	color: var(--fc-text);
}
.chargeforms-entries-table .chargeforms-entries-sort-th .chargeforms-sort-icon {
	vertical-align: middle;
	opacity: 0.45;
	margin-left: 2px;
}
.chargeforms-entries-table .chargeforms-sort-link {
	color: inherit;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	text-transform: uppercase;
	letter-spacing: 0.02em;
}
.chargeforms-entries-table .chargeforms-sort-link.is-active {
	color: var(--fc-primary-dark);
}
.chargeforms-entries-table .chargeforms-sort-icon,
.chargeforms-entries-table .chargeforms-sort-link .dashicons {
	font-size: 14px;
	width: 14px;
	height: 14px;
	opacity: 0.55;
}
.chargeforms-entries-table tbody td {
	padding: 13px 14px;
	font-size: var(--fc-text-base);
	color: var(--fc-text);
	border-bottom: 1px solid #eef0f3;
	vertical-align: middle;
}
.chargeforms-entries-table.striped tbody tr:nth-child(odd) {
	background: #fff;
}
.chargeforms-entries-table.striped tbody tr:nth-child(even) {
	background: #fbfcfe;
}
/* Mockup tints an unread entry's whole row pale yellow (#fffdf5) rather
   than relying solely on the small dot next to the ID — a real scanability
   cue this table was missing. Takes priority over the odd/even stripe. */
.chargeforms-entries-table.striped tbody tr.chargeforms-row-unread {
	background: #fffdf5;
}
.chargeforms-entries-table tbody tr:hover {
	background: var(--fc-primary-soft) !important;
}
.chargeforms-entries-table tbody tr:last-child td {
	border-bottom: none;
}
.chargeforms-entries-table.is-compact tbody td {
	padding: 7px 14px;
}

/* ID column — small gradient avatar chip instead of a bare number, gives
   every row a visual anchor. Scoped to .chargeforms-entries-table: the
   Entries page's own markup has no literal "#" (its header label is just
   "#" as translatable text, and the cell is a bare number), but the Forms
   list table reuses the same .chargeforms-col-id class with a literal "#"
   already in its PHP markup — applying this unscoped doubled up as "##1"
   in Forms list rows and "# ID" in its header. */
.chargeforms-entries-table .chargeforms-col-id {
	font-weight: 600;
	white-space: nowrap;
}
.chargeforms-entries-table tbody td.chargeforms-col-id::before {
	content: "#";
	color: var(--fc-muted);
	font-weight: 500;
	margin-right: 1px;
}
/* Exact literal values from the reference product's .ff_entry_status_dot (entries.scss)
   — this was previously defined twice in this stylesheet with drifting
   values (a real duplicate-rule bug, not intentional); consolidated
   here to their real, exact colors: unread #409eff, read a transparent
   fill with an inset ring (not a solid gray dot), trashed #f56c6c. */
.chargeforms-status-dot-inline {
	display: inline-block;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	margin-right: 8px;
	vertical-align: middle;
	flex-shrink: 0;
}
.chargeforms-status-dot-inline.is-unread {
	background: #409eff;
	box-shadow: none;
}
.chargeforms-status-dot-inline.is-trashed {
	background: #f56c6c;
	box-shadow: none;
}
.chargeforms-status-dot-inline.is-read {
	background: transparent;
	box-shadow: inset 0 0 0 1px #c0c4cc;
}

/* Status pill */
.chargeforms-entries-table .chargeforms-status {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 4px 10px;
	border-radius: 999px;
	font-size: var(--fc-text-2xs);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.02em;
}
.chargeforms-status-unread {
	background: var(--fc-primary-soft);
	color: var(--fc-primary-dark);
}
.chargeforms-status-read {
	background: #f1f2f4;
	color: var(--fc-muted);
}

/* Row action icons — always visible, no hover-only reveal (discoverability over minimalism on a data table) */
.chargeforms-col-actions {
	text-align: right;
}
.chargeforms-row-actions-icons {
	display: inline-flex;
	gap: 6px;
	justify-content: flex-end;
}

/* Empty state */
.chargeforms-entries-wrap .chargeforms-empty-state {
	background: var(--fc-surface);
	border: 1px dashed var(--fc-primary-100);
	border-radius: var(--fc-radius-xl);
	padding: 56px 24px;
}
.chargeforms-entries-wrap .chargeforms-empty-state p {
	font-size: var(--fc-text-md);
	color: var(--fc-muted);
}
.chargeforms-row-actions .chargeforms-icon-action[data-tooltip]::before,
.chargeforms-row-actions .chargeforms-icon-action[data-tooltip]::after,
.chargeforms-row-actions-icons .chargeforms-icon-action[data-tooltip]::before,
.chargeforms-row-actions-icons .chargeforms-icon-action[data-tooltip]::after {
	display: none;
}
/* WordPress' legacy .subsubsub status links float left. Without clearing
   that float, the first empty state wraps beside the links (a 266px-wide
   panel on a 390px viewport and a visibly off-centre chart on desktop),
   unlike the full-width panel used by Fluent Forms. */
.chargeforms-entries-wrap > .chargeforms-empty-state,
.chargeforms-entries-wrap > .chargeforms-list-toolbar,
.chargeforms-entries-wrap > .chargeforms-table-scroll {
	clear: both;
}

/* Footer / pagination — pill-styled, grouped as one bar under the table card */
.chargeforms-entries-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 14px;
	padding: 10px 14px;
	background: #fff;
	border: 1px solid var(--fc-border);
	border-radius: 12px;
	box-shadow: var(--fc-card-shadow);
}
.chargeforms-pagination {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: var(--fc-text-sm);
	color: var(--fc-muted);
}
.chargeforms-pagination-links {
	display: inline-flex;
	align-items: center;
	gap: 4px;
}
.chargeforms-pagination-links .button {
	border-radius: 7px;
	min-width: 30px;
	height: 30px;
	padding: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.chargeforms-pagination-current {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 30px;
	height: 30px;
	border-radius: 7px;
	background: var(--fc-gradient-primary);
	color: #fff;
	font-weight: 700;
	font-size: var(--fc-text-sm);
}
.chargeforms-per-page-form select,
.chargeforms-goto-page-form input[type="number"] {
	border-radius: 7px;
	font-size: var(--fc-text-sm);
}

/* Global Settings > Email > Email Delivery — SMTP screen
   (docs/SMTP_ARCHITECTURE.md). Server renders an empty container;
   assets/js/email-delivery.js owns everything inside it. */
.chargeforms-email-delivery {
	max-width: 720px;
}
.chargeforms-ed-card {
	background: #fff;
	border: 1px solid #dadbdd;
	border-radius: 8px;
	box-shadow: var(--fc-shadow-sm);
	padding: 20px;
	margin-bottom: 18px;
}
.chargeforms-ed-card h3 {
	margin: 0 0 12px;
}
.chargeforms-ed-load-error {
	border-color: #f7c9c5;
	background: #fdeceb;
	color: #a52318;
}
.chargeforms-ed-load-error p {
	margin: 0 0 12px;
}
.chargeforms-ed-card-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 12px;
	flex-wrap: wrap;
	gap: 8px;
}
.chargeforms-ed-card-head h3 {
	margin: 0;
}
.chargeforms-ed-empty {
	text-align: center;
	padding: 32px 20px;
}
.chargeforms-ed-empty p {
	color: #606266;
	margin: 0 0 14px;
}
.chargeforms-ed-summary-head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 14px;
	flex-wrap: wrap;
}
.chargeforms-ed-summary-label {
	font-size: 12.5px;
	color: #606266;
}
.chargeforms-ed-summary-name {
	font-size: 18px;
	font-weight: 700;
	margin: 3px 0;
}
.chargeforms-ed-summary-email {
	font-size: 13px;
	color: #606266;
}
.chargeforms-ed-summary-actions {
	display: flex;
	gap: 8px;
	flex-shrink: 0;
}
.chargeforms-ed-add-row {
	margin-bottom: 18px;
}
.chargeforms-ed-badge {
	display: inline-block;
	font-size: 10.5px;
	font-weight: 700;
	padding: 3px 9px;
	border-radius: 999px;
	vertical-align: middle;
}
.chargeforms-ed-badge.is-success {
	color: var(--fc-success-dark);
	background: var(--fc-success-soft);
}
.chargeforms-ed-badge.is-failed {
	color: var(--fc-danger);
	background: var(--fc-danger-soft);
}
.chargeforms-ed-badge.is-neutral {
	color: #606266;
	background: #f0f0f1;
}
.chargeforms-ed-field {
	margin-bottom: 14px;
}
.chargeforms-ed-field label {
	display: block;
	font-size: 12.5px;
	font-weight: 600;
	color: #303133;
	margin-bottom: 5px;
}
.chargeforms-ed-field input[type="text"],
.chargeforms-ed-field input[type="email"],
.chargeforms-ed-field input[type="password"],
.chargeforms-ed-field input[type="number"],
.chargeforms-ed-field input[type="search"],
.chargeforms-ed-field select {
	width: 100%;
	max-width: 420px;
	padding: 8px 11px;
	border: 1px solid #dadbdd;
	border-radius: 7px;
	font-size: 13px;
}
.chargeforms-ed-field label input[type="checkbox"] {
	margin-right: 4px;
}
/* Provider picker — a real gap vs. the approved redesign: this was a
   plain <select>, hiding all 9 real providers (Gmail, Microsoft 365,
   Amazon SES, SendGrid, Mailgun, Brevo, Postmark, Zoho, Custom) behind
   one click to even see the list. A visual grid shows every option at
   once, matching the mockup. */
.chargeforms-ed-provider-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
	gap: 8px;
	max-width: 560px;
}
.chargeforms-ed-provider-card {
	border: 1.5px solid #dadbdd;
	background: #fff;
	border-radius: 7px;
	padding: 10px 8px;
	font-size: 12px;
	font-weight: 600;
	color: #1e1f21;
	cursor: pointer;
	text-align: center;
	transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.chargeforms-ed-provider-card:hover {
	border-color: #b39dfa;
}
.chargeforms-ed-provider-card.is-active {
	border-color: #6c4ef5;
	background: #f7f5ff;
	color: #6c4ef5;
}
.chargeforms-ed-row {
	display: flex;
	gap: 16px;
	flex-wrap: wrap;
}
.chargeforms-ed-row .chargeforms-ed-field {
	flex: 1;
	min-width: 200px;
}
.chargeforms-ed-field-narrow {
	max-width: 120px;
	flex: 0 0 120px !important;
}
.chargeforms-ed-password-masked {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 0;
}
.chargeforms-ed-hint {
	font-size: 12px;
	color: #606266;
	margin: -8px 0 14px;
}
.chargeforms-ed-warning {
	font-size: 12.5px;
	color: var(--fc-warning-dark);
	background: var(--fc-warning-soft);
	border: 1px solid var(--fc-warning-border);
	border-radius: 7px;
	padding: 9px 12px;
	margin: 0 0 14px;
}
.chargeforms-ed-note {
	font-size: 12.5px;
	color: var(--fc-success-dark);
	margin: 0 0 14px;
}
.chargeforms-ed-form-error {
	font-size: 12.5px;
	color: var(--fc-danger);
	background: var(--fc-danger-soft);
	border-radius: 7px;
	padding: 9px 12px;
	margin: 0 0 14px;
}
.chargeforms-ed-form-actions {
	display: flex;
	gap: 8px;
	margin: 4px 0 18px;
}
.chargeforms-ed-test-result {
	border-radius: 7px;
	padding: 12px 14px;
	margin-top: 12px;
	font-size: 13px;
}
.chargeforms-ed-test-result.is-success {
	background: var(--fc-success-soft);
	color: var(--fc-success-dark);
}
.chargeforms-ed-test-result.is-failed {
	background: var(--fc-danger-soft);
	color: #7a1f18;
}
.chargeforms-ed-test-result p {
	margin: 4px 0 0;
}
.chargeforms-ed-test-result details {
	margin-top: 8px;
	font-size: 12px;
}
.chargeforms-ed-muted {
	color: #909399;
	font-size: 12px;
}
.chargeforms-ed-row-actions {
	display: flex;
	gap: 10px;
	white-space: nowrap;
}
.chargeforms-ed-delete {
	color: var(--fc-danger);
}
.chargeforms-ed-log-filters {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 12px;
	flex-wrap: wrap;
}
.chargeforms-ed-log-filters input[type="search"] {
	margin-left: auto;
	padding: 6px 10px;
	border: 1px solid #dadbdd;
	border-radius: 7px;
	font-size: 12.5px;
}
.chargeforms-ed-modal-overlay {
	position: fixed;
	inset: 0;
	background: rgba(15, 23, 42, 0.45);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 100000;
}
.chargeforms-ed-modal {
	background: #fff;
	border-radius: 10px;
	padding: 24px;
	max-width: 400px;
	box-shadow: 0 20px 50px rgba(15, 23, 42, 0.3);
}
.chargeforms-ed-modal h3 {
	margin: 0 0 10px;
}
.chargeforms-ed-modal p {
	color: #606266;
	font-size: 13.5px;
}
.chargeforms-ed-modal-actions {
	display: flex;
	gap: 8px;
	margin-top: 16px;
}
@media (max-width: 782px) {
	.chargeforms-ed-row {
		flex-direction: column;
	}
	.chargeforms-ed-field-narrow {
		max-width: 100%;
		flex: 1 !important;
	}
}

/* Email Delivery screen — additions from the production-quality pass
   (docs/SMTP_PRODUCTION_AUDIT.md): connection health diagnostics,
   clickable/keyboard-operable log detail rows. */
.chargeforms-ed-diagnostics {
	margin-top: 14px;
	padding-top: 14px;
	border-top: 1px solid #f0f0f1;
	font-size: 12.5px;
}
.chargeforms-ed-diag-row {
	margin-bottom: 4px;
	color: #606266;
}
.chargeforms-ed-diag-row span {
	font-weight: 600;
	color: #303133;
	margin-right: 4px;
}
/* Real gap found live (user screenshot): the log table had no column
   sizing at all, so Recipient/Subject (unbounded-length real values)
   pushed Date off the right edge, cut off, on every normal-width
   screen — not just a narrow one. Truncating those two with an
   ellipsis (full value still available via each row's own expand-on-
   click detail panel) keeps the table inside the card at typical
   widths, so .chargeforms-table-scroll's horizontal scroll is a rare
   fallback again, not the default state. */
.chargeforms-ed-card table.widefat th,
.chargeforms-ed-card table.widefat td {
	padding: 9px 12px;
	font-size: 12.5px;
}
.chargeforms-ed-card table.widefat td:nth-child(2),
.chargeforms-ed-card table.widefat td:nth-child(3) {
	max-width: 200px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.chargeforms-ed-log-row {
	cursor: pointer;
}
.chargeforms-ed-log-row:hover {
	background: #f2effe;
}
.chargeforms-ed-log-row:focus-visible {
	outline: 2px solid var(--fc-accent);
	outline-offset: -2px;
}
.chargeforms-ed-log-detail-row td {
	background: #ffffff;
	padding: 14px 16px;
}
.chargeforms-ed-log-detail {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 8px 20px;
	font-size: 12.5px;
}
.chargeforms-ed-log-detail div {
	word-break: break-word;
}
@media (max-width: 782px) {
	.chargeforms-ed-log-detail {
		grid-template-columns: 1fr;
	}
	.chargeforms-ed-log-filters input[type="search"] {
		margin-left: 0;
		width: 100%;
	}
	.chargeforms-ed-summary-head {
		flex-direction: column;
	}
	.chargeforms-ed-summary-actions {
		width: 100%;
	}
	.chargeforms-ed-summary-actions .button {
		flex: 1;
	}
}

/* Shared page-title + subtitle block — matches design_handoff_chargeforms's
   <h1> + subtitle pattern used across most screens (Entries/Payments got
   their own bespoke classes earlier; this is the reusable version for
   screens touched from here on). */
.chargeforms-page-title-block h1 {
	margin: 0 0 3px;
}
.chargeforms-page-subtitle {
	font-size: 13px;
	color: #606266;
	margin-bottom: 18px;
}

/* Global Settings > License — "What Pro adds" card
   (design_handoff_chargeforms's License screen). */
.chargeforms-license-subtitle {
	font-size: 13px;
	color: #606266;
	margin: -8px 0 18px;
}
.chargeforms-license-pro-card {
	background: #fff;
	border: 1px solid #dadbdd;
	border-radius: 8px;
	padding: 22px;
	box-shadow: var(--fc-shadow-sm);
	margin-top: 18px;
	max-width: 640px;
}
.chargeforms-license-pro-card h3 {
	margin: 0 0 4px;
	font-size: 15px;
}
.chargeforms-license-pro-intro {
	font-size: 12.5px;
	color: #909399;
	margin: 0 0 16px;
}
.chargeforms-license-pro-item {
	display: flex;
	gap: 11px;
	padding: 11px 0;
	border-top: 1px solid #f0f0f1;
}
.chargeforms-license-pro-star {
	width: 18px;
	height: 18px;
	border-radius: 5px;
	background: var(--fc-warning-soft);
	color: var(--fc-warning-dark);
	font-size: 11px;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	margin-top: 1px;
}
.chargeforms-license-pro-name {
	font-size: 13px;
	font-weight: 600;
}
.chargeforms-license-pro-desc {
	font-size: 12px;
	color: #606266;
	line-height: 1.5;
}

/* Per-form Settings header — back link + title/subtitle block
   (design_handoff_chargeforms's per-form Settings screen). */
.chargeforms-form-settings-head {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
	margin: 16px 0 18px;
}
.chargeforms-form-settings-back {
	font-size: 13px;
	color: #606266;
	text-decoration: none;
}
.chargeforms-form-settings-back:hover {
	color: var(--fc-accent);
}
.chargeforms-form-settings-head .chargeforms-page-title-block {
	margin: 0;
}
.chargeforms-form-settings-head .chargeforms-page-title-block h1 {
	margin: 0;
}
.chargeforms-form-settings-head .chargeforms-page-subtitle {
	margin-bottom: 0;
	font-size: 12.5px;
	color: #909399;
}

/* Tools > Overview — the design's single-page dashboard landing view
   (design_handoff_chargeforms's Tools screen). Every card here links to
   the existing full section rather than duplicating its UI. */
.chargeforms-tools-overview {
	display: flex;
	flex-direction: column;
	gap: var(--fc-space-5);
}
.chargeforms-tools-card-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 14px;
}
.chargeforms-tools-overview-card {
	background: #fff;
	border: 1px solid var(--fc-border);
	border-radius: 8px;
	padding: 18px;
	box-shadow: var(--fc-card-shadow);
}
.chargeforms-tools-overview-card-head {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 10px;
}
.chargeforms-tools-overview-card-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 8px;
	background: var(--fc-primary-soft);
	color: var(--fc-primary);
	flex-shrink: 0;
}
.chargeforms-tools-overview-card-label {
	font-size: 14px;
	font-weight: 700;
}
.chargeforms-tools-overview-card-desc {
	font-size: 12.5px;
	color: #606266;
	line-height: 1.5;
	margin: 0 0 14px;
	min-height: 34px;
}
.chargeforms-tools-log-summaries {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 18px;
}
/* Real bug (live Playwright overflow audit, 1024px): a grid item's default
   min-width is `auto`, not 0 — without this, a long webhook URL inside
   .chargeforms-api-log-summary-url refused to actually shrink/truncate,
   pushing the whole card (and the page) wider than the viewport instead
   of eliding the text as its own overflow/text-overflow rules intended. */
.chargeforms-tools-log-summaries > .chargeforms-tool-card {
	min-width: 0;
}
.chargeforms-tool-card-head-row {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: var(--fc-space-4);
}
.chargeforms-tool-card-head-row h2 {
	margin: 0;
	font-size: 14px;
}
.chargeforms-tool-card-head-row a {
	margin-left: auto;
	font-size: 12px;
}
.chargeforms-tool-card-head-note {
	margin-left: auto;
	font-size: 11px;
	color: #909399;
}
.chargeforms-api-log-summary-list {
	margin: 0;
	padding: 0;
	list-style: none;
}
.chargeforms-api-log-summary-list li {
	display: flex;
	align-items: center;
	gap: 9px;
	padding: 9px 0;
	border-top: 1px solid #f0f0f1;
	font-size: 12px;
	min-width: 0;
}
.chargeforms-api-log-summary-url {
	flex: 1;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-family: ui-monospace, monospace;
}
.chargeforms-api-log-summary-meta {
	color: #909399;
	flex-shrink: 0;
}
@media (max-width: 900px) {
	.chargeforms-tools-log-summaries {
		grid-template-columns: 1fr;
	}
}

/**
 * Toast — Phase 3 (docs/design/CHARGEFORMS_PRODUCT_UI_SPEC.md §29,
 * Interaction Patterns §4). A real, tested toast system already existed
 * (assets/src/builder/shared/toast/) but only inside the React Builder's
 * own bundle — every plain-PHP admin screen (Settings, Entries, Forms
 * List, etc.) had no toast at all. This is the same visual contract
 * (`.fc-toast*` class names, `--fc-success/-danger/-warning/-info`
 * semantic colors, the identical fade+slide-in animation) reimplemented
 * in plain CSS/JS for those screens — see assets/js/toast.js. Not a
 * competing design, a second runtime for the same component, same
 * reasoning already documented for the Vue/React split in
 * CHARGEFORMS_INTERACTION_PATTERNS.md §12.
 */
.fc-toast-viewport {
	position: fixed;
	right: var(--fc-space-4);
	bottom: var(--fc-space-4);
	z-index: 100000; /* above the WP admin bar (99999), below nothing this plugin renders */
	display: flex;
	flex-direction: column-reverse;
	gap: 8px;
	max-width: 360px;
	pointer-events: none;
}
.fc-toast {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	padding: 10px 12px;
	background: var(--fc-surface);
	border: 1px solid var(--fc-border);
	border-radius: var(--fc-radius-md);
	box-shadow: var(--fc-shadow-lg);
	font-size: var(--fc-text-base);
	color: var(--fc-text);
	pointer-events: auto;
	animation: fc-toast-in var(--fc-motion-base) var(--fc-ease);
}
.fc-toast-success .fc-toast-icon { color: var(--fc-success); }
.fc-toast-error .fc-toast-icon { color: var(--fc-danger); }
.fc-toast-warning .fc-toast-icon { color: var(--fc-warning); }
.fc-toast-info .fc-toast-icon { color: var(--fc-info); }
.fc-toast-icon {
	flex-shrink: 0;
	margin-top: 1px;
	display: inline-flex;
}
.fc-toast-message {
	flex: 1;
	line-height: 1.4;
}
.fc-toast-dismiss {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	padding: 0;
	border: none;
	background: none;
	color: var(--fc-muted);
	cursor: pointer;
	border-radius: 4px;
}
.fc-toast-dismiss:hover {
	background: var(--fc-primary-50);
	color: var(--fc-text);
}
.fc-toast-dismiss:focus-visible {
	outline: none;
	box-shadow: 0 0 0 2px var(--fc-primary-100);
}
@keyframes fc-toast-in {
	from { opacity: 0; transform: translateY(8px); }
	to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
	.fc-toast {
		animation-duration: 0.001ms;
	}
}
@media (max-width: 480px) {
	.fc-toast-viewport {
		left: var(--fc-space-3);
		right: var(--fc-space-3);
		max-width: none;
	}
}


/* Tools and Integrations: consistent SVG sizing, task alignment and reflow. */
.chargeforms-tools-nav-icon > svg,
.chargeforms-tools-overview-card-icon > svg {
	width: 20px;
	height: 20px;
	display: block;
	flex-shrink: 0;
}
.chargeforms-tool-card-icon > svg {
	width: 24px;
	height: 24px;
	display: block;
	flex-shrink: 0;
}
.chargeforms-tools-nav-text,
.chargeforms-tools-content,
.chargeforms-tool-card-head > div,
.chargeforms-integration-card,
.chargeforms-integration-card-head h3 {
	min-width: 0;
}
.chargeforms-tools-nav-link {
	align-items: center;
}
.chargeforms-tools-nav-text {
	padding-top: 0;
}
.chargeforms-tools-card-grid {
	grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
}
.chargeforms-tools-overview-card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
}
.chargeforms-tools-overview-card-head,
.chargeforms-tools-overview-card-desc {
	margin: 0;
}
.chargeforms-tools-overview-card > .button {
	margin-top: auto;
}
.chargeforms-integrations-grid {
	grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
	align-items: stretch;
}
.chargeforms-integration-icon svg {
	width: 26px;
	height: 26px;
}
.chargeforms-integration-icon--mailchimp {
	background: #ffe01b;
	border-color: #ffe01b;
}
.chargeforms-integration-card-head {
	min-height: 48px;
}
.chargeforms-integration-card-head h3 {
	line-height: 1.35;
	overflow-wrap: anywhere;
}
.chargeforms-integration-card form p:has(button) {
	row-gap: 10px;
}
.chargeforms-integration-test-result {
	flex-basis: 100%;
	margin-left: 0;
	overflow-wrap: anywhere;
}
.chargeforms-tools-nav-link:focus-visible,
.chargeforms-tools-overview-card a:focus-visible,
.chargeforms-integration-card a:focus-visible,
.chargeforms-integration-card button:focus-visible {
	outline: 2px solid var(--fc-primary);
	outline-offset: 3px;
}
@media (max-width: 960px) and (min-width: 783px) {
	.chargeforms-tools-shell {
		grid-template-columns: 230px minmax(0, 1fr);
		gap: 16px;
	}
	.chargeforms-tools-log-summaries {
		grid-template-columns: 1fr;
	}
}
@media (max-width: 782px) {
	.chargeforms-tools-shell,
	.chargeforms-tools-log-summaries,
	.chargeforms-integrations-grid {
		grid-template-columns: minmax(0, 1fr);
	}
	.chargeforms-tools-nav {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
	}
	.chargeforms-tool-card,
	.chargeforms-integration-card {
		padding: 18px;
	}
}