/* ClearFund Public Dashboard Styles */

/* Bundled Inter webfont (self-hosted, shared with the admin assets) */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("../../admin/assets/fonts/inter-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap; src: url("../../admin/assets/fonts/inter-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 700; font-display: swap; src: url("../../admin/assets/fonts/inter-latin-700-normal.woff2") format("woff2"); }

:root {
    --cf-radius: 12px;
    --cf-shadow: 0 2px 16px rgba(0,0,0,.09);
    --cf-priority: #c0392b;
    --cf-gray: #6b7280;
    --cf-light: #f9fafb;
    --cf-border: #e5e7eb;
    --cf-font: "Inter", -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.cf-dashboard { font-family: var(--cf-font); max-width: 1100px; margin: 0 auto; padding: 0 1rem; }

/* Tabs */
.cf-tabs { display: flex; border-bottom: 2px solid var(--cf-border); margin-bottom: 1.5rem; gap: .25rem; }
.cf-tab { padding: .6rem 1.2rem; text-decoration: none; color: var(--cf-gray); border-radius: var(--cf-radius) var(--cf-radius) 0 0; font-weight: 500; transition: all .2s; }
.cf-tab:hover { background: var(--cf-light); color: #111; }
.cf-tab--active { background: #fff; color: #111; border: 2px solid var(--cf-border); border-bottom: 2px solid #fff; margin-bottom: -2px; }
.cf-tab { cursor: pointer; }
.cf-tab-panel[hidden] { display: none; }
.cf-zoom-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.9); z-index: 100001; align-items: center; justify-content: center; cursor: zoom-out; }
.cf-zoom-overlay img { max-width: 95vw; max-height: 95vh; }

/* Global summary */
.cf-global-summary { background: #fff; border: 1px solid var(--cf-border); border-radius: var(--cf-radius); padding: 1.25rem 1.5rem; display: flex; flex-wrap: wrap; gap: 1.5rem; align-items: center; margin-bottom: 2rem; box-shadow: var(--cf-shadow); }
.cf-summary-stat { text-align: center; }
.cf-summary-value { display: block; font-size: 1.6rem; font-weight: 700; color: #111; }
.cf-summary-label { font-size: .8rem; color: var(--cf-gray); text-transform: uppercase; letter-spacing: .04em; }
.cf-summary-updated { margin-left: auto; font-size: .8rem; color: var(--cf-gray); }
.cf-refresh-btn { background: none; border: 1px solid var(--cf-border); border-radius: 50%; width: 26px; height: 26px; padding: 0; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; margin-left: .4rem; font-size: 1rem; line-height: 1; color: var(--cf-gray); }
.cf-refresh-btn:hover { color: #111; }

/* Category cards grid */
.cf-category-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 1.25rem; }

.cf-category-card { background: #fff; border: 1px solid var(--cf-border); border-radius: var(--cf-radius); padding: 1.25rem; box-shadow: var(--cf-shadow); display: flex; flex-direction: column; gap: .75rem; }
.cf-card--priority { border-color: var(--cf-priority); border-width: 2px; }

.cf-priority-banner { background: var(--cf-priority); color: #fff; border-radius: 6px; padding: .35rem .75rem; font-size: .85rem; font-weight: 600; }
.cf-priority-note { font-weight: 400; opacity: .9; }

.cf-card-header { display: flex; align-items: center; gap: .6rem; }
.cf-cat-icon { font-size: 1.75rem; }
.cf-cat-name { margin: 0; font-size: 1.15rem; font-weight: 700; }
.cf-card-goal { font-size: .85rem; color: var(--cf-gray); }
.cf-campaign-days { margin-left: .4rem; font-size: .92em; color: #15803d; font-weight: 600; }
.cf-campaign-ended { margin-left: .4rem; font-size: .92em; color: #b91c1c; font-weight: 600; }
.cf-pill { cursor: pointer; }

/* Progress bar */
.cf-progress-wrap { display: flex; align-items: center; gap: .75rem; }
.cf-progress-bar { flex: 1; height: 10px; border-radius: 99px; background: var(--cf-border); overflow: hidden; }
.cf-progress-fill { height: 100%; border-radius: 99px; transition: width .4s ease; }
.cf-pct-label { font-size: .85rem; font-weight: 600; min-width: 2.5rem; text-align: right; }

/* Card stats */
.cf-card-stats { display: flex; gap: 1rem; }
.cf-card-stats > div { flex: 1; text-align: center; }
.cf-stat-n { display: block; font-weight: 700; font-size: 1rem; }
.cf-stat-l { font-size: .75rem; color: var(--cf-gray); text-transform: uppercase; letter-spacing: .04em; }

/* Expense feed */
.cf-feed-toggle { background: none; border: none; cursor: pointer; font-size: .85rem; color: var(--cf-gray); padding: 0; font-weight: 500; }
.cf-expense-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .3rem; }
/* Scoped to the Overview feed's <li> rows. The same class is reused on <tr> elements
   in the expenses tables (All Expenses + category detail), where display:flex stops the
   row being a table-row and collapses the column layout. Table rows get their own
   cursor/hover from the .cf-expenses-table tr rules below. */
.cf-expense-list .cf-expense-row { display: flex; align-items: center; gap: .5rem; font-size: .85rem; padding: .4rem .5rem; border-radius: 6px; cursor: pointer; transition: background .15s; }
.cf-expense-list .cf-expense-row:hover { background: var(--cf-light); }
.cf-exp-icons { font-size: 1rem; flex-shrink: 0; }
.cf-exp-desc { flex: 1; color: #222; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cf-exp-amount { font-weight: 600; flex-shrink: 0; }
.cf-exp-date { color: var(--cf-gray); flex-shrink: 0; font-size: .8rem; }
.cf-view-all a { font-size: .8rem; color: var(--cf-gray); text-decoration: underline; }

/* Donate button */
.cf-donate-btn { display: block; text-align: center; padding: .65rem 1rem; border-radius: 8px; color: #fff !important; text-decoration: none; font-weight: 600; font-size: .9rem; margin-top: auto; transition: opacity .2s; }
.cf-donate-btn:hover { opacity: .85; }

/* Gallery */
.cf-gallery-filters { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.25rem; }
.cf-pill { padding: .35rem .85rem; border: 1px solid var(--cf-border); border-radius: 99px; text-decoration: none; font-size: .85rem; color: #444; transition: all .2s; }
.cf-pill:hover { border-color: #999; }
.cf-pill--active { background: #111; color: #fff; border-color: #111; }
.cf-masonry { columns: 3 260px; gap: 1rem; }
.cf-gallery-item { break-inside: avoid; margin-bottom: 1rem; border-radius: var(--cf-radius); overflow: hidden; cursor: pointer; position: relative; box-shadow: var(--cf-shadow); }
.cf-gallery-item img { width: 100%; display: block; transition: transform .3s; }
.cf-gallery-item:hover img { transform: scale(1.03); }
.cf-gallery-caption { position: absolute; bottom: 0; left: 0; right: 0; background: linear-gradient(transparent, rgba(0,0,0,.7)); padding: .75rem; color: #fff; font-size: .8rem; }
.cf-gallery-cat { display: inline-block; padding: .2rem .5rem; border-radius: 99px; color: #fff; font-size: .75rem; margin-bottom: .2rem; }
.cf-gallery-desc { display: block; font-weight: 600; }
.cf-gallery-date { display: block; opacity: .8; font-size: .75rem; }

/* All expenses table */
.cf-expenses-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.cf-expenses-table th { text-align: left; padding: .6rem .75rem; border-bottom: 2px solid var(--cf-border); font-weight: 600; color: var(--cf-gray); font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; }
.cf-expenses-table td { padding: .65rem .75rem; border-bottom: 1px solid var(--cf-border); vertical-align: middle; }
.cf-expenses-table tr { cursor: pointer; transition: background .15s; }
.cf-expenses-table tr:hover { background: var(--cf-light); }
.cf-cat-chip { display: inline-block; padding: .2rem .6rem; border-radius: 99px; color: #fff; font-size: .8rem; }
.cf-pagination { display: flex; gap: .4rem; margin-top: 1.25rem; justify-content: center; }
.cf-page-btn { padding: .4rem .75rem; border: 1px solid var(--cf-border); border-radius: 6px; text-decoration: none; color: #444; font-size: .85rem; }
.cf-page-btn--active { background: #111; color: #fff; border-color: #111; }

/* Lightbox */
.cf-lightbox-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.75); z-index: 99999; display: flex; align-items: center; justify-content: center; padding: 1rem; }
.cf-lightbox-inner { background: #fff; border-radius: var(--cf-radius); max-width: 820px; width: 100%; max-height: 90vh; overflow-y: auto; padding: 2.75rem 1.5rem 1.5rem; position: relative; }
.cf-lightbox-close { position: absolute; top: .75rem; right: .75rem; width: 32px; height: 32px; padding: 0; box-sizing: border-box; display: flex; align-items: center; justify-content: center; line-height: 1; background: none; border: none; font-size: 1.3rem; cursor: pointer; color: #999; z-index: 2; }
.cf-lightbox-close:hover { color: #111; }
.cf-lightbox-photos { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1.25rem; }
.cf-photo-panel { position: relative; text-align: center; }
.cf-photo-panel img { width: 100%; border-radius: 8px; cursor: zoom-in; max-height: 300px; object-fit: contain; background: var(--cf-light); }
.cf-photo-label { display: block; font-size: .75rem; color: var(--cf-gray); margin-top: .35rem; text-transform: uppercase; letter-spacing: .05em; }
.cf-lb-placeholder { font-size: .85rem; color: var(--cf-gray); font-style: italic; padding: 2rem; border: 2px dashed var(--cf-border); border-radius: 8px; }
.cf-lightbox-meta h3 { margin: 0 0 .5rem; font-size: 1.1rem; }
.cf-lightbox-meta p { margin: .3rem 0; font-size: .9rem; color: #444; }
.cf-lb-ref code { font-size: .8rem; color: var(--cf-gray); }
.cf-lb-approved { color: #16a34a; font-weight: 500; }

/* Empty state */
.cf-empty { text-align: center; padding: 3rem; color: var(--cf-gray); font-style: italic; }
/* .cf-masonry is a multi-COLUMN container, so a plain paragraph inside it gets split
   down the middle: an empty gallery rendered "No action photos yet. Check" in column
   one and "back soon!" in column two, at different heights. Span the empty state
   across all columns so it reads as one centred line — which is what every brand-new
   install sees on the Gallery tab. */
.cf-masonry .cf-empty { column-span: all; }

/* ── Subscribe widget ──
   Styled to match the dashboard's card language (.cf-category-card) and to follow
   the configured accent. The widget renders outside .cf-dashboard, so it sets its
   own font and receives --cf-accent inline from cf_render_subscribe_widget(); every
   accent use keeps the usual fallback for the case where the var isn't set. */
.cf-subscribe-widget { margin: 0 0; font-family: var(--cf-font); }
.cf-subscribe-inner { background: #fff; border: 1px solid var(--cf-border); border-radius: 14px; padding: 2rem; text-align: center; max-width: 480px; margin: 0 auto; box-shadow: var(--cf-shadow); transition: transform .15s, box-shadow .15s; }
.cf-subscribe-inner:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,.10); }
/* Circular icon badge, matching the category cards' .cf-cat-icon. */
.cf-subscribe-icon { width: 44px; height: 44px; border-radius: 50%; border: 2px solid var(--cf-border); background: var(--cf-light); display: inline-flex; align-items: center; justify-content: center; font-size: 1.4rem; margin: 0 auto .6rem; }
.cf-subscribe-heading { margin: 0 0 .5rem; font-size: 1.15rem; font-weight: 700; }
.cf-subscribe-desc { color: var(--cf-gray); font-size: .9rem; margin-bottom: 1.25rem; }
/* Real labels for screen readers; the placeholders carry the visible affordance. */
.cf-subscribe-label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.cf-subscribe-input { display: block; width: 100%; padding: .6rem .85rem; border: 1px solid var(--cf-border); border-radius: 8px; font-size: .95rem; font-family: inherit; margin-bottom: .6rem; box-sizing: border-box; -webkit-appearance: none; appearance: none; background: #fff; color: #111; transition: border-color .15s, box-shadow .15s; }
.cf-subscribe-input:focus { outline: none; border-color: var(--cf-accent, #068355); box-shadow: 0 0 0 3px rgba(0,0,0,.08); }
/* Accent-tinted focus ring where color-mix is supported; the rule above is the fallback. */
@supports (color: color-mix(in srgb, red 50%, transparent)) {
    .cf-subscribe-input:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--cf-accent, #068355) 25%, transparent); }
}
.cf-subscribe-btn { display: block; width: 100%; padding: .7rem; background: var(--cf-accent, #068355); color: #fff; border: none; border-radius: 8px; font-size: 1rem; font-weight: 600; cursor: pointer; transition: filter .2s, opacity .2s; }
/* brightness() rather than a second hardcoded hex, so hover works for any accent. */
.cf-subscribe-btn:hover:not(:disabled) { filter: brightness(.92); }
.cf-subscribe-btn:disabled { opacity: .6; cursor: default; }
/* Tinted notice chips, in the family of .cf-integrity. Success/error stay green/red
   regardless of branding — these are semantic, not decorative. */
#cf-subscribe-result { margin-top: .9rem; margin-bottom: 0; font-weight: 600; font-size: .9rem; padding: .55rem .8rem; border-radius: 8px; }
#cf-subscribe-result.cf-ok { color: #15803d; background: #f0fdf4; border: 1px solid #bbf7d0; }
#cf-subscribe-result.cf-err { color: #b91c1c; background: #fef2f2; border: 1px solid #fecaca; }

@media (max-width: 600px) {
    .cf-lightbox-photos { grid-template-columns: 1fr; }
    .cf-category-cards { grid-template-columns: 1fr; }
    .cf-masonry { columns: 1; }
}

/* ── Branding (accent + logo) ── */
.cf-dashboard-logo { text-align: center; margin: .5rem 0 1.25rem; }
.cf-dashboard-logo img { max-height: 150px; width: auto; max-width: 100%; height: auto; }
.cf-dashboard .cf-tab--active { color: var(--cf-accent, #068355); border-bottom-color: var(--cf-accent, #068355); }
.cf-dashboard .cf-pill--active { background: var(--cf-accent, #068355); border-color: var(--cf-accent, #068355); color: #fff; }
.cf-dashboard .cf-page-btn--active { background: var(--cf-accent, #068355); border-color: var(--cf-accent, #068355); color: #fff; }
.cf-detail-link { display: inline-block; margin-top: .5rem; color: var(--cf-accent, #068355); text-decoration: none; font-size: .9rem; }
.cf-detail-link:hover { text-decoration: underline; }

/* ── "Powered by ClearFund" mark ──
   Deliberately quiet: below the content, behind a hairline, dimmed until hovered.
   min-width:0 + wrap so it can never be the thing that widens the page on a phone. */
.cf-powered { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .4rem; min-width: 0; margin: 2rem 0 .5rem; padding-top: 1rem; border-top: 1px solid var(--cf-border); opacity: .55; transition: opacity .2s ease; }
.cf-powered:hover { opacity: 1; }
.cf-powered-lbl { font-size: .7rem; color: var(--cf-gray); letter-spacing: .02em; }
.cf-powered-mark { width: 84px; height: auto; max-width: 100%; display: block; }

/* ── All-Expenses search bar ── */
.cf-exp-search { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; margin: .75rem 0; }
.cf-exp-search input[type="search"] { flex: 1 1 240px; padding: .4rem .6rem; border: 1px solid var(--cf-border); border-radius: 8px; }
.cf-exp-search label { font-size: .85rem; color: var(--cf-gray); display: flex; gap: .3rem; align-items: center; }
.cf-exp-search input[type="date"] { padding: .3rem .4rem; border: 1px solid var(--cf-border); border-radius: 8px; }

/* ── Per-category detail view ── */
.cf-detail-back { background: none; border: 0; color: var(--cf-accent, #068355); cursor: pointer; font-size: .9rem; padding: 0; margin-bottom: 1rem; }
.cf-detail-head { display: flex; align-items: center; gap: .6rem; }
.cf-detail-head h2 { margin: 0; }
.cf-detail-desc { color: #444; margin: .5rem 0 1rem; }
.cf-detail-stats { display: flex; gap: 1.5rem; margin: 1rem 0; flex-wrap: wrap; }
.cf-detail-stats .cf-stat-n { display: block; font-size: 1.4rem; font-weight: 700; }
.cf-detail-stats .cf-stat-l { font-size: .8rem; color: var(--cf-gray); text-transform: uppercase; letter-spacing: .03em; }
.cf-detail-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
@media (max-width: 782px) { .cf-detail-cols { grid-template-columns: 1fr; } }
.cf-detail-col h3 { border-bottom: 2px solid var(--cf-border); padding-bottom: .3rem; }

/* ════════ Public dashboard revamp ════════ */

/* Trust hero */
.cf-hero { text-align: center; padding: 2rem 1.5rem 1.75rem; margin: 0 0 1.25rem; border-radius: var(--cf-radius); background: var(--cf-hero-bg, var(--cf-accent, #068355)); color: var(--cf-hero-text, #fff); text-shadow: var(--cf-hero-shadow, none); }
.cf-hero-logo { max-height: var(--cf-logo-size, 120px); width: auto; max-width: 100%; height: auto; margin: 0 auto .85rem; display: block; background: transparent; padding: 0; }
.cf-hero-title { margin: 0; font-size: 1.6rem; font-weight: 700; color: var(--cf-hero-text, #fff); }
.cf-hero-tagline { margin: .35rem auto 1rem; font-size: .95rem; opacity: .92; max-width: 560px; }
.cf-hero-desc { margin: 0 auto 1.25rem; font-size: .88rem; opacity: .85; max-width: 620px; line-height: 1.5; }
.cf-hero-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: .75rem; max-width: 560px; margin: 0 auto; }
.cf-hero-stat { position: relative; background: rgba(255,255,255,.15); border-radius: 10px; padding: .8rem .5rem; }
.cf-hero-arrow { position: absolute; top: .45rem; right: .55rem; font-size: .8rem; font-weight: 700; line-height: 1; opacity: 0; transform: translateY(2px); transition: opacity .35s ease, transform .35s ease; pointer-events: none; }
.cf-hero-arrow.cf-show { opacity: 1; transform: translateY(0); }
.cf-hero-arrow.cf-up { color: #4ade80; }
.cf-hero-arrow.cf-down { color: #f87171; }
.cf-hero-num { display: block; font-size: 1.55rem; font-weight: 700; line-height: 1.1; }
.cf-hero-lbl { font-size: .7rem; text-transform: uppercase; letter-spacing: .05em; opacity: .9; }
.cf-hero-updated { margin-top: 1rem; font-size: .8rem; opacity: .92; }
.cf-hero .cf-refresh-btn { background: rgba(255,255,255,.22); color: #fff; border: 0; border-radius: 50%; width: 26px; height: 26px; padding: 0; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; vertical-align: middle; margin-left: .25rem; }

/* Tamper-evident ledger integrity badge (premium) */
.cf-integrity { display: flex; align-items: flex-start; gap: .6rem; background: #fff; border: 1px solid var(--cf-border); border-left: 4px solid var(--cf-accent, #068355); border-radius: var(--cf-radius); padding: .8rem 1rem; margin: 0 0 1.25rem; box-shadow: var(--cf-shadow); font-size: .85rem; line-height: 1.5; }
.cf-integrity-icon { font-size: 1.1rem; line-height: 1.2; }
/* Fixed success green, deliberately NOT var(--cf-accent): the accent is customer-chosen,
   and "integrity verified" must stay legible (and read as affirmative) whatever colour a
   site picks. Darkened from #059669, which was 3.77:1 on white — below AA. Now 5.48:1. */
.cf-integrity-ok { color: #047857; font-weight: 600; }
.cf-integrity-hash { display: block; margin-top: .25rem; color: #6b7280; font-size: .78rem; }
.cf-integrity-hash code { background: #f3f4f6; padding: .05rem .35rem; border-radius: 4px; }
.cf-integrity--pending { border-left-color: #9ca3af; color: #6b7280; align-items: center; }
@media (max-width: 600px) { .cf-hero-stats { grid-template-columns: 1fr; } }

/* Sticky, underlined tab bar */
.cf-tabs { position: sticky; top: 0; z-index: 6; background: #fff; border-bottom: 1px solid var(--cf-border); gap: .5rem; padding-top: .25rem; }
.cf-tab { border-radius: 0; border: 0; border-bottom: 2px solid transparent; padding: .7rem 1rem; }
.cf-tab:hover { color: var(--cf-accent, #068355); }
.cf-dashboard .cf-tab--active { background: transparent; border: 0; border-bottom: 2px solid var(--cf-accent, #068355); color: var(--cf-accent, #068355); margin: 0; }

/* Modernized category cards */
.cf-category-card { border: 1px solid var(--cf-border); border-radius: 14px; transition: transform .15s, box-shadow .15s; }
.cf-category-card:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,.10); }
.cf-card-header { gap: .65rem; }
.cf-cat-icon { width: 44px; height: 44px; border-radius: 50%; border: 2px solid var(--cf-border); background: var(--cf-light); display: inline-flex; align-items: center; justify-content: center; font-size: 1.4rem; flex: 0 0 auto; }
.cf-cat-name { flex: 1; }
.cf-pct-badge { font-size: .85rem; font-weight: 700; color: var(--cf-accent, #068355); background: var(--cf-light); border-radius: 99px; padding: .15rem .55rem; white-space: nowrap; }

/* Progress: light track + colored fill (fill carries its inline color) */
.cf-progress-bar { background: var(--cf-light); }

/* Gallery: caption fades in on hover */
.cf-gallery-caption { opacity: 0; transition: opacity .2s; }
.cf-gallery-item:hover .cf-gallery-caption { opacity: 1; }

/* ── Scrollable list containers (Gallery + All Expenses) ──
   Mirrors the admin dashboard's .cf-col-scroll: a capped-height box with a
   styled scrollbar; the expenses table keeps a sticky header while scrolling. */
.cf-scroll-box { max-height: 70vh; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--cf-accent, #068355) var(--cf-light); }
.cf-scroll-box::-webkit-scrollbar { width: 10px; }
.cf-scroll-box::-webkit-scrollbar-track { background: var(--cf-light); border-radius: 8px; }
.cf-scroll-box::-webkit-scrollbar-thumb { background: var(--cf-accent, #068355); border-radius: 8px; border: 2px solid var(--cf-light); }
.cf-all-expenses .cf-scroll-box { border: 1px solid var(--cf-border); border-radius: 8px; }
.cf-all-expenses .cf-scroll-box thead th { position: sticky; top: 0; z-index: 1; background: #fff; }
/* Gallery box: a little inner breathing room so cards don't touch the scrollbar */
.cf-gallery .cf-scroll-box { padding-right: .25rem; }
/* Category detail: each table gets its own capped, scrollable box with sticky header. */
.cf-detail .cf-scroll-box { border: 1px solid var(--cf-border); border-radius: 8px; }
.cf-detail .cf-scroll-box thead th { position: sticky; top: 0; z-index: 1; background: #fff; }

/* Money-tracing: affordance links + modal overlay. */
.cf-trace-donation, .cf-trace-expense { color: var(--cf-accent, #068355); text-decoration: none; font-size: .85rem; white-space: nowrap; }
.cf-trace-donation:hover, .cf-trace-expense:hover { text-decoration: underline; }
.cf-trace-overlay { position: fixed; inset: 0; z-index: 100000; background: rgba(0,0,0,.5); align-items: flex-start; justify-content: center; overflow-y: auto; padding: 4vh 1rem; }
.cf-trace-overlay .cf-trace { background: #fff; border-radius: 12px; padding: 1.5rem 1.75rem; max-width: 640px; width: 100%; box-shadow: 0 20px 60px rgba(0,0,0,.3); }
.cf-trace-back { background: none; border: 0; color: var(--cf-gray, #64748b); cursor: pointer; font-size: .9rem; padding: 0; margin-bottom: 1rem; float: right; }
.cf-trace-unspent { margin-top: 1rem; padding: .75rem 1rem; background: var(--cf-light, #f1f5f9); border-radius: 8px; font-size: .9rem; }

/* ════════ My Impact (donor money-tracing page) ════════
   One compact, scrollable table across all categories, each row pairing a gift with
   what it funded. Built on the dashboard's own components — .cf-hero, .cf-scroll-box
   (the public mirror of the admin dashboard's capped, sticky-header scroll box), and
   .cf-expense-row + the shared lightbox. */
.cf-my-impact { margin: 0 auto; }
/* Gate states (premium off / logged out): centre the notice in the card frame. */
.cf-impact-notice { padding-top: 1.5rem; }
.cf-impact-hero { margin-bottom: 1.25rem; }

.cf-impact-actions { display: flex; justify-content: flex-end; margin: 0 0 .6rem; }
.cf-print-btn { background: none; border: 1px solid var(--cf-border); border-radius: 8px; padding: .45rem .9rem; font-size: .85rem; font-family: inherit; color: var(--cf-gray); cursor: pointer; transition: border-color .15s, color .15s; }
.cf-print-btn:hover { border-color: var(--cf-accent, #068355); color: var(--cf-accent, #068355); }

/* Capped scroll box (reuses .cf-scroll-box) with a light border, like the admin tables. */
.cf-impact-scroll { border: 1px solid var(--cf-border); border-radius: 10px; }

.cf-impact-ledger { width: 100%; border-collapse: collapse; font-size: .85rem; table-layout: fixed; }
.cf-impact-ledger thead th { position: sticky; top: 0; z-index: 1; background: #fff; text-align: left; font-size: .7rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--cf-gray); padding: .5rem .65rem; border-bottom: 1px solid var(--cf-border); }
/* Sortable headers (client-side sort in clearfund.js): a neutral ↕ hint, ▲/▼ when active. */
.cf-impact-sortable { cursor: pointer; user-select: none; white-space: nowrap; }
.cf-impact-sortable:hover { color: #111; }
.cf-impact-sortable::after { content: '↕'; margin-left: .25rem; opacity: .35; }
.cf-impact-ledger th.cf-sorted-asc::after { content: '▲'; opacity: 1; color: var(--cf-accent, #068355); }
.cf-impact-ledger th.cf-sorted-desc::after { content: '▼'; opacity: 1; color: var(--cf-accent, #068355); }
.cf-impact-ledger td { padding: .5rem .65rem; border-top: 1px solid var(--cf-border); vertical-align: top; }
.cf-impact-ledger tbody tr:first-child td { border-top: 0; }
.cf-impact-ledger tbody tr:hover { background: var(--cf-light); }

/* Column widths (table-layout: fixed): category | gift | arrow | funded. */
.cf-impact-ledger th:nth-child(1), .cf-impact-ledger td:nth-child(1) { width: 23%; }
.cf-impact-ledger th:nth-child(2), .cf-impact-ledger td:nth-child(2) { width: 30%; }
.cf-impact-th-arrow, .cf-impact-arrow-cell { width: 22px; text-align: center; }

/* Colour-coded category chip: the category's own colour as a left rule + icon + label. */
.cf-impact-cat-chip { display: inline-flex; align-items: center; gap: .35rem; border-left: 3px solid var(--cf-row-color, var(--cf-border)); padding-left: .45rem; min-width: 0; }
.cf-impact-cat-ic { font-size: 1rem; flex: 0 0 auto; }
.cf-impact-cat-nm { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Cell layout: the stacked lines grow, the "+N more" toggle sits inline to the right and
   aligned to the first line — so a collapsed row is exactly one line tall whether or not
   it has a toggle, keeping row heights consistent. The toggle is a sibling of (not inside)
   .cf-impact-lines, so it stays put when the cluster gets its own inner scroll. */
.cf-impact-cell-inner { display: flex; align-items: flex-start; gap: .5rem; }
.cf-impact-cell-inner > .cf-impact-lines { flex: 1 1 auto; }

/* One gift / expense within a cell; extra items stack under the first. When the row is
   expanded, a large cluster's items get their own capped, scrollable box (mirrors the
   outer .cf-scroll-box) rather than making the row arbitrarily tall. */
.cf-impact-lines { min-width: 0; }
.cf-impact-group--open .cf-impact-lines { max-height: 200px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--cf-accent, #068355) var(--cf-light); padding-right: 4px; }
.cf-impact-group--open .cf-impact-lines::-webkit-scrollbar { width: 8px; }
.cf-impact-group--open .cf-impact-lines::-webkit-scrollbar-track { background: var(--cf-light); border-radius: 8px; }
.cf-impact-group--open .cf-impact-lines::-webkit-scrollbar-thumb { background: var(--cf-accent, #068355); border-radius: 8px; border: 2px solid var(--cf-light); }
.cf-impact-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: .1rem .4rem; }
.cf-impact-line + .cf-impact-line { margin-top: .3rem; }
.cf-impact-amt { font-weight: 700; color: var(--cf-accent, #068355); white-space: nowrap; }
.cf-impact-when { color: var(--cf-gray); font-size: .78rem; }
.cf-impact-desc { color: #222; overflow-wrap: break-word; }
.cf-impact-exp-line { cursor: pointer; }
.cf-impact-exp-line:hover .cf-impact-desc { text-decoration: underline; }
.cf-impact-arrow-cell { color: var(--cf-accent, #068355); font-weight: 700; }
.cf-impact-pending { color: var(--cf-gray); font-style: italic; font-size: .82rem; }

/* Collapsed by default: only the first item of each side shows; one toggle per row
   reveals the rest via the group's --open class (no per-item JS). */
.cf-impact-extra { display: none; }
.cf-impact-group--open .cf-impact-extra { display: flex; }
.cf-impact-clickable { cursor: pointer; }
/* Inline, right, aligned to the first line (flex-start + a hair of top padding). */
.cf-impact-toggle { flex: 0 0 auto; white-space: nowrap; padding: .1rem 0 0; background: none; border: 0; font-size: .78rem; font-weight: 600; color: var(--cf-accent, #068355); cursor: pointer; }
.cf-impact-toggle:hover { text-decoration: underline; }
.cf-impact-toggle-less { display: none; }
.cf-impact-group--open .cf-impact-toggle-more { display: none; }
.cf-impact-group--open .cf-impact-toggle-less { display: inline; }

.cf-impact-empty { text-align: center; }
.cf-impact-empty-cta { margin-top: -1.5rem; }
/* The donate CTA is a .cf-donate-btn, which is display:block by default. */
.cf-impact-donate { display: inline-block; background: var(--cf-accent, #068355); margin-top: 0; }
.cf-impact-footnote { font-size: .8rem; color: var(--cf-gray); text-align: center; margin: 1rem 0 0; font-style: italic; }

/* Mobile: drop the arrow column and the category label text (colour + icon carry it),
   and let the two data columns share the width. */
@media (max-width: 600px) {
    .cf-impact-ledger { font-size: .8rem; }
    .cf-impact-th-arrow, .cf-impact-arrow-cell { display: none; }
    .cf-impact-cat-nm { display: none; }
    .cf-impact-ledger th:nth-child(1), .cf-impact-ledger td:nth-child(1) { width: 34px; }
    .cf-impact-ledger th:nth-child(2), .cf-impact-ledger td:nth-child(2) { width: 42%; }
    .cf-impact-cat-chip { padding-left: .35rem; gap: 0; }
}

/* Print / save-as-PDF: the donor's own record of where their money went. */
@media print {
    .cf-impact-actions, .cf-lightbox-overlay, .cf-impact-empty-cta { display: none !important; }
    .cf-my-impact { max-width: none; padding: 0; }
    /* Hero prints as plain text — a full-bleed accent band wastes ink and most
       browsers drop backgrounds anyway. */
    .cf-impact-hero { background: none !important; color: #000; padding: 0 0 1rem; text-shadow: none !important; }
    .cf-impact-hero .cf-hero-title, .cf-impact-hero .cf-hero-num { color: #000; }
    .cf-impact-hero .cf-hero-tagline, .cf-impact-hero .cf-hero-lbl { opacity: 1; color: #333; }
    .cf-hero-stat { background: none !important; border: 1px solid #ccc; }
    .cf-expense-row { cursor: default; }
    /* A printed record must be complete and uncapped: reveal everything, drop toggles. */
    .cf-impact-scroll { max-height: none !important; overflow: visible !important; border: 0; }
    .cf-impact-extra { display: flex !important; }
    .cf-impact-toggle { display: none !important; }
    .cf-impact-ledger tr { break-inside: avoid; }
}

/* ════════ Narrow-viewport hardening ════════
   The dashboard used to push the page wider than the screen on phones. The cause
   was NOT the grid's 320px minimum — the @media rule below already drops to one
   column — but the fact that a grid item's automatic minimum size is its
   *min-content* width. The card's own contents (the 44px icon + a nowrap % badge,
   two side-by-side money stats, and the nowrap expense rows) floored that around
   270px, so the `1fr` track refused to shrink below it and the whole card hung off
   the right edge while the hero, tabs and integrity badge all fitted fine.

   Two halves to the fix: let the card shrink (min-width: 0 all the way down), and
   give its contents somewhere to go once it does (wrap rather than overflow). */

/* min(320px, 100%) keeps the track inside the container even where the media
   query doesn't apply (e.g. a narrow theme column on a wide screen). */
.cf-category-cards { grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr)); }
.cf-category-card { min-width: 0; }
.cf-card-header, .cf-card-stats > div, .cf-progress-wrap { min-width: 0; }
/* Text wraps by whole words and only splits a word mid-letter when the word is
   itself wider than the line (overflow-wrap: break-word) — NOT `anywhere`, which
   breaks at any character and chops ordinary words that would have fit on the next
   line. break-word still contains a too-long word, so nothing overflows. */
.cf-cat-name { min-width: 0; overflow-wrap: break-word; }
/* Long formatted amounts (big numbers, 3-letter currency codes) get the same out. */
.cf-stat-n, .cf-summary-value, .cf-hero-num, .cf-detail-desc { overflow-wrap: break-word; }
/* The head-hash is a 16-char unbroken hex string with no word boundary at all, so
   it must be allowed to break at any character or it sets a hard width floor. */
.cf-integrity-hash code { overflow-wrap: anywhere; }
/* Table cells: descriptions and vendor names can be arbitrarily long. */
.cf-expenses-table td { overflow-wrap: break-word; }
/* The pagers render one button per page with no cap (cfRenderPages), so a site
   with a few hundred expenses runs the row straight off the screen. */
.cf-pagination { flex-wrap: wrap; }

@media (max-width: 600px) {
    .cf-dashboard { padding: 0 .75rem; }

    /* Tabs stay on one row and scroll if the (admin-configurable, translatable)
       labels are long — squeezing them would truncate the active underline. */
    .cf-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
    .cf-tabs::-webkit-scrollbar { display: none; }
    .cf-tab { flex: 0 0 auto; padding: .7rem .7rem; font-size: .92rem; }

    /* Hero: 3 stacked stat blocks pushed the tabs below the fold. Two columns with
       the third spanning reads as a unit and halves the height. */
    .cf-hero { padding: 1.5rem 1rem 1.25rem; }
    .cf-hero-stats { grid-template-columns: 1fr 1fr; }
    .cf-hero-stats > .cf-hero-stat:last-child { grid-column: 1 / -1; }
    .cf-hero-title { font-size: 1.35rem; }
    .cf-hero-num { font-size: 1.3rem; }

    .cf-category-card { padding: 1rem; }
    /* Recent-expense rows wrap instead of forcing the card wide; on the narrow screen
       the description wraps to whole words over as many lines as it needs rather than
       ellipsis-truncating (which chopped words to fit the single desktop line). */
    .cf-expense-list .cf-expense-row { flex-wrap: wrap; }
    .cf-exp-desc { flex: 1 1 55%; white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: break-word; }

    /* Expenses table: tighter cells and a wrapping category chip so the columns
       fit the screen instead of scrolling sideways inside .cf-scroll-box. */
    .cf-expenses-table { font-size: .8rem; }
    .cf-expenses-table th, .cf-expenses-table td { padding: .45rem .35rem; }
    .cf-expenses-table th { font-size: .68rem; }
    .cf-cat-chip { white-space: normal; padding: .2rem .4rem; font-size: .72rem; }

    /* Search row: the two date fields share a line under the search box. */
    .cf-exp-search input[type="search"] { flex: 1 1 100%; }
    .cf-exp-search label { flex: 1 1 0; min-width: 0; }
    .cf-exp-search input[type="date"] { min-width: 0; width: 100%; }

    /* The lightbox and trace modal sat edge-to-edge with desktop padding. */
    .cf-lightbox-overlay { padding: .5rem; }
    .cf-lightbox-inner { padding: 2.75rem 1rem 1rem; max-height: 94vh; }
    .cf-trace-overlay { padding: 2vh .5rem; }
    .cf-trace-overlay .cf-trace { padding: 1.25rem 1rem; }

    .cf-page-btn { padding: .35rem .6rem; }

    /* Detail view: three stats in a row, and give the tables real estate. */
    .cf-detail-stats { gap: .75rem 1rem; }
    .cf-detail-head h2 { font-size: 1.25rem; min-width: 0; overflow-wrap: break-word; }
}

/* ════════ Theme-proof button reset ════════
   WordPress themes routinely style bare <button> elements (pill radii,
   backgrounds, borders, box-shadows, uppercased/letter-spaced labels).
   That chrome bleeds into ClearFund controls and differs site-to-site
   (e.g. the pill-shaped .cf-feed-toggle seen on some live themes).
   Target ClearFund's own button classes directly — not `.cf-dashboard
   button` — so this reaches buttons rendered outside the dashboard
   wrapper (the lightbox) and never touches a theme's own buttons.

   Group A: neutralizers safe on every CF button (no component sets these,
   so there is no cascade conflict). Styled buttons keep their own look. */
.cf-feed-toggle,
.cf-refresh-btn,
.cf-lightbox-close,
.cf-subscribe-btn,
.cf-print-btn,
.cf-detail-back,
.cf-trace-back {
    -webkit-appearance: none;
    appearance: none;
    font-family: inherit;
    text-transform: none;
    letter-spacing: normal;
    box-shadow: none;
}
/* Group B: bare (icon/text-only) buttons also drop any theme radius,
   background and border. Styled buttons (.cf-refresh-btn circle,
   .cf-subscribe-btn pill) are excluded — they set their own. */
.cf-feed-toggle,
.cf-lightbox-close,
.cf-detail-back,
.cf-trace-back {
    background: none;
    border: 0;
    border-radius: 0;
}