/* ClearFund Admin Styles */
/* Bundled Inter webfont (self-hosted — no external requests; wp.org compliant) */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/inter-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/inter-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/inter-latin-700-normal.woff2") format("woff2"); }
:root {
--cf-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
/* Brand — three tones on one hue (H≈158), each defined by the contrast it can
carry. Mirrors CF_Settings::BRAND_* — keep the two in step.
Verified: brand on white 4.79:1, white on brand 4.79:1, mid on white 3.11:1
(clears the 3:1 non-text bar and nothing more), white on brand-dark 7.04:1,
brand-ink on brand-soft 8.66:1, brand on brand-wash 4.56:1, lite 2.25:1. */
--cf-brand: #068355; /* the ONLY brand green allowed to be text, or to sit
under white text — matches CF_Settings::BRAND_ACCENT */
--cf-brand-mid: #09A76C; /* the brand you see on the furniture: header rule,
banner/callout borders, bars, fills, icons, focus
rings. Non-text only (3.11:1) */
--cf-brand-dark: #006644; /* hover / active */
--cf-brand-soft: #CFF8EA; /* badge / tint bg */
--cf-brand-ink: #004D33; /* text on soft */
--cf-brand-wash: #F0FCF8; /* row hover */
--cf-brand-lite: #00C583; /* the brightest logo green — decorative fills ONLY,
2.25:1 on white so never text and never a border */
/* Status — green reserved for positive/money states.
Darkened from #16a34a, which was 3.30:1 on white and failed AA in the two places
this is used as TEXT (.cf-setup-ring__num, and white-on-green .cf-step-num).
Kept at H≈143 so it stays visibly apart from the H158 brand green now that the
brand itself is green — 7.13:1 on white, and white on it. */
--cf-green: #166534;
--cf-red: #dc2626;
--cf-gray: #6b7280;
--cf-ink: #1f2937;
--cf-light: #f9fafb;
--cf-border: #e5e7eb;
--cf-radius: 10px;
--cf-radius-lg: 14px;
--cf-shadow: 0 1px 3px rgba(16,24,40,.06), 0 1px 2px rgba(16,24,40,.04);
--cf-shadow-md: 0 4px 14px rgba(16,24,40,.08);
}
/* Typography — apply Inter across plugin admin pages */
.cf-admin,
.cf-admin h1, .cf-admin h2, .cf-admin h3,
.cf-admin input, .cf-admin select, .cf-admin textarea, .cf-admin .button,
.cf-admin .button-primary, .cf-admin .button-small {
font-family: var(--cf-font);
}
/* ── Branded page header ──────────────────────────────────────────────── */
.cf-admin-header {
display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
gap: 1rem; margin: 0 0 1.5rem; padding: .9rem 1.25rem;
background: #fff; border: 1px solid var(--cf-border); border-top: 3px solid var(--cf-brand-mid);
border-radius: var(--cf-radius-lg); box-shadow: var(--cf-shadow);
}
.cf-admin-header__brand { display: flex; align-items: center; gap: .85rem; }
.cf-admin-logo svg { display: block; box-shadow: var(--cf-shadow); border-radius: 8px; }
.cf-admin-header__titles h1 { margin: 0; padding: 0; font-size: 1.5rem; line-height: 1.15; font-weight: 700; color: var(--cf-ink); }
.cf-admin-header__subtitle { display: block; margin-top: .12rem; font-size: .85rem; color: var(--cf-gray); }
.cf-admin-header__meta { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.cf-admin-header__actions .page-title-action { margin: 0; }
.cf-version-pill {
display: inline-flex; align-items: center; padding: .22rem .65rem; border-radius: 99px;
background: var(--cf-light); border: 1px solid var(--cf-border); color: var(--cf-gray);
font-size: .78rem; font-weight: 600; line-height: 1.5; text-decoration: none;
transition: background .15s, border-color .15s, color .15s;
}
.cf-version-pill:hover, .cf-version-pill:focus {
background: var(--cf-brand-soft); border-color: var(--cf-brand-mid); color: var(--cf-brand-ink);
}
/* Section headings inside plugin pages */
.cf-admin h2 { color: var(--cf-ink); }
/* Page intro / explainer box (below the header) */
.cf-page-intro { background: var(--cf-light); border: 1px solid var(--cf-border); border-left: 4px solid var(--cf-brand-mid); border-radius: 0 var(--cf-radius) var(--cf-radius) 0; padding: .85rem 1.1rem; margin: 0 0 1.5rem; max-width: 900px; }
.cf-page-intro p { margin: .35rem 0; color: #374151; }
.cf-page-intro p:first-child { margin-top: 0; }
.cf-page-intro p:last-child { margin-bottom: 0; }
/* ── Stat cards (dashboard) ───────────────────────────────────────────── */
.cf-stat-cards { display: flex; flex-wrap: wrap; gap: 1rem; margin-bottom: 1.5rem; }
.cf-stat-card {
position: relative; flex: 1 1 180px; min-width: 160px; background: #fff;
border: 1px solid var(--cf-border); border-radius: var(--cf-radius);
padding: 1.1rem 1.25rem 1.1rem 1.4rem; box-shadow: var(--cf-shadow); overflow: hidden;
transition: box-shadow .15s, transform .15s;
}
.cf-stat-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--cf-brand-mid); }
.cf-stat-card:hover { box-shadow: var(--cf-shadow-md); transform: translateY(-1px); }
.cf-stat-value { display: block; font-size: 1.7rem; font-weight: 700; line-height: 1.1; color: var(--cf-ink); }
.cf-stat-label { font-size: .72rem; color: var(--cf-gray); text-transform: uppercase; letter-spacing: .05em; font-weight: 600; }
/* Mini progress bar */
.cf-mini-bar { width: 100px; height: 8px; background: var(--cf-border); border-radius: 99px; display: inline-block; overflow: hidden; vertical-align: middle; margin-right: .4rem; }
.cf-mini-bar-fill { height: 100%; background: var(--cf-brand-mid); border-radius: 99px; }
/* Badges */
.cf-badge { display: inline-block; padding: .2rem .55rem; border-radius: 99px; font-size: .75rem; font-weight: 600; }
.cf-badge--green { background: #dcfce7; color: #15803d; }
.cf-badge--red { background: #fee2e2; color: var(--cf-red); }
.cf-badge--gray { background: #f3f4f6; color: var(--cf-gray); }
.cf-badge--amber { background: #fef3c7; color: #b45309; }
.cf-badge--brand { background: var(--cf-brand-soft); color: var(--cf-brand-ink); }
/* Bulk actions (Manage Expenses) */
.cf-bulk-toolbar { display: flex; gap: .5rem; align-items: center; margin: .75rem 0; }
.cf-admin .check-column { width: 2.2em; text-align: center; vertical-align: middle; }
/* Expense thumbnails */
.cf-thumb { width: 56px; height: 56px; object-fit: cover; border-radius: 6px; border: 1px solid var(--cf-border); cursor: zoom-in; }
.cf-expense-table .cf-ref { font-size: .75rem; color: var(--cf-gray); }
.cf-actions .button { margin-right: .3rem; }
.cf-btn-danger { color: var(--cf-red) !important; border-color: var(--cf-red) !important; }
.cf-btn-danger:hover { background: var(--cf-red) !important; color: #fff !important; }
/* Category list */
.cf-drag-handle { cursor: grab; color: var(--cf-gray); font-size: 1.1rem; }
.cf-color-dot { width: 12px; height: 12px; border-radius: 50%; display: inline-block; vertical-align: middle; margin-left: .4rem; }
/* Forms */
.cf-form .cf-amount-row { display: flex; gap: .5rem; align-items: center; }
.cf-category-form-wrap { background: #fff; border: 1px solid var(--cf-border); border-radius: var(--cf-radius); padding: 1.25rem 1.5rem; margin-bottom: 1.5rem; box-shadow: var(--cf-shadow); }
/* Tables, tabs, buttons and inputs — scoped to plugin pages */
.cf-admin .wp-list-table { border-radius: var(--cf-radius); overflow: hidden; border-color: var(--cf-border); box-shadow: var(--cf-shadow); }
.cf-admin .wp-list-table thead th { background: var(--cf-light); color: var(--cf-ink); font-weight: 600; }
.cf-admin .wp-list-table tbody tr:hover > * { background: var(--cf-brand-wash); }
/* ── Horizontally-scrollable table wrapper ──
A multi-column widefat table (e.g. the Audit Trail event log: Seq / When / Event /
Entity / By / Hash) has a min-content width of ~500px, so on a narrow admin viewport
it overflowed its card and pushed the whole page sideways — the table's own
`overflow: hidden` clips the rounded corners but does NOT scroll. Wrap such tables in
`.cf-table-scroll` so the table scrolls *within* the card instead. The rounded corner
+ shadow move to the wrapper, and the table drops its own so the two don't double up. */
.cf-admin .cf-table-scroll { overflow-x: auto; border-radius: var(--cf-radius); box-shadow: var(--cf-shadow); scrollbar-width: thin; scrollbar-color: var(--cf-brand-mid) var(--cf-light); }
.cf-admin .cf-table-scroll > .wp-list-table { border-radius: 0; box-shadow: none; }
.cf-admin .cf-table-scroll::-webkit-scrollbar { height: 10px; }
.cf-admin .cf-table-scroll::-webkit-scrollbar-track { background: var(--cf-light); border-radius: 8px; }
.cf-admin .cf-table-scroll::-webkit-scrollbar-thumb { background: var(--cf-brand-mid); border-radius: 8px; border: 2px solid var(--cf-light); }
.cf-admin .cf-table-scroll::-webkit-scrollbar-thumb:hover { background: var(--cf-brand-dark); }
.cf-admin .nav-tab-wrapper { border-bottom: 1px solid var(--cf-border); padding-bottom: 0; }
.cf-admin .nav-tab { background: transparent; border: 0; border-bottom: 2px solid transparent; margin: 0 .25rem -1px 0; padding: .6rem .9rem; color: var(--cf-gray); font-weight: 600; }
.cf-admin .nav-tab:hover, .cf-admin .nav-tab:focus { color: var(--cf-brand-dark); background: transparent; box-shadow: none; }
.cf-admin .nav-tab-active, .cf-admin .nav-tab-active:hover, .cf-admin .nav-tab-active:focus { color: var(--cf-brand-dark); border-bottom-color: var(--cf-brand-mid); background: transparent; }
.cf-admin .button-primary { background: var(--cf-brand); border-color: var(--cf-brand-dark); color: #fff; text-shadow: none; box-shadow: none; }
.cf-admin .button-primary:hover, .cf-admin .button-primary:focus { background: var(--cf-brand-dark); border-color: var(--cf-brand-dark); color: #fff; }
.cf-admin .form-table th { color: var(--cf-ink); }
.cf-admin input[type="text"]:focus,
.cf-admin input[type="email"]:focus,
.cf-admin input[type="number"]:focus,
.cf-admin input[type="password"]:focus,
.cf-admin input[type="date"]:focus,
.cf-admin input[type="datetime-local"]:focus,
.cf-admin select:focus,
.cf-admin textarea:focus { border-color: var(--cf-brand-mid); box-shadow: 0 0 0 1px var(--cf-brand-mid); }
/* Setup guide */
.cf-setup-guide .cf-progress-bar-wrap { height: 12px; background: var(--cf-border); border-radius: 99px; margin: .75rem 0 .4rem; overflow: hidden; }
.cf-setup-guide .cf-progress-bar { height: 100%; background: var(--cf-brand-mid); border-radius: 99px; transition: width .4s; }
.cf-progress-label { font-size: .85rem; color: var(--cf-gray); margin-bottom: 1.5rem; }
.cf-steps { display: flex; flex-direction: column; gap: .75rem; max-width: 800px; }
.cf-step { border: 1px solid var(--cf-border); border-radius: var(--cf-radius); overflow: hidden; background: #fff; box-shadow: var(--cf-shadow); }
.cf-step--done { border-color: #bbf7d0; background: #f0fdf4; }
.cf-step-header { display: flex; align-items: center; gap: .6rem; padding: .85rem 1rem; cursor: default; }
.cf-step-icon { font-size: 1.1rem; }
.cf-step-body { padding: .5rem 1rem 1rem 2.5rem; border-top: 1px solid var(--cf-border); }
.cf-inset { background: var(--cf-light); border: 1px solid var(--cf-border); border-radius: 8px; padding: .75rem 1rem; margin-top: .5rem; }
/* Admin notices marker — WordPress hoists .notice elements to just after this
`.wp-header-end`
, so they land below the ClearFund header instead of
inside it. The marker itself is invisible. */
.cf-admin-notices { border: 0; height: 0; margin: 0 0 .25rem; padding: 0; }
.cf-admin .notice, .cf-admin .updated, .cf-admin .error { border-radius: 8px; }
/* Sectioned card layout — shared by Settings (2-col grid) and the form pages
(standalone stacked cards). Use .cf-card for a single card, or wrap several
in .cf-cards / .cf-settings-grid for a 2-column responsive grid. */
.cf-settings .form-table th { width: 180px; }
.cf-settings-grid, .cf-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; align-items: start; margin: 1rem 0 1.5rem; }
.cf-settings-card, .cf-card { background: #fff; border: 1px solid var(--cf-border); border-radius: var(--cf-radius-lg); padding: .35rem 1.4rem 1rem; box-shadow: var(--cf-shadow); }
/* Standalone cards (outside a grid) stack with spacing; grid cards use the gap. */
.cf-card { margin: 1rem 0 1.25rem; }
.cf-cards .cf-card { margin: 0; }
.cf-settings-card--wide, .cf-card--wide { grid-column: 1 / -1; }
.cf-settings-card > h2, .cf-card > h2 { display: flex; align-items: center; gap: .5rem; margin: 0 0 .25rem; padding: .85rem 0 .65rem; font-size: 1.05rem; border-bottom: 2px solid var(--cf-brand-soft); color: var(--cf-ink); }
.cf-settings-card > h2 .dashicons, .cf-card > h2 .dashicons { color: var(--cf-brand-mid); font-size: 1.2rem; width: 1.2rem; height: 1.2rem; }
.cf-settings-card .form-table, .cf-card .form-table { margin-top: .25rem; }
.cf-settings-card .form-table th, .cf-card .form-table th { padding-left: 0; font-weight: 600; }
.cf-settings-card .form-table td, .cf-card .form-table td { padding-right: 0; }
.cf-settings-card .description, .cf-card .description { color: var(--cf-gray); }
/* Inline label-style inputs (e.g. tab/label overrides) wrap neatly */
.cf-settings-card .form-table td > input[type="text"]:not(.regular-text):not(.large-text) { margin: 0 .35rem .35rem 0; }
.cf-settings-card .cf-field-note, .cf-card .cf-field-note { margin-top: .15rem; }
/* Test-mode toggle (per-integration) */
.cf-test-toggle { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .75rem; margin: 1rem 0 .5rem; }
.cf-switch { position: relative; display: inline-flex; align-items: center; gap: .55rem; cursor: pointer; user-select: none; }
.cf-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.cf-switch-track { flex: none; width: 40px; height: 22px; border-radius: 999px; background: #cbd5e1; transition: background .15s ease; }
.cf-switch-track::after { content: ""; position: absolute; left: 2px; top: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.25); transition: transform .15s ease; }
.cf-switch input:checked + .cf-switch-track { background: var(--cf-brand-mid); }
.cf-switch input:checked + .cf-switch-track::after { transform: translateX(18px); }
.cf-switch input:focus-visible + .cf-switch-track { outline: 2px solid var(--cf-brand-mid); outline-offset: 2px; }
.cf-switch-label { font-weight: 600; }
/* Filter/export rows + import notices sit flush inside a card */
.cf-card .cf-report-filters { border: 0; box-shadow: none; padding: 0; background: transparent; }
.cf-card .cf-export-buttons { margin-top: 1rem; }
@media (max-width: 960px) { .cf-settings-grid, .cf-cards { grid-template-columns: 1fr; } }
/* Docs */
.cf-doc-content { background: #fff; border: 1px solid var(--cf-border); border-radius: var(--cf-radius); padding: 1.5rem 2rem; margin-top: 1rem; max-width: 860px; box-shadow: var(--cf-shadow); }
.cf-doc-content h2 { margin-top: 0; }
.cf-doc-content h3 { margin-top: 1.5rem; border-top: 1px solid var(--cf-border); padding-top: 1rem; }
.cf-doc-content code { background: var(--cf-light); border: 1px solid var(--cf-border); border-radius: 4px; padding: .15rem .4rem; font-size: .9em; }
.cf-faq dt { font-weight: 700; margin-top: 1.25rem; }
.cf-faq dd { margin-left: 1rem; color: #333; }
/* Reports */
.cf-report-filters { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; background: #fff; border: 1px solid var(--cf-border); border-radius: var(--cf-radius); padding: .75rem 1rem; box-shadow: var(--cf-shadow); }
.cf-report-filters label { display: flex; align-items: center; gap: .4rem; font-size: .9rem; }
.cf-export-buttons { display: flex; gap: .75rem; }
/* Dashboard category table — expandable detail rows */
.cf-cat-table .cf-cat-row { cursor: pointer; }
.cf-cat-table .cf-cat-row:hover { background: var(--cf-brand-wash); }
.cf-row-toggle { background: none; border: 0; padding: 0 .4rem 0 0; margin: 0; cursor: pointer; color: var(--cf-gray); font-size: .95rem; line-height: 1; }
.cf-row-toggle:focus-visible { outline: 2px solid var(--cf-brand-mid); outline-offset: 2px; }
.cf-cat-caret { display: inline-block; transition: transform .15s; }
.cf-row-toggle[aria-expanded="true"] .cf-cat-caret { transform: rotate(90deg); }
.cf-detail-row > td { background: var(--cf-light); padding: 1rem 1.25rem; }
.cf-cat-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
@media (max-width: 1100px) { .cf-cat-cols { grid-template-columns: 1fr; } }
.cf-cat-col h3 { margin: .2rem 0 .5rem; display: flex; justify-content: space-between; align-items: baseline; border-bottom: 2px solid var(--cf-border); padding-bottom: .3rem; }
.cf-col-total { font-weight: 700; }
.cf-inner-table { background: #fff; }
/* Scroll box for the Donated / Spent lists, with a themed scrollbar */
.cf-col-scroll { max-height: 320px; overflow-y: auto; border: 1px solid var(--cf-border); border-radius: 8px; scrollbar-width: thin; scrollbar-color: var(--cf-brand-mid) var(--cf-light); }
.cf-col-scroll .cf-inner-table { border: 0; margin: 0; }
.cf-col-scroll .cf-inner-table thead th { position: sticky; top: 0; z-index: 1; background: var(--cf-light); }
.cf-col-scroll::-webkit-scrollbar { width: 10px; }
.cf-col-scroll::-webkit-scrollbar-track { background: var(--cf-light); border-radius: 8px; }
.cf-col-scroll::-webkit-scrollbar-thumb { background: var(--cf-brand-mid); border-radius: 8px; border: 2px solid var(--cf-light); }
.cf-col-scroll::-webkit-scrollbar-thumb:hover { background: var(--cf-brand-dark); }
/* Sortable table headers (skip columns marked .cf-no-sort, e.g. Actions) */
table.cf-sortable thead th:not(.cf-no-sort) { cursor: pointer; user-select: none; white-space: nowrap; }
table.cf-sortable thead th:not(.cf-no-sort):hover { color: var(--cf-brand-dark); }
table.cf-sortable thead th.cf-sorted-asc::after { content: " ▲"; font-size: .8em; color: var(--cf-brand); }
table.cf-sortable thead th.cf-sorted-desc::after { content: " ▼"; font-size: .8em; color: var(--cf-brand); }
/* Manage Expenses / Donations pagination */
.cf-pagination { margin: .75rem 0; }
.cf-pagination .pagination-links a, .cf-pagination .pagination-links span.current { display: inline-block; padding: 2px 8px; margin: 0 2px; border: 1px solid var(--cf-border); border-radius: 6px; text-decoration: none; }
.cf-pagination .pagination-links span.current { background: var(--cf-brand); color: #fff; border-color: var(--cf-brand); }
.cf-inner-table .cf-num { text-align: right; white-space: nowrap; }
.cf-col-empty { color: var(--cf-gray); font-style: italic; }
.cf-col-more { font-size: .8rem; color: var(--cf-gray); margin: .4rem 0 0; }
/* Reject modal */
.cf-modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 99999; display: flex; align-items: center; justify-content: center; }
.cf-modal { background: #fff; border-radius: var(--cf-radius); padding: 1.5rem; max-width: 480px; width: 90%; box-shadow: var(--cf-shadow-md); }
.cf-modal h3 { margin-top: 0; }
/* Media picker preview + image lightbox */
.cf-media-preview { margin: .5rem 0; }
.cf-media-preview img { max-width: 120px; max-height: 120px; border: 1px solid var(--cf-border); border-radius: 6px; display: block; }
.cf-img-lightbox { cursor: zoom-in; display: inline-block; }
.cf-admin-lightbox { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.8); z-index: 100000; align-items: center; justify-content: center; padding: 72px 24px 24px; box-sizing: border-box; }
.cf-admin-lightbox img { max-width: 92vw; max-height: calc(90vh - 48px); border-radius: 8px; box-shadow: 0 4px 30px rgba(0,0,0,.5); }
.cf-admin-lightbox-close { position: absolute; top: 16px; right: 16px; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.55); border: 0; border-radius: 50%; color: #fff; font-size: 1.4rem; line-height: 1; cursor: pointer; z-index: 2; transition: background .15s; }
.cf-admin-lightbox-close:hover, .cf-admin-lightbox-close:focus { background: rgba(0,0,0,.9); }
/* Responsive header */
@media (max-width: 600px) {
.cf-admin-header { flex-direction: column; align-items: flex-start; }
.cf-admin-header__meta { width: 100%; }
}
/* ── Reports → Insights (interactive charts) ───────────────────────────────── */
.cf-insights h2 .dashicons { color: var(--cf-brand-mid); }
.cf-ins-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 10px; margin: .25rem 0 1.25rem; }
.cf-ins-kpi { background: var(--cf-light); border: 1px solid var(--cf-border); border-radius: var(--cf-radius); padding: .6rem .75rem; }
.cf-ins-kpi-l { display: block; font-size: .7rem; text-transform: uppercase; letter-spacing: .04em; color: var(--cf-gray); font-weight: 600; }
.cf-ins-kpi-v { display: block; font-size: 1.35rem; font-weight: 700; color: var(--cf-ink); font-variant-numeric: tabular-nums; margin-top: .15rem; }
.cf-ins-controls { display: flex; flex-wrap: wrap; gap: 14px 22px; align-items: flex-end; margin-bottom: 1rem; }
.cf-ins-ctl { display: flex; flex-direction: column; gap: 5px; }
.cf-ins-lbl { font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--cf-gray); font-weight: 600; }
.cf-ins-ctl select { min-width: 130px; }
.cf-seg { display: inline-flex; border: 1px solid var(--cf-border); border-radius: var(--cf-radius); overflow: hidden; background: #fff; }
.cf-seg button { height: 32px; padding: 0 13px; border: 0; border-right: 1px solid var(--cf-border); background: transparent; color: var(--cf-gray); font-size: 13px; cursor: pointer; line-height: 32px; }
.cf-seg button:last-child { border-right: 0; }
.cf-seg button:hover:not(.on) { background: var(--cf-brand-wash); }
.cf-seg button.on { background: var(--cf-brand-soft); color: var(--cf-brand-ink); font-weight: 600; }
.cf-ins-legendbar .button.cf-ins-on { background: #ede9fe; border-color: #6d28d9; color: #6d28d9; }
.cf-pro-tag { display: inline-block; font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; background: #ede9fe; color: #6d28d9; border-radius: 4px; padding: 1px 4px; vertical-align: 1px; }
.cf-ins-legendbar { position: relative; display: flex; align-items: center; gap: 8px; margin-bottom: 6px; flex-wrap: wrap; }
.cf-ins-legend { display: flex; flex-wrap: wrap; gap: 14px; font-size: 12px; color: var(--cf-gray); }
.cf-ins-spacer { flex: 1; }
.cf-ins-leg { display: inline-flex; align-items: center; gap: 5px; }
.cf-ins-sw { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }
.cf-ins-sw--line { height: 0; width: 12px; border-top: 2px dashed; border-radius: 0; }
.cf-ins-chartwrap { position: relative; width: 100%; background: var(--cf-light); border: 1px solid var(--cf-border); border-radius: var(--cf-radius); padding: 10px 6px 4px; min-height: 300px; overflow: hidden; }
.cf-ins-chartwrap svg { display: block; width: 100%; cursor: crosshair; }
.cf-ins-chartwrap svg[data-role="chart"] { position: relative; z-index: 1; }
.cf-ins-bg { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity .5s ease; pointer-events: none; z-index: 0; cursor: default; }
.cf-ins-chartwrap.cf-ins-hover .cf-ins-bg { opacity: 1; }
.cf-ins-bg g { will-change: transform; }
.cf-ins-bg-clouds ellipse { fill: var(--cf-brand-mid); opacity: .05; }
.cf-ins-bg-far polygon { fill: var(--cf-brand-mid); opacity: .06; }
.cf-ins-bg-mid polygon { fill: var(--cf-brand-mid); opacity: .10; }
.cf-ins-bg-near polygon { fill: var(--cf-brand-mid); opacity: .16; }
.cf-ins-grid { stroke: var(--cf-border); stroke-width: 1; }
.cf-ins-axis { font-size: 11px; fill: var(--cf-gray); }
.cf-ins-guide { stroke: #9ca3af; stroke-width: 1; }
.cf-ins-dot { stroke: #fff; stroke-width: 2; }
.cf-ins-tip { position: absolute; pointer-events: none; opacity: 0; transition: opacity .12s; background: #fff; border: 1px solid var(--cf-border); border-radius: 10px; padding: 8px 10px; font-size: 12px; box-shadow: var(--cf-shadow-md); min-width: 150px; z-index: 3; }
.cf-ins-tip.on { opacity: 1; }
.cf-ins-tiphd { font-weight: 600; color: var(--cf-ink); margin-bottom: 3px; }
.cf-ins-tiprow { display: flex; justify-content: space-between; gap: 14px; margin-top: 3px; color: var(--cf-gray); }
.cf-ins-tiprow b { color: var(--cf-ink); font-variant-numeric: tabular-nums; }
.cf-ins-empty { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--cf-gray); font-size: 14px; pointer-events: none; }
.cf-ins-empty[hidden] { display: none; }
.cf-ins-loading { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; background: rgba(255,255,255,.6); }
.cf-ins-hint { margin-top: .75rem; }
.cf-ins-hint [data-role="clampnote"] { color: #6d28d9; }
.cf-ins-drill { margin-top: 1rem; border: 1px solid var(--cf-border); border-radius: var(--cf-radius); padding: .85rem 1rem; background: #fff; }
.cf-ins-drill-hd { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.cf-ins-drill-hd strong { color: var(--cf-ink); }
.cf-ins-drill-tabs { display: inline-flex; gap: 4px; }
.cf-ins-dtab { border: 1px solid var(--cf-border); background: #fff; border-radius: 99px; padding: 2px 12px; font-size: 12px; cursor: pointer; color: var(--cf-gray); }
.cf-ins-dtab.on { background: var(--cf-brand-soft); border-color: var(--cf-brand-mid); color: var(--cf-brand-ink); font-weight: 600; }
.cf-ins-drill-x { margin-left: auto; }
.cf-ins-drill-body { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; margin-top: .85rem; }
.cf-ins-donut-top { font-size: 15px; font-weight: 700; fill: var(--cf-ink); }
.cf-ins-donut-sub { font-size: 10px; fill: var(--cf-gray); text-transform: uppercase; letter-spacing: .04em; }
.cf-ins-drill-legend { list-style: none; margin: 0; padding: 0; flex: 1; min-width: 220px; }
.cf-ins-drill-legend li { display: flex; align-items: center; gap: 8px; padding: 4px 0; border-bottom: 1px solid var(--cf-border); font-size: 13px; }
.cf-ins-drill-legend li:last-child { border-bottom: 0; }
.cf-ins-dl-name { flex: 1; color: var(--cf-ink); }
.cf-ins-dl-val { color: var(--cf-gray); font-variant-numeric: tabular-nums; }
.cf-ins-drill-load { display: flex; justify-content: center; padding: 1rem; }
.cf-ins-nudge { position: absolute; right: 0; top: 38px; background: #6d28d9; color: #fff; font-size: 12px; padding: 7px 11px; border-radius: 8px; box-shadow: var(--cf-shadow-md); opacity: 0; transform: translateY(-4px); transition: opacity .25s, transform .25s; z-index: 5; max-width: 280px; }
.cf-ins-nudge.on { opacity: 1; transform: translateY(0); }
.cf-ins-nudge a { color: #fff; text-decoration: underline; font-weight: 600; }
/* Custom date range — flips in on the Y axis (Pro) */
.cf-ins-daterange { perspective: 900px; max-height: 0; overflow: hidden; opacity: 0; margin: 0; transition: max-height .35s ease, opacity .25s ease, margin .35s ease; }
.cf-ins-daterange.open { max-height: 110px; opacity: 1; margin: 0 0 .85rem; }
.cf-ins-dr-card { display: inline-flex; gap: 14px; align-items: flex-end; flex-wrap: wrap; background: #fff; border: 1px solid var(--cf-border); border-radius: var(--cf-radius); padding: .7rem .9rem; transform: rotateY(-90deg); transform-origin: center; transform-style: preserve-3d; backface-visibility: hidden; transition: transform .4s ease; }
.cf-ins-daterange.open .cf-ins-dr-card { transform: rotateY(0); }
.cf-ins-dr-card label { display: flex; flex-direction: column; gap: 4px; font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--cf-gray); font-weight: 600; }
.cf-ins-dr-card input[type="date"] { font-size: 13px; }
/* Motion polish */
.cf-seg button { transition: background .18s ease, color .18s ease; }
.cf-ins-dot-halo { fill: var(--cf-brand-mid); opacity: 0; transform-box: fill-box; transform-origin: center; animation: cf-ins-halo 1.8s ease-out infinite; }
@keyframes cf-ins-halo { 0% { transform: scale(.6); opacity: .35; } 70% { opacity: 0; } 100% { transform: scale(2.6); opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
.cf-insights *, .cf-ins-daterange, .cf-ins-daterange .cf-ins-dr-card { transition: none !important; animation: none !important; }
}
/* ── Pro accent + shared Docs/Setup components (1.20.x refresh) ─────────────
A violet "Pro" accent (matching the Insights .cf-pro-tag) plus reusable
pills, callouts, feature cards and a numbered flow, shared by the Setup
Guide and the Documentation screens. */
:root {
--cf-pro: #6d28d9; /* violet-700 — premium accent */
--cf-pro-soft: #ede9fe; /* violet-100 — badge / tint bg */
--cf-pro-ink: #5b21b6; /* violet-800 — text on soft */
--cf-pro-wash: #faf5ff; /* violet-50 — card bg */
}
/* Pills / badges */
.cf-badge--pro { background: var(--cf-pro-soft); color: var(--cf-pro-ink); }
.cf-pill { display: inline-flex; align-items: center; gap: .25rem; padding: .12rem .5rem; border-radius: 99px; font-size: .66rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; line-height: 1.7; white-space: nowrap; }
.cf-pill--pro { background: var(--cf-pro-soft); color: var(--cf-pro-ink); }
.cf-pill--rec { background: var(--cf-brand-soft); color: var(--cf-brand-ink); }
.cf-pill--opt { background: #f3f4f6; color: var(--cf-gray); }
/* Callout boxes */
.cf-callout { display: flex; gap: .75rem; border: 1px solid var(--cf-border); border-left: 4px solid var(--cf-brand-mid); border-radius: 0 var(--cf-radius) var(--cf-radius) 0; background: var(--cf-brand-wash); padding: .85rem 1.1rem; margin: 1.15rem 0; }
.cf-callout__icon { font-size: 1.15rem; line-height: 1.5; flex: none; }
.cf-callout__body { min-width: 0; }
.cf-callout p { margin: .3rem 0; }
.cf-callout p:first-child { margin-top: 0; }
.cf-callout p:last-child { margin-bottom: 0; }
.cf-callout--pro { border-left-color: var(--cf-pro); background: var(--cf-pro-wash); }
.cf-callout--tip { border-left-color: var(--cf-green); background: #f0fdf4; }
.cf-callout--warn { border-left-color: #f59e0b; background: #fffbeb; }
/* Feature cards (Getting Started / Pro tabs) */
.cf-feature-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1rem; margin: 1.25rem 0; }
.cf-feature-card { border: 1px solid var(--cf-border); border-radius: var(--cf-radius); padding: 1rem 1.1rem; background: var(--cf-light); }
.cf-feature-card h3 { margin: 0 0 .35rem; border: 0; padding: 0; font-size: .98rem; display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.cf-feature-card p { margin: 0; font-size: .87rem; color: #4b5563; }
.cf-feature-card__icon { font-size: 1.15rem; }
.cf-feature-card--pro { border-color: #ddd6fe; background: var(--cf-pro-wash); }
/* Numbered "how it connects" flow */
.cf-flow { counter-reset: cf-flow; list-style: none; margin: 1rem 0; padding: 0; }
.cf-flow li { position: relative; counter-increment: cf-flow; padding: 0 0 1rem 2.6rem; color: #374151; }
.cf-flow li:not(:last-child)::after { content: ""; position: absolute; left: .8rem; top: 1.85rem; bottom: 0; width: 2px; background: var(--cf-border); }
.cf-flow li::before { content: counter(cf-flow); position: absolute; left: 0; top: -.1rem; width: 1.7rem; height: 1.7rem; border-radius: 50%; background: var(--cf-brand); color: #fff; display: grid; place-items: center; font-size: .82rem; font-weight: 700; }
.cf-flow li strong { color: var(--cf-ink); }
/* Lead paragraph */
.cf-doc-lead { font-size: 1.03rem; line-height: 1.6; color: #374151; }
/* Docs brand lockup — the real logo, not a watermark, so it is not dimmed */
.cf-doc-brand { margin: .25rem 0 1rem; }
.cf-doc-brand img { width: 200px; max-width: 100%; height: auto; display: block; }
/* Upgrade banner (Pro tab) */
.cf-upgrade-band { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; background: linear-gradient(135deg, var(--cf-pro-soft), var(--cf-pro-wash) 75%); border: 1px solid #ddd6fe; border-radius: var(--cf-radius-lg); padding: 1.1rem 1.35rem; margin: .5rem 0 1.5rem; }
.cf-upgrade-band__text { min-width: 0; }
.cf-upgrade-band__text strong { display: block; color: var(--cf-pro-ink); font-size: 1.05rem; }
.cf-upgrade-band__text span { color: #6b5b95; font-size: .9rem; }
.cf-upgrade-band .button-primary.cf-upgrade-btn { background: var(--cf-pro); border-color: var(--cf-pro-ink); }
.cf-upgrade-band .button-primary.cf-upgrade-btn:hover, .cf-upgrade-band .button-primary.cf-upgrade-btn:focus { background: var(--cf-pro-ink); border-color: var(--cf-pro-ink); }
.cf-upgrade-band--on { background: #f0fdf4; border-color: #bbf7d0; }
.cf-upgrade-band--on .cf-upgrade-band__text strong { color: #15803d; }
/* ── Setup Guide refresh ────────────────────────────────────────────────── */
.cf-setup-hero { display: flex; flex-wrap: wrap; gap: 1rem 1.75rem; align-items: center; justify-content: space-between; background: linear-gradient(135deg, var(--cf-brand-wash), #fff 72%); border: 1px solid var(--cf-border); border-radius: var(--cf-radius-lg); padding: 1.2rem 1.5rem; margin: 0 0 1.35rem; box-shadow: var(--cf-shadow); }
.cf-setup-hero__text { max-width: 560px; }
.cf-setup-hero__text h2 { margin: 0 0 .35rem; font-size: 1.2rem; }
.cf-setup-hero__text p { margin: 0; color: var(--cf-gray); }
.cf-setup-ring { position: relative; width: 96px; height: 96px; border-radius: 50%; flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; line-height: 1; background: conic-gradient(var(--cf-brand-mid) calc(var(--cf-ring, 0) * 1%), var(--cf-border) 0); }
.cf-setup-ring--done { background: conic-gradient(var(--cf-green) 100%, var(--cf-green) 0); }
.cf-setup-ring::after { content: ""; position: absolute; inset: 9px; background: #fff; border-radius: 50%; }
.cf-setup-ring__num { position: relative; z-index: 1; font-size: 1.4rem; font-weight: 700; color: var(--cf-brand-dark); line-height: 1; }
.cf-setup-ring--done .cf-setup-ring__num { color: var(--cf-green); }
.cf-setup-ring__lbl { position: relative; z-index: 1; font-size: .58rem; text-transform: uppercase; letter-spacing: .05em; color: var(--cf-gray); font-weight: 600; margin-top: .1rem; }
.cf-steps { display: flex; flex-direction: column; gap: .7rem; max-width: 840px; }
.cf-step { border: 1px solid var(--cf-border); border-radius: var(--cf-radius); overflow: hidden; background: #fff; box-shadow: var(--cf-shadow); transition: box-shadow .15s, border-color .15s; }
.cf-step:hover { box-shadow: var(--cf-shadow-md); }
/* Completed step = a faceted "crystal gem": layered glassy gradients read as
cut-glass facets, an inset bevel highlight + soft teal outer glow give depth. */
.cf-step--done {
position: relative;
border-color: #a7f3d0;
background:
linear-gradient(125deg, rgba(255,255,255,.55) 0%, rgba(255,255,255,0) 22%),
linear-gradient(300deg, rgba(13,148,136,.12) 0%, rgba(13,148,136,0) 55%),
linear-gradient(160deg, #ecfdf5 0%, #f6fef9 55%, #e6fbf4 100%);
box-shadow:
inset 0 1px 0 rgba(255,255,255,.9), /* top bevel highlight */
inset 0 -12px 24px rgba(13,148,136,.07), /* bottom inner tint */
0 3px 14px rgba(13,148,136,.13), /* soft teal outer glow */
var(--cf-shadow);
}
/* Static facet glints in opposite corners, like light caught on a cut edge. */
.cf-step--done::before {
content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1;
background:
linear-gradient(125deg, rgba(255,255,255,.6) 0%, rgba(255,255,255,0) 16%),
linear-gradient(305deg, rgba(255,255,255,.4) 0%, rgba(255,255,255,0) 14%);
}
/* Keep step content above the gem glints but below the moving sheen. */
.cf-step-header { position: relative; z-index: 2; }
/* Crystal-clear sheen: a soft diagonal highlight sweeps across, then rests —
looping — to signal a completed step. Clipped by the panel's overflow:hidden.
Direction and start offset are randomized per panel (see the view + the
.cf-step--sheen-rev variant below) so they never shine in lockstep. */
.cf-step--done::after {
content: ""; position: absolute; top: -25%; left: 0; width: 40%; height: 150%;
background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.65) 50%, transparent 100%);
transform: translateX(-160%) skewX(-22deg); transform-origin: center;
pointer-events: none; z-index: 3;
animation: cf-step-sheen 6.5s ease-in-out infinite;
animation-delay: var(--cf-sheen-delay, 0s);
}
@keyframes cf-step-sheen {
0% { transform: translateX(-160%) skewX(-22deg); }
30%, 100% { transform: translateX(360%) skewX(-22deg); }
}
/* Reverse sweep (right → left) with the skew mirrored so the streak still leans
into its travel direction. Assigned to ~half the panels at random. */
.cf-step--sheen-rev::after {
transform: translateX(360%) skewX(22deg);
animation-name: cf-step-sheen-rev;
}
@keyframes cf-step-sheen-rev {
0% { transform: translateX(360%) skewX(22deg); }
30%, 100% { transform: translateX(-160%) skewX(22deg); }
}
.cf-step-header { display: flex; align-items: center; gap: .8rem; padding: .85rem 1rem; }
.cf-step-num { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: .92rem; background: var(--cf-brand-soft); color: var(--cf-brand-ink); }
.cf-step--done .cf-step-num { background: var(--cf-green); color: #fff; }
.cf-step-title { flex: 1; min-width: 0; }
.cf-step-title strong { display: block; color: var(--cf-ink); font-size: .98rem; }
.cf-step-sub { display: block; font-size: .82rem; color: var(--cf-gray); margin-top: .12rem; }
.cf-step-tags { display: flex; gap: .35rem; flex: none; align-items: center; }
.cf-step-body { padding: .35rem 1rem 1.1rem calc(1rem + 30px + .8rem); border-top: 1px solid var(--cf-border); }
.cf-step-body > p:first-child { margin-top: .6rem; }
.cf-step-body ol, .cf-step-body ul { margin: .5rem 0; padding-left: 1.2rem; }
.cf-step-body li { margin: .2rem 0; }
/* What's Next */
.cf-next { margin: 2.25rem 0 .5rem; max-width: 900px; }
.cf-next > h2 { display: flex; align-items: center; gap: .5rem; }
.cf-next > p.description { margin-top: -.3rem; }
.cf-next-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 1rem; margin-top: 1.1rem; }
.cf-next-card { display: block; border: 1px solid var(--cf-border); border-radius: var(--cf-radius); background: #fff; padding: 1rem 1.15rem; box-shadow: var(--cf-shadow); text-decoration: none; color: inherit; transition: box-shadow .15s, transform .15s, border-color .15s; }
.cf-next-card:hover, .cf-next-card:focus { box-shadow: var(--cf-shadow-md); transform: translateY(-2px); border-color: var(--cf-brand-mid); color: inherit; }
.cf-next-card--pro:hover, .cf-next-card--pro:focus { border-color: var(--cf-pro); }
.cf-next-card__icon { font-size: 1.5rem; line-height: 1; }
.cf-next-card h3 { margin: .5rem 0 .3rem; font-size: 1rem; border: 0; padding: 0; display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; color: var(--cf-ink); }
.cf-next-card p { margin: 0; font-size: .85rem; color: var(--cf-gray); }
@media (max-width: 600px) {
.cf-setup-hero { flex-direction: column; align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
.cf-step--done::after { animation: none; display: none; }
}
/* ════════ Freemius notice tint ════════
The SDK's promo notice ships a hard blue (#f2fcff / #00a0d2, both !important in
freemius/assets/css/admin/common.css). Re-tint it to the brand family — scoped to
OUR slug only so other plugins' Freemius notices are untouched. This sheet loads
only on ClearFund screens, so notices elsewhere keep the SDK default. Never edit
the SDK's own files: they are replaced wholesale on every SDK update. */
.fs-notice.updated.promotion.fs-slug-clearfund {
background-color: var(--cf-brand-wash, #F0FCF8) !important;
border-color: var(--cf-brand-mid, #09A76C) !important;
}
.fs-notice.promotion.fs-slug-clearfund .fs-notice-body strong,
.fs-notice.promotion.fs-slug-clearfund label {
color: var(--cf-brand-ink, #004D33);
}
/* ════════ Sticky save bar ════════
Long admin forms (Settings runs to ~40 fields) used to mean scrolling all the
way down just to reach Save. The bar is `position: sticky`, NOT `fixed`, which
buys two things for free: no admin-menu width maths (fixed would have to track
the collapsed/expanded/mobile sidebar), and it stays clamped inside its own