/* ============================================================================
   Cubbi Admin — design system
   Brand tokens lifted from cubbi-app-main (tailwind.config.js / redesign.css):
   forest green + lilac + cream, Rubik (heavy uppercase display), pill buttons,
   hard-offset lilac shadows. One stylesheet, reused by every admin page via the
   sidebar layout + the c-* Tag Helper component library.
   ============================================================================ */

:root {
    --green: #214e37; --green-dark: #163827; --green-soft: #2e6a4b; --mid-green: #4c945b; --light-green: #cee2b7;
    --lilac: #e8c6f7; --lilac-soft: #f2ddfa; --lilac-deep: #d1a6e4; --purple: #8b579c; --deep-purple: #4d216d;
    --cream: #f1f0d8; --cream-warm: #f7f6e2; --white: #fff;
    --ink: #1a1a1a; --muted: #5e5e5e; --faint: #9a9a9a; --border: #e6e3d8; --hair: #f1efe4;
    --pending: #e0951c; --pending-soft: #fbf0d6; --confirmed: #2e6a4b; --declined: #c0453a; --declined-soft: #f6e3e0;
    --soft-shadow: 0 10px 30px rgba(33, 78, 55, .10);
    --hard-lilac: 6px 6px 0 var(--lilac);
    --r-card: 24px; --r-panel: 24px; --r-pill: 100px; --r-input: 12px;
    --sidebar-w: 248px;
    --font: 'Rubik', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

/* ── Shell: sidebar + content ─────────────────────────────────────────────── */
body.cadmin { margin: 0; background: var(--cream-warm); color: var(--ink); font-family: var(--font); -webkit-font-smoothing: antialiased; }
.cadmin-shell { display: flex; min-height: 100vh; }

.cadmin-sidebar { width: var(--sidebar-w); flex-shrink: 0; background: var(--green); color: var(--cream-warm); display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; overflow-y: auto; }
.cadmin-brand { display: flex; align-items: center; gap: 9px; padding: 22px 22px 18px; text-decoration: none; }
/* Full brand lockup (lilac mark + cream wordmark on brand green — bg matches the sidebar). */
.cadmin-brand img { height: 34px; width: auto; display: block; }
.cadmin-brand .tag { font-size: 9px; letter-spacing: .28em; font-weight: 700; color: var(--light-green); align-self: flex-end; margin-bottom: 3px; }
.cadmin-nav { display: flex; flex-direction: column; gap: 2px; padding: 8px 12px; flex: 1; }
.cadmin-nav .sec { font-size: 9.5px; letter-spacing: .18em; text-transform: uppercase; color: rgba(206, 226, 183, .65); font-weight: 700; padding: 14px 12px 6px; }
.cadmin-nav a { display: flex; align-items: center; gap: 11px; padding: 10px 12px; border-radius: 12px; color: rgba(247, 246, 226, .82); text-decoration: none; font-size: 13.5px; font-weight: 500; transition: background .12s, color .12s; }
.cadmin-nav a .ic { width: 18px; height: 18px; flex-shrink: 0; opacity: .9; }
.cadmin-nav a:hover { background: rgba(247, 246, 226, .08); color: var(--cream-warm); }
.cadmin-nav a.active { background: var(--cream-warm); color: var(--green); font-weight: 600; }
.cadmin-nav a.active .ic { opacity: 1; }
/* Work-waiting count on a nav entry. Pushed to the right so the labels stay aligned. */
.cadmin-nav a .cadmin-nav-count { margin-left: auto; min-width: 20px; padding: 1px 6px; border-radius: 100px; background: var(--lilac); color: var(--deep-purple); font-size: 11px; font-weight: 700; text-align: center; }
.cadmin-nav a.active .cadmin-nav-count { background: var(--green); color: var(--cream-warm); }
.cadmin-side-foot { padding: 14px 18px; border-top: 1px solid rgba(247, 246, 226, .12); font-size: 12px; color: rgba(247, 246, 226, .7); }
.cadmin-side-foot .who { display: flex; align-items: center; gap: 9px; }
.cadmin-side-foot .avatar { width: 28px; height: 28px; border-radius: 50%; background: var(--purple); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 12px; }
/* Logout — ghost button tuned for the dark sidebar (the shared .c-btn--ghost assumes a light card). */
.cadmin-logout-form { margin-top: 12px; }
.cadmin-logout-btn { display: flex; align-items: center; gap: 8px; width: 100%; background: transparent; border: 1.5px solid rgba(247, 246, 226, .3); color: rgba(247, 246, 226, .82); border-radius: var(--r-pill); padding: 8px 14px; font-family: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; transition: background .12s, color .12s, border-color .12s; }
.cadmin-logout-btn .ic { width: 15px; height: 15px; flex-shrink: 0; opacity: .9; }
.cadmin-logout-btn:hover { background: rgba(247, 246, 226, .1); color: var(--cream-warm); border-color: rgba(247, 246, 226, .5); }

.cadmin-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.cadmin-topbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 30px; background: rgba(247, 246, 226, .7); backdrop-filter: blur(6px); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 20; }
.cadmin-topbar .crumb { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--green-soft); font-weight: 700; }
.cadmin-content { padding: 26px 30px 60px; width: 100%; }
/* The admin shell inherits border-box sizing from Bootstrap's reset; the brand portal shell
   deliberately ships without Bootstrap and so got the CSS default, content-box. Every padded
   block sized at width:100% — this content column, page headers, cards — then measured 100%
   PLUS its padding and hung off the right of its column by exactly that much. Scoped to
   .cadmin, this restates for the portal what the admin app already had. */
.cadmin, .cadmin *, .cadmin *::before, .cadmin *::after { box-sizing: border-box; }
/* Topbar left group + mobile menu toggle (hamburger hidden on desktop; shown ≤880px) */
.cadmin-topbar .tb-left { display: flex; align-items: center; gap: 12px; min-width: 0; }
.cadmin-topbar .tb-left .crumb { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cadmin-hamburger { display: none; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; border: 1.5px solid var(--border); background: var(--white); color: var(--green); border-radius: 12px; cursor: pointer; flex-shrink: 0; }
.cadmin-hamburger svg { width: 20px; height: 20px; }
.cadmin-hamburger:hover { background: var(--hair); }
.cadmin-backdrop { display: none; position: fixed; inset: 0; background: rgba(22, 36, 46, .42); z-index: 40; }

/* ── Typography helpers ───────────────────────────────────────────────────── */
.c-eyebrow { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--purple); font-weight: 700; }
.c-h1 { font-weight: 800; text-transform: uppercase; font-size: 34px; line-height: 1; letter-spacing: .005em; color: var(--green); margin: 6px 0 8px; }
.c-h2 { font-weight: 800; text-transform: uppercase; font-size: 17px; letter-spacing: .04em; color: var(--green); margin: 0 0 12px; }
.c-sub { color: var(--muted); font-size: 13.5px; line-height: 1.5; margin: 0; }
.c-label { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--green-soft); font-weight: 700; }
.c-num { font-variant-numeric: tabular-nums; }

/* ── Page header (green hero) ─────────────────────────────────────────────── */
.c-page-header { position: relative; overflow: hidden; background: var(--green); border-radius: 24px; padding: 18px 24px; color: var(--cream-warm); display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; flex-wrap: wrap; box-shadow: var(--soft-shadow); margin-bottom: 22px; }
.c-page-header::after { content: ''; position: absolute; right: -60px; top: -70px; width: 220px; height: 220px; border-radius: 50%; background: radial-gradient(circle, rgba(232, 198, 247, .22), rgba(232, 198, 247, 0) 70%); pointer-events: none; }
.c-page-header .lead { position: relative; z-index: 1; }
.c-page-header .c-eyebrow { color: var(--lilac); }
.c-page-header h1 { font-weight: 800; text-transform: uppercase; font-size: 30px; line-height: .98; margin: 6px 0 7px; color: var(--cream-warm); }
.c-page-header .c-sub { color: rgba(247, 246, 226, .78); max-width: 520px; }
.c-page-header .aside { position: relative; z-index: 1; }

/* ── Buttons / pills ──────────────────────────────────────────────────────── */
.c-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: inherit; font-size: 13px; font-weight: 600; line-height: 1; border: 0; border-radius: var(--r-pill); padding: 10px 18px; cursor: pointer; text-decoration: none; transition: background .15s, transform .05s, color .15s; letter-spacing: .01em; }
.c-btn:active { transform: translateY(1px); }
.c-btn:disabled { opacity: .55; cursor: default; }
.c-btn--green { background: var(--green); color: var(--cream-warm); }
.c-btn--green:hover { background: var(--green-dark); color: var(--cream-warm); }
.c-btn--cream { background: var(--cream-warm); color: var(--green); }
.c-btn--cream:hover { background: #fff; }
.c-btn--lilac { background: var(--lilac); color: var(--deep-purple); }
.c-btn--lilac:hover { background: var(--lilac-deep); }
.c-btn--ghost { background: transparent; border: 1.5px solid var(--green); color: var(--green); }
.c-btn--ghost:hover { background: var(--green); color: var(--cream-warm); }
.c-btn--sm { padding: 6px 13px; font-size: 12px; }
.c-btn--danger { background: var(--declined); color: #fff; }
.c-btn--danger:hover { background: #9c352b; }
/* Quiet destructive action — outline, so Delete never out-shouts the primary action */
.c-btn--ghost-danger { background: transparent; border: 1.5px solid var(--declined); color: var(--declined); }
.c-btn--ghost-danger:hover { background: var(--declined); color: #fff; }

/* ── Cards / panels ───────────────────────────────────────────────────────── */
.c-card { background: var(--white); border: 1px solid var(--border); border-radius: var(--r-card); padding: 22px 24px; box-shadow: var(--soft-shadow); }
.c-card--pop { box-shadow: var(--hard-lilac); }
/* Space stacked cards (e.g. the transaction drill-down) so they don't clump together */
.cadmin-content .c-card + .c-card { margin-top: 18px; }
/* Card grids: the sibling stacking margin above is for vertically piled cards and must not
   fire between columns of the same row. */
.c-grid { display: grid; gap: 24px; align-items: stretch; }
.cadmin-content .c-grid > .c-card + .c-card { margin-top: 0; }
/* Plain form-field grid — NOT .c-statgrid (which has a tinted stat background) */
.c-formgrid { display: grid; gap: 16px 20px; }
.c-formgrid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.c-formgrid.cols-2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 720px) { .c-formgrid.cols-3, .c-formgrid.cols-2 { grid-template-columns: 1fr; } }
.c-panel { background: var(--white); border: 1px solid var(--border); border-radius: var(--r-panel); box-shadow: var(--soft-shadow); padding: 16px 20px; }

/* ── Badges (status) ──────────────────────────────────────────────────────── */
.c-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 700; border-radius: var(--r-pill); padding: 3px 11px; letter-spacing: .01em; }
.c-badge::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.c-badge--confirmed { color: var(--confirmed); background: #e6f1ea; }
.c-badge--pending { color: var(--pending); background: var(--pending-soft); }
.c-badge--declined { color: var(--declined); background: var(--declined-soft); }
.c-badge--neutral { color: var(--muted); background: var(--hair); }
.c-tagpill { background: var(--lilac-soft); color: var(--deep-purple); padding: 2px 9px; border-radius: var(--r-pill); font-size: 10px; font-weight: 700; }

/* ── Stat card ────────────────────────────────────────────────────────────── */
.c-statgrid { display: grid; gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: 16px; overflow: hidden; }
.c-stat { background: var(--white); padding: 12px 13px; }
.c-stat .v { font-size: 16px; font-weight: 700; color: var(--green-dark); }
.c-stat .l { font-size: 10.5px; letter-spacing: .04em; text-transform: uppercase; color: var(--faint); margin-top: 2px; font-weight: 600; }

/* ── Lilac banner (offer-card style) ──────────────────────────────────────── */
.c-banner { display: flex; align-items: center; gap: 16px; background: var(--lilac-soft); border: 1px solid var(--lilac); border-radius: 20px; padding: 15px 20px; box-shadow: var(--hard-lilac); }
.c-banner .ico { display: grid; place-items: center; width: 34px; height: 34px; flex-shrink: 0; border-radius: 50%; background: var(--purple); color: #fff; font-weight: 800; font-size: 17px; }
.c-banner .txt { font-size: 13px; color: var(--deep-purple); line-height: 1.45; }
.c-banner .txt b { font-weight: 700; }
.c-banner .act { margin-left: auto; }

/* Session-expiry banner (F3b): pinned to the top of the viewport so it's visible
   regardless of scroll position, right before the page redirects to login. */
.c-session-banner { position: fixed; top: 0; left: 0; right: 0; z-index: 500; text-align: center; padding: 10px 16px; font-size: 13px; font-weight: 600; background: var(--declined-soft); color: var(--declined); border-bottom: 1px solid var(--declined); }

/* ── Forms ────────────────────────────────────────────────────────────────── */
.c-field { display: flex; flex-direction: column; gap: 5px; }
.c-input, .c-select, .c-textarea, .cadmin-content input.form-control, .cadmin-content select.form-control, .cadmin-content textarea.form-control {
    font-family: inherit; font-size: 13px; color: var(--ink); border: 1.5px solid var(--border); border-radius: var(--r-input); padding: 9px 12px; background: #fff; }
.c-input:focus, .c-select:focus, .c-textarea:focus, .cadmin-content .form-control:focus { outline: none; border-color: var(--purple); box-shadow: 0 0 0 3px rgba(139, 87, 156, .15); }
.cadmin-content input[type=checkbox] { accent-color: var(--green); width: 16px; height: 16px; }
/* Native file input — make "Choose file" a Cubbi pill instead of the grey browser button */
.cadmin-content input[type=file] { padding: 6px 10px; font-size: 13px; color: var(--muted); }
.cadmin-content input[type=file]::file-selector-button { font-family: inherit; font-weight: 600; font-size: 12px; border: 0; border-radius: var(--r-pill); padding: 8px 16px; margin-right: 12px; background: var(--green); color: var(--cream-warm); cursor: pointer; transition: background .15s; }
.cadmin-content input[type=file]::file-selector-button:hover { background: var(--green-dark); }

/* ── Tables (also restyles existing .table / DataTables) ──────────────────── */
.cadmin-content table.table, .cadmin-content table.dataTable { border-collapse: collapse !important; width: 100% !important; }
.cadmin-content table.table thead th, .cadmin-content table.table thead td,
.cadmin-content table.dataTable thead th, .cadmin-content table.dataTable thead td {
    font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--green-soft); font-weight: 700; border-bottom: 2px solid var(--cream) !important; padding: 13px 16px; text-align: left; background: transparent !important; }
.cadmin-content table.table tbody td, .cadmin-content table.dataTable tbody td { padding: 15px 16px; border-top: 1px solid var(--hair); font-size: 13px; color: var(--ink); vertical-align: middle; white-space: nowrap; max-width: 320px; overflow: hidden; text-overflow: ellipsis; }
.cadmin-content table.table tbody tr:hover td, .cadmin-content table.dataTable tbody tr:hover td { background: var(--cream-warm); }
/* Clickable rows (e.g. transactions -> drill-down). Cells with their own buttons opt out. */
.cadmin-content table.dataTable tbody tr.row-click { cursor: pointer; }
.cadmin-content table.dataTable tbody td.no-rowclick { cursor: default; }
/* Row actions stay on one line (the table scrolls) instead of stacking when a column is narrow */
.c-rowactions { display: inline-flex; gap: 8px; align-items: center; flex-wrap: nowrap; white-space: nowrap; }
.cadmin-content table.dataTable td:has(.c-btn), .cadmin-content table.table td:has(.c-btn) { white-space: nowrap; max-width: none; overflow: visible; }
.cadmin-content table.dataTable td .c-btn, .cadmin-content table.table td .c-btn { margin: 2px 6px 2px 0; vertical-align: middle; }
.cadmin-content .dataTables_wrapper { font-size: 13px; color: var(--muted); }
.cadmin-content .dataTables_filter input { border: 1.5px solid var(--border); border-radius: var(--r-pill); padding: 6px 12px; }
.cadmin-content .dataTables_filter input:focus { outline: none; border-color: var(--purple); }
.cadmin-content .dataTables_length select { border: 1.5px solid var(--border); border-radius: var(--r-input); padding: 5px 9px; margin: 0 6px; background: #fff; }
.cadmin-content .dataTables_length, .cadmin-content .dataTables_filter { margin-bottom: 14px; }
.cadmin-content .dataTables_info, .cadmin-content .dataTables_paginate { margin-top: 12px; }
.cadmin-content .dataTables_paginate .paginate_button { border-radius: var(--r-pill) !important; border: 0 !important; padding: 5px 12px !important; }
.cadmin-content .dataTables_paginate .paginate_button.current { background: var(--green) !important; color: var(--cream-warm) !important; border: 0 !important; }
/* Wide tables (e.g. Partner Brands) scroll horizontally inside the card instead of spilling out */
.cadmin-content .dataTables_scrollBody { overflow-x: auto; }
.cadmin-content .dataTables_scrollHead, .cadmin-content .dataTables_scrollBody { width: 100% !important; }
.cadmin-content table.dataTable { margin: 0 !important; }

.c-drill { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; text-decoration: none; color: var(--green); background: var(--cream); font-weight: 800; }
.c-drill:hover { background: var(--green); color: var(--cream-warm); }

/* ══ .c-table — canonical table treatment ═════════════════════════════════════
   The same rhythm the .table / DataTables rules above give the reporting pages,
   promoted into a component class so hand-written tables get it without opting
   into DataTables. Unscoped on purpose: used in both the admin shell and the
   brand portal shell. Keep this block contiguous.                            */
.c-table { width: 100%; border-collapse: collapse; font-size: 13px; color: var(--ink); }

.c-table thead th {
    font-size: 10px; letter-spacing: .1em; text-transform: uppercase; font-weight: 700;
    color: var(--green-soft); text-align: left; white-space: nowrap;
    padding: 10px 16px; border-bottom: 2px solid var(--border); background: transparent;
}

.c-table tbody td { padding: 13px 16px; border-top: 1px solid var(--border); vertical-align: middle; overflow-wrap: break-word; }

.c-table tbody tr:first-child td { border-top: 0; }
.c-table tbody tr:hover td { background: var(--cream-warm); }

/* First and last cells sit flush with the card's own padding */
.c-table thead th:first-child, .c-table tbody td:first-child { padding-left: 0; }
.c-table thead th:last-child, .c-table tbody td:last-child { padding-right: 0; }

/* Chips, badges and buttons ride the text baseline instead of dropping the row */
.c-table tbody td .c-badge, .c-table tbody td .c-btn { vertical-align: middle; }
.c-table tbody td .c-badge { margin: 1px 0; }

/* Dates, chips and actions never wrap mid-value ("29 Jul 2026", not "29 Jul / 2026") */
.c-table td:has(.c-badge), .c-table td:has(.c-btn), .c-table .c-nowrap { white-space: nowrap; }

/* Opt-in for columns holding unbounded strings (emails, slugs). `anywhere` also lowers the
   cell's min-content width, which is the point: without it one long address widens the
   column until the trailing date/action columns are pushed out of the card. Applied per
   column rather than to every td, since it would otherwise break short values like
   "10% off" onto two lines; the min-width keeps ordinary addresses on one line. */
.c-table td.c-table-longtext { overflow-wrap: anywhere; min-width: 172px; max-width: 260px; }

/* Trailing action column right-aligns and stays on one line */
.c-table thead th:last-child:empty, .c-table th.c-table-actions, .c-table td.c-table-actions { text-align: right; }
.c-table td.c-table-actions { white-space: nowrap; }
.c-table td.c-table-actions form { display: inline; }
/* Direct children only — cells that already wrap their buttons in a flex row keep their own gap */
.c-table td.c-table-actions > .c-btn + .c-btn, .c-table td.c-table-actions > form + form { margin-left: 6px; }

.c-table .c-sub { display: inline-block; font-size: 12px; }
/* ══ end .c-table ═══════════════════════════════════════════════════════════ */

/* ── Reporting components (KPI hero, commission pipeline, chart, sync box) ──── */
.c-syncbox { position: relative; z-index: 1; background: rgba(247, 246, 226, .10); border: 1px solid rgba(247, 246, 226, .22); border-radius: 20px; padding: 15px 17px; min-width: 250px; }
.c-syncbox .lab { display: flex; align-items: center; gap: 8px; font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--lilac); font-weight: 700; }
.c-syncbox .lab .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--light-green); box-shadow: 0 0 0 3px rgba(206, 226, 183, .25); }
.c-syncbox .meta { font-size: 12px; color: rgba(247, 246, 226, .82); margin-top: 9px; line-height: 1.55; }
.c-syncbox .meta b { color: var(--cream-warm); font-weight: 600; }
.c-syncbox .ctl { display: flex; align-items: center; gap: 11px; margin-top: 12px; }
.c-syncbox .status { font-size: 11.5px; color: rgba(247, 246, 226, .7); }

.c-ccynote { font-size: 12px; color: var(--purple); font-weight: 600; margin: 0 4px 12px; }

.c-filters { display: flex; flex-wrap: wrap; gap: 14px 18px; align-items: flex-end; }
.c-filters .actions { display: flex; align-items: center; gap: 14px; margin-left: auto; }
/* Every filter control the same height + shape, so the row reads as one set, not a mismatch */
.c-filters .c-input, .c-filters .c-select { height: 40px; box-sizing: border-box; }
.c-filters .c-field { gap: 6px; }
/* Quick-range preset chips above the From/To boxes */
.c-daterange-presets { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.c-daterange-chip { border: 1.5px solid var(--border); background: var(--white); color: var(--muted); border-radius: var(--r-pill); padding: 6px 14px; font: 600 12.5px var(--font); cursor: pointer; transition: background .12s, color .12s, border-color .12s; }
.c-daterange-chip:hover { border-color: var(--green-soft); color: var(--green); }
.c-daterange-chip.is-active { background: var(--green); border-color: var(--green); color: var(--cream-warm); }

/* Multi-select choice chips (hidden checkbox + pill label), e.g. brand categories */
.c-choice-chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 4px 0; }
.c-choice-chip { position: relative; display: inline-flex; }
.c-choice-chip input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.c-choice-chip span { display: inline-flex; align-items: center; gap: 6px; border: 1.5px solid var(--border); background: var(--white); color: var(--muted); border-radius: var(--r-pill); padding: 6px 14px; font: 600 12.5px var(--font); transition: background .12s, color .12s, border-color .12s; pointer-events: none; }
.c-choice-chip span::before { content: '+'; font-weight: 700; }
.c-choice-chip:hover span { border-color: var(--green-soft); color: var(--green); }
.c-choice-chip input:checked + span { background: var(--green); border-color: var(--green); color: var(--cream-warm); }
.c-choice-chip input:checked + span::before { content: '✓'; }
.c-choice-chip input:focus-visible + span { outline: 2px solid var(--green-soft); outline-offset: 2px; }

.c-kpigrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(335px, 1fr)); gap: 20px; margin: 0 0 22px; align-items: stretch; }
.c-kpi { background: var(--white); border: 1px solid var(--border); border-radius: var(--r-card); padding: 22px 24px; box-shadow: var(--hard-lilac); }
.c-kpi-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.c-kpi-ccy { font-size: 11px; font-weight: 800; letter-spacing: .1em; color: var(--green); background: var(--cream); border-radius: var(--r-pill); padding: 4px 12px; }
.c-kpi-pill { font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--purple); background: var(--lilac-soft); border-radius: var(--r-pill); padding: 4px 11px; }
.c-kpi-lab { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--green-soft); font-weight: 700; }
.c-kpi-val { font-weight: 800; font-size: 48px; line-height: 1; color: var(--green); margin: 6px 0 3px; letter-spacing: -.01em; }
.c-kpi-note { font-size: 12.5px; color: var(--muted); margin-bottom: 18px; }
/* Fixed-fee / tenancy lane on the KPI card — distinct (purple) so it reads apart from earned commission */
.c-kpi-bonus { font-size: 12.5px; font-weight: 700; color: var(--purple); margin: 4px 0 16px; }
.c-kpi-bonus span { font-weight: 500; color: var(--faint); }
/* All currency cards render identically — same hero size and stat grid, equal height via the grid's stretch.
   minmax(0,1fr) lets wide numbers stay inside their track instead of spilling past the card. */
.c-kpi .c-statgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.c-pipe { display: flex; height: 15px; border-radius: var(--r-pill); overflow: hidden; background: var(--cream); margin-bottom: 10px; }
.c-pipe span { display: block; height: 100%; transition: width .5s ease; }
.c-pipe .s-pending { background: var(--pending); } .c-pipe .s-confirmed { background: var(--mid-green); } .c-pipe .s-declined { background: var(--declined); }
.c-pipe-legend { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 18px; }
.c-pipe-legend .item { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--muted); }
.c-pipe-legend .k { width: 9px; height: 9px; border-radius: 3px; }
.c-pipe-legend .k.pending { background: var(--pending); } .c-pipe-legend .k.confirmed { background: var(--mid-green); } .c-pipe-legend .k.declined { background: var(--declined); }
.c-pipe-legend .v { font-weight: 700; color: var(--ink); }

.c-chart-panel { padding: 20px 22px 14px; margin-bottom: 22px; }
.c-chart-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; }
.c-chart-head .t { font-weight: 800; text-transform: uppercase; letter-spacing: .04em; font-size: 15px; color: var(--green); }
.c-chart-head .s { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); font-weight: 600; }
.c-chart-wrap { position: relative; height: 210px; }

/* Key/value detail grid (drill-down pages) */
.c-kv { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px 24px; }
.c-kv .k { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--green-soft); font-weight: 700; margin-bottom: 3px; }
.c-kv .v { font-size: 14px; color: var(--ink); line-height: 1.4; word-break: break-word; }
.c-kv .v a { color: var(--purple); text-decoration: none; font-weight: 600; }
.c-kv .v a:hover { text-decoration: underline; }
.c-pre { background: var(--green-dark); color: #d7e7da; border-radius: 14px; padding: 16px 18px; font-size: 12px; line-height: 1.5; overflow: auto; max-height: 460px; }

/* Modal + typeahead picker (e.g. Brand Mapping "Bind") */
.c-modal-overlay { position: fixed; inset: 0; background: rgba(22, 36, 46, .45); display: flex; align-items: center; justify-content: center; z-index: 200; padding: 20px; }
.c-modal { background: var(--white); border-radius: var(--r-card); box-shadow: 0 24px 64px rgba(22, 36, 46, .32); padding: 22px 24px; width: 100%; max-width: 460px; }
.c-modal-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 14px; }
.c-modal-head .c-h2 { margin: 4px 0 0; }
.c-picker-results { max-height: 320px; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; }
.c-picker-item { display: flex; justify-content: space-between; align-items: center; padding: 10px 12px; border-radius: 10px; cursor: pointer; font-size: 13px; color: var(--ink); }
.c-picker-item:hover { background: var(--cream-warm); }
.c-picker-item .meta { font-size: 11px; font-weight: 700; color: var(--green-soft); text-transform: uppercase; letter-spacing: .06em; }
.c-picker-empty { color: var(--faint); font-size: 13px; padding: 16px 12px; text-align: center; }

@media (max-width: 880px) {
    .cadmin-sidebar { position: fixed; left: -260px; z-index: 50; transition: left .2s; height: 100dvh; }
    .cadmin-sidebar.open { left: 0; box-shadow: 0 0 40px rgba(22, 36, 46, .35); }
    .cadmin-hamburger { display: inline-flex; }
    .cadmin-backdrop:not([hidden]) { display: block; }
    .c-page-header h1 { font-size: 30px; }
    .c-kpigrid { grid-template-columns: 1fr; }
    /* Narrow card: 2 stat columns so wide figures (e.g. £60,121.55) don't spill past the edge */
    .c-kpi .c-statgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Phones: tighter page gutters + card padding so the big KPI hero number never overflows a narrow screen */
@media (max-width: 600px) {
    .cadmin-content { padding-left: 16px; padding-right: 16px; }
    .c-kpi { padding: 18px 16px; }
}
@media (max-width: 400px) {
    .c-kpi-val { font-size: 40px; }
}

/* ── Auth shell (login / register / reset / 2FA) ─────────────────────────── */
body.cauth { min-height: 100vh; background: var(--green); display: grid; place-items: center; }
.cauth-wrap { width: 100%; max-width: 440px; padding: 24px; }
.cauth-card { background: var(--cream-warm); border-radius: var(--r-panel); padding: 34px 34px 30px; box-shadow: var(--hard-lilac); }
.cauth-brand { display: flex; align-items: center; gap: 9px; text-decoration: none; margin-bottom: 22px; }
/* Light lockup (green circle mark + green wordmark, transparent bg) on the cream card. */
.cauth-brand img { height: 40px; width: auto; display: block; }
.cauth-brand .tag { font-size: 9px; letter-spacing: .28em; font-weight: 700; color: var(--mid-green); align-self: flex-end; margin-bottom: 4px; }
.cauth-card h1 { font-size: 20px; font-weight: 900; text-transform: uppercase; letter-spacing: .02em; color: var(--green-dark); margin: 0 0 16px; }
.cauth-field { margin-bottom: 14px; }
.cauth-field label { display: block; font-size: 12px; font-weight: 700; color: var(--muted); margin-bottom: 5px; }
.cauth-field input[type="text"], .cauth-field input[type="email"], .cauth-field input[type="password"], .cauth-field input[type="tel"] {
    width: 100%; box-sizing: border-box; border: 1.5px solid var(--border); border-radius: var(--r-input);
    padding: 11px 13px; font: 500 14px var(--font); background: var(--white); color: var(--ink); outline: none;
}
.cauth-field input:focus { border-color: var(--green-soft); }
.cauth-check { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); margin-bottom: 16px; }
.cauth-btn { width: 100%; border: 0; border-radius: var(--r-pill); background: var(--green); color: var(--cream-warm); font: 800 14px var(--font); text-transform: uppercase; letter-spacing: .06em; padding: 13px 18px; cursor: pointer; }
.cauth-btn:hover { background: var(--green-soft); }
.cauth-links { margin-top: 16px; font-size: 13px; }
.cauth-links a { color: var(--green-soft); font-weight: 600; text-decoration: none; display: block; margin-top: 6px; }
.cauth-links a:hover { text-decoration: underline; }
.cauth-error, .text-danger { color: var(--declined); font-size: 12.5px; }
.cauth-note { font-size: 13.5px; color: var(--muted); line-height: 1.55; }
.cauth-hint { margin: 6px 0 0; } /* helper text sitting directly under an input */
.cauth-ok { font-size: 13.5px; color: var(--confirmed); background: #e6f1ea; border-radius: var(--r-input); padding: 11px 13px; line-height: 1.55; margin: 0 0 16px; }
/* Logout is a form button living among .cauth-links anchors — same look, no button chrome */
.cauth-links-btn { background: none; border: 0; padding: 0; font: inherit; cursor: pointer; color: var(--green-soft); font-weight: 600; text-decoration: none; display: block; margin-top: 6px; }
.cauth-links-btn:hover { text-decoration: underline; }

/* ── Account manage sub-nav ──────────────────────────────────────────────── */
.cmanage { display: flex; gap: 22px; align-items: flex-start; }
.cmanage-nav { flex: 0 0 208px; display: flex; flex-direction: column; gap: 4px; }
.cmanage-nav a { display: block; padding: 9px 14px; border-radius: var(--r-pill); font: 600 13.5px var(--font); color: var(--muted); text-decoration: none; }
.cmanage-nav a:hover { background: var(--hair); color: var(--ink); }
.cmanage-nav a.active { background: var(--green); color: var(--cream-warm); }
.cmanage-body { flex: 1; min-width: 0; }
.cmanage-status { margin-bottom: 14px; }

/* Manage-page bodies: grouped inline actions (buttons/forms that shouldn't stack full-width) */
.cmanage-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 4px 0 16px; }
.cmanage-actions form { margin: 0; }
.cmanage-actions .cauth-btn { width: auto; }

/* Manage-page bodies: warning/danger/info callouts (was Bootstrap .alert-*) */
.cmanage-alert { border-radius: var(--r-input); padding: 14px 16px; font-size: 13px; line-height: 1.55; margin-bottom: 16px; }
.cmanage-alert p { margin: 0 0 6px; }
.cmanage-alert p:last-child { margin-bottom: 0; }
.cmanage-alert a { color: inherit; font-weight: 700; }
.cmanage-alert--warning { background: var(--pending-soft); border: 1px solid var(--pending); color: var(--ink); }
.cmanage-alert--danger { background: var(--declined-soft); border: 1px solid var(--declined); color: var(--ink); }
.cmanage-alert--info { background: var(--lilac-soft); border: 1px solid var(--lilac); color: var(--deep-purple); }

/* Manage-page bodies: confirmed-email marker next to a disabled email field */
.cmanage-confirmed { display: inline-block; margin-top: 6px; font-size: 12px; font-weight: 700; color: var(--confirmed); }

/* ── Sync status cards ────────────────────────────────────────────────────── */
.csync-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-bottom: 18px; }
@media (max-width: 1240px) { .csync-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { .csync-grid { grid-template-columns: 1fr; } }
.csync-card .err-more { color: var(--faint); font-weight: 400; }
.csync-card { background: var(--white); border: 1px solid var(--border); border-radius: var(--r-card); padding: 16px 18px; box-shadow: var(--soft-shadow); }
.csync-card.is-disabled { opacity: .55; }
.csync-card h4 { margin: 0 0 6px; font-size: 15px; font-weight: 800; display: flex; align-items: center; justify-content: space-between; }
.csync-card .meta { font-size: 12px; color: var(--muted); line-height: 1.5; }
.csync-card .err { color: var(--declined); font-size: 12px; margin-top: 6px; }


/* ── Sync status strip (collapsed summary of the per-network cards) ───────── */
.csync-strip { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.csync-strip .chips { display: flex; gap: 8px; flex-wrap: wrap; }
.csync-chip { display: inline-flex; align-items: center; gap: 7px; background: var(--white); border: 1px solid var(--border); border-radius: var(--r-pill); padding: 6px 13px; font: 600 12.5px var(--font); color: var(--ink); }
.csync-chip i { width: 8px; height: 8px; border-radius: 50%; background: var(--faint); }
.csync-chip.is-ok i { background: var(--confirmed); }
.csync-chip.is-fail i { background: var(--declined); }
.csync-chip.is-fail { border-color: var(--declined-soft); background: var(--declined-soft); }
.csync-chip.is-running i { background: var(--pending); animation: csyncpulse 1.2s ease-in-out infinite; }
.csync-chip.is-off, .csync-chip.is-never { color: var(--muted); }

/* ═══════════════════════════════════════════════════════════════════════════
   ── Txn drill-down ──
   Pages/AffiliateReportingTxn.cshtml — the single-transaction context view
   (header, journey timeline, voucher/brand cards, related table, collapsed
   raw payload). Tokens only, no new hex. Kept in its own delimited section so
   it merges cleanly alongside concurrent appends from other feature work.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Header: brand/network/status in the page-header's .lead, big commission in its .aside */
.c-txn-who { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 8px 0 10px; }
.c-txn-money { text-align: right; position: relative; z-index: 1; }
.c-txn-money .amt { font-weight: 800; font-size: 36px; line-height: 1; color: var(--cream-warm); letter-spacing: -.01em; }
.c-txn-money .ccy { font-size: 14px; font-weight: 700; color: var(--lilac); margin-left: 6px; }
.c-txn-money .lab { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: rgba(247, 246, 226, .7); margin-top: 3px; }
.c-txn-net-badge { font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--green-dark); background: var(--light-green); border-radius: var(--r-pill); padding: 3px 11px; }
@media (max-width: 640px) { .c-txn-money { text-align: left; } }

/* Journey timeline: three (or four, with an Amended step) steps in a row, stacking under 760px */
.c-journey { display: flex; align-items: stretch; gap: 0; }
.c-journey-step { flex: 1 1 0; min-width: 0; background: var(--cream-warm); border: 1px solid var(--border); border-radius: 16px; padding: 14px 16px; position: relative; }
.c-journey-step + .c-journey-step { margin-left: 22px; }
.c-journey-step + .c-journey-step::before {
    content: '→'; position: absolute; left: -21px; top: 50%; transform: translateY(-50%);
    color: var(--faint); font-weight: 800; font-size: 15px;
}
.c-journey-step .lab { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--green-soft); font-weight: 800; margin-bottom: 6px; }
.c-journey-step .main { font-size: 14px; font-weight: 700; color: var(--ink); }
.c-journey-step .sub { font-size: 12.5px; color: var(--muted); margin-top: 3px; line-height: 1.4; }
.c-journey-step.is-empty { background: var(--hair); border-style: dashed; }
.c-journey-step.is-empty .lab, .c-journey-step.is-empty .main { color: var(--faint); }
.c-journey-step.is-declined .main { color: var(--declined); }
.c-journey-step.is-confirmed .main { color: var(--confirmed); }
.c-journey-step.is-amend .main { color: var(--purple); }
.c-journey-amend-diff { font-size: 12px; color: var(--muted); margin-top: 4px; }
.c-journey-amend-diff .old { text-decoration: line-through; color: var(--faint); }
@media (max-width: 760px) {
    .c-journey { flex-direction: column; gap: 14px; }
    .c-journey-step + .c-journey-step { margin-left: 0; }
    .c-journey-step + .c-journey-step::before { content: '↓'; left: 50%; top: -20px; transform: translateX(-50%); }
}

/* Voucher / brand context cards */
.c-ctx-card .c-ctx-headline b { color: var(--green-dark); }
.c-ctx-card .c-ctx-stats .item { font-size: 12.5px; color: var(--muted); }
.c-ctx-compare { margin-top: 10px; font-size: 13px; font-weight: 600; }
.c-ctx-compare.is-above { color: var(--confirmed); }
.c-ctx-compare.is-below { color: var(--pending); }

/* Related transactions table (compact) */
.c-related-empty { color: var(--muted); font-size: 13px; }
.c-related-reason { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--purple); background: var(--lilac-soft); border-radius: var(--r-pill); padding: 2px 8px; margin-right: 4px; display: inline-block; }

/* Raw payload, demoted to a closed-by-default <details> at the very bottom */
.c-raw-details summary { cursor: pointer; font-weight: 800; text-transform: uppercase; font-size: 13px; letter-spacing: .03em; color: var(--green); list-style: none; }
.c-raw-details summary::-webkit-details-marker { display: none; }
.c-raw-details summary::before { content: '▸ '; color: var(--purple); }
.c-raw-details[open] summary::before { content: '▾ '; }
.c-raw-details .c-h3 { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--green-soft); font-weight: 700; margin: 14px 0 8px; }
@keyframes csyncpulse { 50% { opacity: .35; } }

/* ── Breakdowns (brand leaderboard / network league / vouchers) ──────────── */
.c-breakdowns { margin-bottom: 22px; }
.c-bd-top { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; margin-bottom: 14px; }
.c-bd-concentration { font-size: 13px; color: var(--muted); flex: 1 1 320px; }
.c-bd-concentration .c-bd-slimbar { margin-top: 6px; height: 6px; border-radius: var(--r-pill); background: var(--hair); overflow: hidden; max-width: 260px; }
.c-bd-concentration .c-bd-slimbar span { display: block; height: 100%; background: var(--green-soft); }
.c-bd-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.c-bd-chip { display: inline-flex; align-items: center; background: var(--lilac-soft); color: var(--deep-purple); border-radius: var(--r-pill); padding: 6px 13px; font-size: 12px; font-weight: 600; }

.c-bd-panel { padding: 16px 18px; }
.c-bd-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; flex-wrap: wrap; gap: 8px; }
.c-bd-head .t { font-weight: 800; text-transform: uppercase; letter-spacing: .04em; font-size: 14px; color: var(--green); }

/* One card, three tabs (Brands / Networks / Vouchers) instead of three cards shown at once — each
   tab gets the card's full width, which is also what keeps every league column legible without
   the two-card squeeze the old side-by-side layout had. Same segmented-pill visual language as
   the leaderboard's own brand/programme toggle below. */
.c-bd-tabs { display: flex; gap: 3px; background: var(--hair); border-radius: var(--r-pill); padding: 3px; }
.c-bd-tab-btn { border: 0; background: transparent; font: 700 12px var(--font); color: var(--muted); padding: 7px 16px; border-radius: var(--r-pill); cursor: pointer; white-space: nowrap; }
.c-bd-tab-btn.is-active { background: var(--green); color: var(--cream-warm); }
.c-bd-subhead { display: flex; justify-content: flex-end; margin-bottom: 10px; }

/* Leaderboard grouping toggle: "By brand (all networks)" (merges a brand across networks) vs.
   "By network programme" (today's per-network rendering) — a segmented pill control. */
.c-bd-groupby { display: flex; gap: 3px; background: var(--hair); border-radius: var(--r-pill); padding: 3px; }
.c-bd-groupby-btn { border: 0; background: transparent; font: 600 11.5px var(--font); color: var(--muted); padding: 6px 13px; border-radius: var(--r-pill); cursor: pointer; white-space: nowrap; }
.c-bd-groupby-btn.is-active { background: var(--green); color: var(--cream-warm); }
/* Narrow phones: the two long group-by labels don't fit side by side — go full width, 50/50, wrap the text */
@media (max-width: 560px) {
    .c-bd-groupby { width: 100%; }
    .c-bd-groupby-btn { flex: 1 1 0; min-width: 0; white-space: normal; text-align: center; line-height: 1.15; }
}

/* Shared legend for the leaderboard's composition bar — colour is a hint, never the only signal;
   the actual Confirmed/Pending/Bonus £ values always live in their own table columns too. */
.c-bd-legend { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 12px; }
.c-bd-legend .item { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); }
.c-bd-legend .k { width: 9px; height: 9px; border-radius: 3px; flex-shrink: 0; }
.c-bd-legend .k.s-confirmed { background: var(--confirmed); }
.c-bd-legend .k.s-pending { background: var(--pending); }
.c-bd-legend .k.s-bonus { background: var(--lilac); }

/* Tables scroll horizontally inside their own card on narrow screens — never the page */
.c-bd-scroll { overflow-x: auto; }
.c-bd-scroll table.table { min-width: 560px; }
.c-bd-empty { color: var(--faint); font-size: 13px; padding: 20px 0; text-align: center; }
.c-bd-showall { display: inline-block; margin-top: 10px; font-size: 12.5px; font-weight: 700; color: var(--purple); text-decoration: none; }
.c-bd-showall:hover { text-decoration: underline; }

.c-bd-num { text-align: right; font-variant-numeric: tabular-nums; }

/* Leaderboard network column: one badge in programme view, several when brand view has merged a
   brand across networks (e.g. Awin + Webgains). */
.c-bd-netbadges { display: flex; flex-wrap: wrap; gap: 4px; }
.c-bd-netbadge { display: inline-block; background: var(--cream); color: var(--green-soft); font-size: 10.5px; font-weight: 700; letter-spacing: .02em; padding: 2px 9px; border-radius: var(--r-pill); white-space: nowrap; }

/* Leaderboard: share-of-currency inline bar. The track's full width is the row's slot; the "fill"
   inside it is sized to the brand's share of the currency total, then split into confirmed/pending/
   bonus segments by composition (bonus uses --lilac, deliberately not a status colour — it isn't a
   status). Segment widths are pre-rescaled in JS so they always sum to the fill's own 100%. */
.c-bd-share { display: flex; align-items: center; gap: 8px; min-width: 120px; }
.c-bd-share .track { flex: 1; height: 8px; border-radius: var(--r-pill); background: var(--hair); overflow: hidden; }
.c-bd-share .track .fill { display: flex; height: 100%; }
.c-bd-share .track .fill span { display: block; height: 100%; }
.c-bd-share .track .fill .s-confirmed { background: var(--confirmed); }
.c-bd-share .track .fill .s-pending { background: var(--pending); }
.c-bd-share .track .fill .s-bonus { background: var(--lilac); }
.c-bd-share .pct { font-size: 12px; font-weight: 700; color: var(--ink); white-space: nowrap; }

/* Network league: stacked confirmed/pending/declined bar + text rates (never colour alone) */
/* The longest network names ("Rakuten Advertising") were the single widest thing in the whole
   table, forcing every row's Network column to that width. Truncate with an ellipsis (full name
   still on hover via title) — same trade-off the table's own brand column already makes. */
.c-bd-netname { display: inline-block; max-width: 108px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; }
.c-bd-stack { display: flex; height: 12px; border-radius: var(--r-pill); overflow: hidden; background: var(--hair); min-width: 90px; }
.c-bd-stack span { display: block; height: 100%; }
.c-bd-stack .s-confirmed { background: var(--confirmed); }
.c-bd-stack .s-pending { background: var(--pending); }
.c-bd-stack .s-declined { background: var(--declined); }
/* The three money values below the bar are the widest thing in this column by far once written on
   one line (e.g. "85.18 GBP / 1,087.90 GBP / 10.76 GBP") — that single line was what forced the
   whole league table wider than the card had room for. Wrapping it onto 2–3 short lines keeps the
   card's natural width close to what the rest of the row actually needs. */
.c-bd-splittext { font-size: 11px; color: var(--muted); margin-top: 4px; white-space: normal; max-width: 170px; line-height: 1.4; }
.c-bd-rate { font-size: 12px; color: var(--muted); white-space: nowrap; }
.c-bd-rate--flag { background: var(--declined-soft); border-radius: 8px; padding: 3px 8px; color: var(--declined); font-weight: 700; }

/* Voucher code */
.c-bd-code { font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace; font-size: 12.5px; background: var(--cream); border-radius: 6px; padding: 2px 7px; }

/* ── Reporting view switcher (Overview | Transactions) ────────────────────── */
.c-viewswitch { display: inline-flex; gap: 4px; background: var(--white); border: 1px solid var(--border); border-radius: var(--r-pill); padding: 4px; margin-bottom: 16px; }
.c-viewswitch-btn { border: 0; background: transparent; border-radius: var(--r-pill); padding: 9px 22px; font: 700 13.5px var(--font); color: var(--muted); cursor: pointer; }
.c-viewswitch-btn.is-active { background: var(--green); color: var(--cream-warm); }
.c-viewswitch-btn:not(.is-active):hover { background: var(--hair); color: var(--ink); }

/* Transactions view head: title + export beside the (promoted) DataTables search */
.c-txn-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.c-txn-head .t { font-weight: 800; font-size: 15px; text-transform: uppercase; letter-spacing: .04em; color: var(--green-dark); }
#viewTransactions .dataTables_filter input { min-width: 300px; padding: 9px 13px; border: 1.5px solid var(--border); border-radius: var(--r-input); font: 500 14px var(--font); }
#viewTransactions .dataTables_filter input:focus { border-color: var(--green-soft); outline: none; }
/* Phones: the 300px search box overflows a narrow screen — let it shrink to fit */
@media (max-width: 600px) {
    #viewTransactions .dataTables_filter { float: none; text-align: left; }
    #viewTransactions .dataTables_filter input { min-width: 0; max-width: 100%; box-sizing: border-box; }
}

/* ── Breakdown table column sorting ───────────────────────────────────────── */
.c-bd-sortable { cursor: pointer; user-select: none; white-space: nowrap; }
.c-bd-sortable::after { content: '↕'; margin-left: 5px; color: var(--faint); font-size: 10px; }
.c-bd-sortable.is-sorted-asc::after { content: '▲'; color: var(--green-soft); }
.c-bd-sortable.is-sorted-desc::after { content: '▼'; color: var(--green-soft); }
.c-bd-sortable:hover { color: var(--green-dark); }

/* ── Breakdown search box ─────────────────────────────────────────────────── */
.c-bd-search { flex: 0 1 260px; margin-left: auto; padding: 8px 13px; border: 1.5px solid var(--border); border-radius: var(--r-input); font: 500 13px var(--font); background: var(--white); color: var(--ink); }
.c-bd-search:focus { border-color: var(--green-soft); outline: none; }
@media (max-width: 760px) { .c-bd-search { flex-basis: 100%; order: 3; margin-left: 0; } }

/* ── Brand summary page ───────────────────────────────────────────────────── */
.c-brand-totals { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; margin-bottom: 16px; }
.c-brand-card { padding: 16px 20px; }
.c-brand-card .ccy { margin-bottom: 10px; }
.c-brand-card .r { display: flex; justify-content: space-between; padding: 4px 0; font-size: 13.5px; border-bottom: 1px solid var(--hair); }
.c-brand-card .r:last-child { border-bottom: 0; }
.c-brand-card .k { color: var(--muted); }
.c-brand-card .v { font-weight: 700; font-variant-numeric: tabular-nums; }
.c-brand-vouchers { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; font-size: 13px; }
.c-brand-vouchers .lab { color: var(--muted); font-weight: 600; }
#bdLeaderboardTable tbody tr.row-click { cursor: pointer; }
#bdLeaderboardTable tbody tr.row-click:hover td { background: var(--cream-warm); }

/* ── Sync activity spinners ───────────────────────────────────────────────── */
.csync-chip i.spin { width: 10px; height: 10px; border-radius: 50%; background: transparent; border: 2px solid var(--pending); border-top-color: transparent; animation: csyncspin .8s linear infinite; }
.csync-spinner { display: inline-block; width: 10px; height: 10px; border-radius: 50%; border: 2px solid currentColor; border-top-color: transparent; animation: csyncspin .8s linear infinite; vertical-align: -1px; margin-right: 3px; }
@keyframes csyncspin { to { transform: rotate(360deg); } }

/* ── Products admin (catalogue curation) ──────────────────────────────────── */
.c-statgrid.cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 880px) { .c-statgrid.cols-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.c-prodthumb { width: 52px; height: 52px; object-fit: contain; border-radius: 12px; background: var(--white); border: 1px solid var(--hair); display: inline-block; }
.c-prodthumb.is-broken { visibility: hidden; }
.c-prodthumb--empty { background: var(--cream); }
.c-prodtitle a { color: var(--ink); font-weight: 600; text-decoration: none; }
.c-prodtitle a:hover { color: var(--green-soft); text-decoration: underline; }
.c-prodcat { font-size: 11px; color: var(--faint); margin-top: 2px; }
.c-price-sale { font-weight: 700; color: var(--declined); }
.c-price-was { color: var(--faint); text-decoration: line-through; font-size: 12px; }
/* Featured star: quiet outline until on, then brand lilac — the one bold accent on the row */
.c-star { border: 1.5px solid var(--border); background: var(--white); color: var(--faint); width: 34px; height: 34px; border-radius: 50%; font-size: 16px; line-height: 1; cursor: pointer; transition: color .12s, border-color .12s, background .12s; vertical-align: middle; }
.c-star:hover { border-color: var(--purple); color: var(--purple); }
.c-star.is-on { background: var(--lilac); border-color: var(--lilac); color: var(--deep-purple); }
.c-star-order { width: 64px; height: 34px; margin-left: 6px; padding: 4px 8px; font-size: 12.5px; vertical-align: middle; }

/* ── Products admin: row-click product/variants modal ─────────────────────── */
.c-modal--wide { max-width: 640px; }
.c-prodmodal-id { display: flex; gap: 14px; align-items: center; min-width: 0; }
.c-prodthumb--lg { width: 72px; height: 72px; flex-shrink: 0; }
#productsTable tbody tr { cursor: pointer; }
.c-kv-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 18px; margin: 4px 0 12px; }
.c-pm-link { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.c-pm-link .lab { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--green-soft); font-weight: 700; flex-shrink: 0; }
.c-pm-link code { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11.5px; background: var(--cream); border-radius: 8px; padding: 6px 10px; color: var(--ink); }
.c-pm-actions { display: flex; align-items: center; gap: 10px; padding: 10px 0 14px; border-top: 1px solid var(--hair); }
.c-pm-actlab { font-size: 12.5px; color: var(--muted); font-weight: 600; }

/* Confirmation modal — reusable for destructive/high-stakes admin actions. */
.c-modal-overlay { position: fixed; inset: 0; background: rgba(43, 26, 64, .45); display: grid; place-items: center; z-index: 1000; }
.c-modal { background: #fff; border: 1px solid var(--lilac); border-radius: 20px; padding: 26px 28px; max-width: 440px; width: calc(100% - 40px); box-shadow: var(--hard-lilac); }
.c-modal h3 { margin: 0 0 10px; }
.c-modal p { font-size: 13.5px; color: var(--deep-purple); line-height: 1.5; margin: 0 0 20px; }

/* ── Modal dialogs: scroll the dialog, never the page behind it ───────────── */
/* A <dialog> taller than the viewport gets its own scrollbar… */
dialog[open] { max-height: calc(100dvh - 48px); overflow-y: auto; }
/* …and the page behind is frozen while any modal is open. */
body:has(dialog[open]) { overflow: hidden; }

/* Small mode-toggle chips (e.g. the blog editor's Visual/HTML tabs). */
.c-chip {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  padding: 5px 14px;
  font: 600 12.5px var(--font);
  color: var(--ink);
  cursor: pointer;
}
.c-chip-on {
  background: var(--green, #214e37);
  border-color: var(--green, #214e37);
  color: #fff;
}