/* Dashboards app — app-specific styles */

/* ── Full-width layout (sidebar used for all users) ─────────────── */
.app-main        { max-width: 100%; padding: 0; }
.header-inner    { max-width: 1400px; }
.admin-content   { max-width: none; flex: 1; min-width: 0; }
.admin-sidebar   { flex-shrink: 0; }

/* ── Collapsible department sections ────────────────────────────── */
.dept-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: .7rem 1rem;
    background: none;
    border: none;
    border-left: 3px solid transparent;
    color: rgba(255,255,255,.8);
    font-size: .875rem;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    transition: background .15s, color .15s;
    text-transform: uppercase;
    letter-spacing: .06em;
}
.dept-toggle:hover {
    background: rgba(255,255,255,.08);
    color: #fff;
}
.dept-toggle.open {
    color: #fff;
    background: rgba(255,255,255,.06);
}
.dept-chevron {
    font-size: .65rem;
    transition: transform .2s;
    flex-shrink: 0;
    margin-left: .5rem;
    opacity: .7;
}
.dept-toggle.open .dept-chevron {
    transform: rotate(180deg);
}

.dept-links {
    list-style: none;
    max-height: 0;
    overflow: hidden;
    transition: max-height .25s ease;
}
.dept-links.open {
    max-height: 1200px;
}
.dept-links li a {
    display: block;
    padding: .55rem 1rem .55rem 1.75rem;
    color: rgba(255,255,255,.75);
    font-size: .875rem;
    text-decoration: none;
    border-left: 3px solid transparent;
    transition: background .15s, color .15s;
}
.dept-links li a:hover,
.dept-links li a.active {
    background: rgba(255,255,255,.1);
    color: #fff;
    border-left-color: var(--accent);
    text-decoration: none;
}
.dept-links .sidebar-empty {
    padding: .5rem 1rem .5rem 1.75rem;
    color: rgba(255,255,255,.35);
    font-size: .8rem;
    font-style: italic;
}

/* ── Nested sidebar groups ───────────────────────────────────────── */
.dept-links li.nav-group { list-style: none; }

/* Group parent — either a link or a plain label */
.dept-links .nav-group-parent {
    display: block;
    padding: .55rem 1rem .55rem 1.75rem;
    color: rgba(255,255,255,.9);
    font-size: .82rem;
    font-weight: 600;
    text-decoration: none;
    letter-spacing: .02em;
    border-left: 3px solid transparent;
    transition: background .15s, color .15s;
}
.dept-links .nav-group-parent:hover,
.dept-links .nav-group-parent.active {
    background: rgba(255,255,255,.1);
    color: #fff;
    border-left-color: var(--accent);
    text-decoration: none;
}
.dept-links .nav-group-label {
    color: rgba(255,255,255,.55);
    cursor: default;
}
.dept-links .nav-group-label:hover {
    background: none;
    border-left-color: transparent;
}

/* Child links — indented under their group parent */
.nav-group-children {
    list-style: none;
    margin: 0;
    padding: 0;
}
.nav-group-children li a {
    display: block;
    padding: .45rem 1rem .45rem 2.5rem;
    color: rgba(255,255,255,.65);
    font-size: .82rem;
    text-decoration: none;
    border-left: 3px solid transparent;
    transition: background .15s, color .15s;
}
.nav-group-children li a:hover,
.nav-group-children li a.active {
    background: rgba(255,255,255,.08);
    color: #fff;
    border-left-color: var(--accent);
    text-decoration: none;
}

/* ── Permissions table — group header ────────────────────────────── */
.perm-group-header {
    text-align: center;
    background: var(--bg-muted, #f0f2f5);
    border-bottom: 1px solid var(--border);
    font-size: .82rem;
    font-weight: 600;
    letter-spacing: .02em;
}

/* ── Staff access page ───────────────────────────────────────────── */
.sa-table { max-width: 480px; }
.sa-role-badge {
    display: inline-block;
    margin-left: .4rem;
    padding: .1rem .45rem;
    border-radius: 3px;
    background: var(--accent);
    color: #fff;
    font-size: .72rem;
    font-weight: 600;
    vertical-align: middle;
    letter-spacing: .03em;
    text-transform: uppercase;
}

/* ── Sidebar admin section label ────────────────────────────────── */
.sidebar-admin-label {
    color: rgba(255,255,255,.4);
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .09em;
    padding: 1rem 1rem .4rem;
}

/* ── Hamburger (mobile sidebar toggle) ──────────────────────────── */
.hamburger {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 38px; height: 38px;
    background: none; border: none; cursor: pointer;
    padding: 6px;
    border-radius: 50%;
    transition: background .15s;
}
.hamburger:hover { background: rgba(255,255,255,.15); }
.hamburger span {
    display: block; height: 2px; background: #fff; border-radius: 2px;
}

/* ── Sidebar overlay (mobile) ───────────────────────────────────── */
.sidebar-overlay {
    position: fixed; inset: 0; background: rgba(0,0,0,.5);
    z-index: 99; cursor: pointer;
}

/* ── Mobile ─────────────────────────────────────────────────────── */
@media (max-width: 640px) {
    .hamburger { display: flex; }

    .admin-sidebar {
        display: block;
        position: fixed;
        top: var(--header-h); left: 0; bottom: 0;
        z-index: 100;
        transform: translateX(-100%);
        transition: transform .25s ease;
        overflow-y: auto;
        width: 240px;
    }
    .admin-sidebar.sidebar-open {
        transform: translateX(0);
    }
    .admin-content { padding: .75rem; }
}

@media (min-width: 641px) {
    .hamburger       { display: none; }
    .sidebar-overlay { display: none !important; }
    .admin-sidebar   { transform: none !important; position: static; }
}

/* ── Dashboard home — department cards ──────────────────────────── */
.dept-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1rem;
    margin-top: 1rem;
}
.dept-card {
    background: var(--card-bg);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 1.25rem 1rem;
    border-left: 5px solid var(--brand);
    text-decoration: none;
    color: var(--text);
    transition: box-shadow .15s, transform .1s;
    display: block;
}
.dept-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
    text-decoration: none;
}
.dept-card__name {
    font-weight: 700;
    font-size: 1rem;
    margin-bottom: .25rem;
}
.dept-card__count {
    font-size: .82rem;
    color: var(--text-muted);
}

/* ── Admin pages ────────────────────────────────────────────────── */
.content-header { margin-bottom: 1.25rem; }
.content-header h1 { margin: 0 0 .25rem; font-size: 1.4rem; }
.content-header p  { margin: 0; color: var(--text-muted); font-size: .9rem; }

.perm-table th, .perm-table td { vertical-align: middle; }
.perm-table .col-name { min-width: 160px; }

.cb-cell { text-align: center; }
.cb-cell input[type="checkbox"] {
    width: 18px; height: 18px; cursor: pointer;
    accent-color: var(--brand);
}

.dept-tabs {
    display: flex;
    gap: .35rem;
    flex-wrap: wrap;
    margin-bottom: 1.25rem;
}
.dept-tab {
    padding: .45rem 1rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: var(--card-bg);
    color: var(--text);
    font-size: .875rem;
    font-weight: 600;
    text-decoration: none;
    transition: background .15s, border-color .15s;
}
.dept-tab:hover { background: var(--brand-light); border-color: var(--brand); text-decoration: none; }
.dept-tab.active { background: var(--brand); color: #fff; border-color: var(--brand); }

.save-status {
    font-size: .8rem;
    margin-left: .5rem;
    opacity: 0;
    transition: opacity .3s;
}
.save-status.show { opacity: 1; }
.save-status.ok   { color: var(--success); }
.save-status.err  { color: var(--danger); }

.col-row-actions { width: 1%; white-space: nowrap; padding-left: .75rem; }
.btn-row-all {
    padding: .2rem .55rem;
    font-size: .75rem;
    font-weight: 600;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: none;
    cursor: pointer;
    color: var(--text-muted);
    transition: background .15s, color .15s, border-color .15s;
    margin-right: .2rem;
}
.btn-row-all:hover { background: var(--brand); color: #fff; border-color: var(--brand); }
.btn-row-all:disabled { opacity: .45; cursor: not-allowed; }

.no-dashboards-msg {
    background: var(--card-bg);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 2rem;
    text-align: center;
    color: var(--text-muted);
}

/* ══════════════════════════════════════════════════════════════════
   Business dashboard — toolbar, controls, live section, charts
   ══════════════════════════════════════════════════════════════════ */

/* ── Toolbar ──────────────────────────────────────────────────────── */
.dash-toolbar {
    display: flex;
    align-items: center;
    gap: .75rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}
.dash-title {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text);
    margin: 0;
    flex: 0 0 auto;
}
.dash-controls {
    display: flex;
    align-items: center;
    gap: .4rem;
    flex-wrap: nowrap;
}
.dash-controls.hidden { display: none; }
.dash-ctrl-label {
    font-size: .8rem;
    font-weight: 600;
    color: var(--text-muted);
    white-space: nowrap;
}
.form-control--sm {
    padding: .25rem .5rem;
    font-size: .875rem;
    height: auto;
    min-width: 0;
}
select.form-control--sm { min-width: 90px; }
input[type=date].form-control--sm { width: auto; }

.dash-mode-switch {
    display: flex;
    gap: 0;
    margin-left: auto;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    overflow: hidden;
}
.dash-mode-btn {
    padding: .3rem .8rem;
    font-size: .8rem;
    font-weight: 600;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-muted);
    transition: background .15s, color .15s;
    white-space: nowrap;
}
.dash-mode-btn:hover { background: var(--brand-light); color: var(--brand); }
.dash-mode-btn.active { background: var(--brand); color: #fff; }

/* ── Filter components (filt-*) ─────────────────────────────────────────────── */

/* Generic flex row that wraps — use instead of dash-controls when content may wrap */
.filt-bar {
    display: flex;
    align-items: center;
    gap: .4rem;
    flex-wrap: wrap;
}
.filt-bar.hidden { display: none; }

/* Year picker row: ← [select/label] → */
.filt-year-picker {
    display: flex;
    align-items: center;
    gap: .25rem;
}

/* Year label used in JS-driven pickers */
.filt-year-label {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text);
    min-width: 3.2ch;
    text-align: center;
    padding: 0 .3rem;
}

/* Disabled navigation arrow */
.filt-arrow--disabled {
    opacity: .35;
    cursor: default;
    pointer-events: none;
}

/* ── Year picker: three-button trio (prev · current · next) ─────────────────── */
.filt-year-trio { display: inline-flex; align-items: stretch; gap: .5rem; }
.filt-yr {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 4.4rem; padding: .28rem .9rem;
    font-family: inherit; font-size: 1.05rem; font-weight: 600; line-height: 1.15;
    color: #fff; text-decoration: none; white-space: nowrap;
    background: #17a2c6;
    border: 2.5px solid #16283a; border-radius: 12px;
    cursor: pointer; transition: filter .12s ease, transform .08s ease;
}
.filt-yr--adj:hover { filter: brightness(1.08); }
.filt-yr--adj:active { transform: translateY(1px); }
.filt-yr--cur {
    background: #9b2585;
    font-weight: 800; font-size: 1.15rem; cursor: default;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .18);
}
.filt-yr--off,
.filt-yr:disabled {
    background: #cbd3da; color: #eef1f4; border-color: #9aa6b1;
    cursor: default; pointer-events: none; box-shadow: none;
}

/* 12-month button row */
.filt-months {
    display: flex;
    gap: .2rem;
    flex-wrap: wrap;
    align-items: center;
}

.filt-month-btn {
    padding: .22rem .45rem;
    font-size: .78rem;
    font-weight: 600;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm, 4px);
    background: var(--card-bg, #fff);
    color: var(--text-muted);
    cursor: pointer;
    white-space: nowrap;
    transition: background .12s, color .12s, border-color .12s;
    line-height: 1.5;
}
.filt-month-btn:hover:not(:disabled) {
    background: var(--brand-light, #e8f1f8);
    color: var(--brand);
    border-color: var(--brand-light);
}
.filt-month-btn.active {
    background: var(--brand);
    color: #fff;
    border-color: var(--brand);
}
.filt-month-btn:disabled {
    opacity: .35;
    cursor: default;
}

/* Small text labels (From, To, Date) inside filter bars */
.filt-label {
    font-size: .8rem;
    font-weight: 600;
    color: var(--text-muted);
    white-space: nowrap;
}

/* Supplementary info text shown beside a picker (e.g. "1 Apr 2026 – 12 Jun 2026") */
.filt-date-info {
    font-size: .82rem;
    color: var(--text-muted);
    white-space: nowrap;
    align-self: center;
    margin-left: .15rem;
}

/* ── Live income section ─────────────────────────────────────────── */
.dash-live-section {
    background: var(--card-bg);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: .9rem 1.25rem 1.1rem;
    margin-bottom: 1rem;
}
.dash-section-label {
    font-size: .75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--text-muted);
    margin-bottom: .7rem;
}
.dash-today-cards {
    display: flex;
    gap: 1.25rem;
    flex-wrap: wrap;
    align-items: flex-start;
}
.dash-today-card {
    display: flex;
    flex-direction: column;
    min-width: 100px;
}
.dash-today-val {
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--chart-income);
    line-height: 1.1;
}
.dash-today-lbl {
    font-size: .73rem;
    color: var(--text-muted);
    margin-top: .15rem;
}
.dash-today-card--inv .dash-today-val { color: #666; }

/* ── Card toolbar (title + legend row) ────────────────────────────── */
.card-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: .75rem;
}
.card-toolbar h2 {
    font-size: 1rem;
    font-weight: 700;
    margin: 0;
    color: var(--text);
}

/* ── Loading state ────────────────────────────────────────────────── */
.dash-loading { opacity: .4; pointer-events: none; transition: opacity .2s; }

/* ── Income data palette ──────────────────────────────────────────────
   Brighter than the brand chrome so figures and charts pop on dull
   monitors. The brand navy/teal stays for header/buttons/alerts via the
   global tokens — these are scoped to the income data viz only. */
:root {
    /* Old-MendipSys style: pale pastel fill + bolder same-hue border */
    --chart-actual-fill:   #cdeaf8;  --chart-actual-border: #2e86b0;  /* this year — teal */
    --chart-actual-wknd:   #ddf1fb;  /* weekend daily bars (lighter fill, same border) */
    --chart-target-fill:   #e9e9e9;  --chart-target-border: #bfbfbf;  /* target — grey */
    --chart-last-fill:     #ecd9f6;  --chart-last-border:   #9a5cc4;  /* last year — purple */
    --chart-income:        #1e88ac;  /* income figures — brighter teal */
    --chart-cum:           #5a9e1a;  /* this-year cumulative line — green */
    --chart-pos:           #4f8a16;  /* positive deltas shine */
    --chart-pos-light:     #9ccc65;  /* over-target overshoot on dials */
    --chart-neg:           #d8385f;  /* negative / behind — crimson */
    --chart-rose:          #e0608c;  /* target line + rose accents */
    /* VOUCHERS (George, 2026-08-28). Money taken today for an activity someone
       does later, so it is not this month's trading however the bar looks.
       Amber against the teal: same pastel-fill/bolder-border grammar as the
       rest, and distinguishable from it without relying on hue alone, since
       the fills differ in lightness too. */
    --chart-voucher-fill:  #fbe3a8;  --chart-voucher-border: #c8890a;
    --chart-voucher-wknd:  #fdf0cf;  /* weekend daily bars, lighter fill */
}

/* ── YTD stats panel ─────────────────────────────────────────────── */
.inc-ytd { padding: 1.25rem 1.5rem; margin-bottom: 1rem; }
.inc-stats {
    display: flex;
    gap: 2rem;
    flex-wrap: wrap;
    margin-bottom: 1.25rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border);
}
.inc-stat { display: flex; flex-direction: column; min-width: 110px; }
.inc-stat__value { font-size: 1.45rem; font-weight: 800; color: var(--text); line-height: 1.1; }
.inc-stat--big .inc-stat__value { font-size: 2.3rem; color: var(--chart-income); }
.inc-stat__label {
    font-size: .72rem;
    color: var(--text-muted);
    margin-top: .2rem;
    line-height: 1.2;
}
.inc-good .inc-stat__value { color: var(--chart-pos); }
.inc-bad  .inc-stat__value { color: var(--chart-neg); }

.inc-bars { display: flex; flex-direction: column; gap: .45rem; }
.inc-bar-row { display: flex; align-items: center; gap: .75rem; max-width: 1000px; }
.inc-bar-label { flex: 0 0 170px; font-size: .8rem; color: var(--text-muted); text-align: right; }
.inc-bar-track {
    flex: 1;
    height: 10px;
    background: var(--border);
    border-radius: var(--radius-sm);
    overflow: hidden;
}
.inc-bar-fill { height: 100%; border-radius: var(--radius-sm); transition: width .4s; box-sizing: border-box; }
.inc-fill-actual { background: var(--chart-actual-fill); border: 1.5px solid var(--chart-actual-border); }
.inc-fill-target { background: var(--chart-target-fill); border: 1.5px solid var(--chart-target-border); }
.inc-fill-last   { background: var(--chart-last-fill);   border: 1.5px solid var(--chart-last-border); }
.inc-bar-value { flex: 0 0 110px; font-size: .85rem; font-weight: 700; }

/* ── SVG chart container ─────────────────────────────────────────── */
/* Cap a single chart so it doesn't sprawl on high-res monitors */
.inc-chart { width: 100%; max-width: 1080px; }

/* ══════════════════════════════════════════════════════════════════════════
   Responsive dashboard grid — the agreed sizing scheme.
   Column count by breakpoint:  phone 1 · tablet 1 · 1080p 2 · 4K 3.
   Container caps:  1080p ~1400px · 4K ~2200px (centred).
   Panels are "tiles" (one column) by default; add .span-full to a panel to make
   it span every column (Income/Costs/Profit rows, payments lists, etc.).
   ══════════════════════════════════════════════════════════════════════════ */
.dash-cols {
    display: grid;
    grid-template-columns: 1fr;         /* phone + tablet: single column */
    gap: 1rem;
    width: 100%;
    margin: 1rem auto;
}
.dash-cols > *          { min-width: 0; }        /* shrink, don't overflow */
.dash-cols > .span-full { grid-column: 1 / -1; }
.dash-cols > .card      { margin-bottom: 0; }
.dash-cols .inc-chart   { max-width: none; }     /* charts fill their cell */

/* Size to the data: some panels don't need the full width. A .dash-narrow panel
   sits on its own row but is capped to about one column's width (for lists of
   records like the payments list — a row needs ~one column, not three). */
.dash-cols > .dash-narrow { grid-column: 1 / -1; max-width: 720px; }
@media (min-width: 1920px) {                     /* 3-col: float the narrow panel right */
    .dash-cols { align-items: start; }
    .dash-cols > .dash-narrow { grid-column: 3 / 4; max-width: none; }
}
@media (min-width: 1024px) {                     /* 1080p desktops: 2 columns */
    .dash-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 1400px; }
}
@media (min-width: 1920px) {                     /* 4K: 3 columns */
    .dash-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 2200px; }
}

/* Dashboard chart layout: narrow + centred on small screens,
   daily chart floats right of monthly at >=1080px viewports. */
.dash-grid {
    max-width: 920px;
    margin: 1rem auto;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.dash-grid > .card { margin-bottom: 0; }
@media (min-width: 1280px) {
    .dash-grid {
        max-width: 1900px;
        flex-direction: row;
        align-items: flex-start;
    }
    .dash-grid > .card    { flex: 1 1 0; min-width: 0; }
    .dash-grid .inc-chart { max-width: none; }   /* fill the grid cell */
}

/* Cashflow home: two whole-company charts — always stacked, full stage width
   (aligned with the panels above), shorter banner proportions (viewBox height
   set in cashflow-home-charts.js). */
.dash-grid.cfx-home-charts {
    max-width: none;
    margin: 1.25rem 0 0;
    flex-direction: column;
}
.dash-grid.cfx-home-charts > .card    { flex: 0 0 auto; width: 100%; box-sizing: border-box; }
.dash-grid.cfx-home-charts .inc-chart { max-width: none; width: 100%; }
/* Legible in-SVG text (viewBox is smaller here than on the drill dashboards) */
.dash-grid.cfx-home-charts .inc-axis     { font-size: 14px; }
.dash-grid.cfx-home-charts .inc-end-lbl  { font-size: 15px; }
.dash-grid.cfx-home-charts .inc-mbtn-lbl { font-size: 14px; }
/* ── Payments list (per-payment panels for the selected month) ─────────────── */
.pay-list { display: flex; flex-direction: column; gap: .45rem; }
.pay-panel {
    display: flex; gap: .75rem; align-items: flex-start; flex-wrap: wrap;
    padding: .6rem .85rem;
    background: #fafbfc; border: 1px solid var(--border); border-radius: 10px;
}
.pay-main { flex: 1 1 16rem; min-width: 0; }
.pay-name { font-weight: 600; color: var(--text); }
.pay-org  { font-size: .82rem; color: var(--text-muted); margin-top: .1rem; }
.pay-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin-top: .35rem; }
.pay-ref {
    font-size: .8rem; font-weight: 600; text-decoration: none;
    color: var(--chart-actual-border);
    background: #eaf4fa; border-radius: 6px; padding: .1rem .4rem;
}
.pay-ref:hover { text-decoration: underline; }
.pay-ref--none { color: var(--text-muted); background: #eee; font-weight: 400; }
.pay-ref-ext { font-style: normal; }
.pay-method {
    font-size: .72rem; text-transform: uppercase; letter-spacing: .03em;
    color: var(--text-muted); background: #eef0f2; border-radius: 6px; padding: .12rem .45rem;
}
.pay-mult {
    font-size: .72rem; font-weight: 700;
    color: var(--chart-actual-border); background: #eaf4fa; border-radius: 6px; padding: .12rem .45rem;
}
.inv-overdue {
    font-size: .72rem; font-weight: 700;
    color: var(--chart-neg, #d8385f); background: #fdeaef; border-radius: 6px; padding: .12rem .45rem;
}
.pay-side { margin-left: auto; text-align: right; flex: 0 0 auto; }
.pay-amount { font-weight: 700; font-size: 1rem; color: var(--text); }
.pay-date   { font-size: .78rem; color: var(--text-muted); margin-top: .1rem; }
@media (max-width: 40rem) {
    .pay-side { margin-left: 0; width: 100%; text-align: left;
                display: flex; justify-content: space-between; align-items: baseline; }
}

/* ── Expandable group panel (suppliers / bookings with >1 item) ──────────── */
.pay-toggle {
    flex: 1 1 16rem; min-width: 0; display: flex; align-items: flex-start; gap: .5rem;
    background: none; border: 0; padding: 0; margin: 0; text-align: left; cursor: pointer;
    font: inherit; color: inherit;
}
.pay-caret {
    flex: 0 0 auto; margin-top: .1rem; color: var(--text-muted);
    transition: transform .2s ease; font-size: .9rem; line-height: 1.2;
}
.pay-open .pay-caret { transform: rotate(90deg); color: var(--chart-actual-border); }
.pay-gtext { min-width: 0; }
.pay-toggle:hover .pay-name { color: var(--chart-actual-border); }

/* the members swirl down: animate grid row 0fr → 1fr (no fixed height needed) */
.pay-children {
    flex: 1 1 100%; display: grid; grid-template-rows: 0fr;
    transition: grid-template-rows .28s ease;
}
.pay-open .pay-children { grid-template-rows: 1fr; }
.pay-children-inner { overflow: hidden; min-height: 0; }
.pay-open .pay-children-inner { margin-top: .55rem; }
.pay-child {
    display: flex; align-items: baseline; gap: .5rem;
    padding: .35rem .15rem .35rem 1.6rem;
    border-top: 1px solid var(--border);
    font-size: .84rem;
}
.pay-child-desc { flex: 1 1 auto; min-width: 0; color: var(--text);
                  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pay-child-ref  { flex: 0 0 auto; }
.pay-child-date { flex: 0 0 auto; color: var(--text-muted); font-size: .78rem; }
.pay-child-amt  { flex: 0 0 auto; margin-left: .35rem; font-weight: 600; min-width: 4.5rem; text-align: right; }
@media (max-width: 40rem) {
    .pay-child { flex-wrap: wrap; }
    .pay-child-amt { margin-left: auto; }
}

.inc-svg { width: 100%; height: auto; display: block; }
.inc-grid { stroke: #eee; stroke-width: 1; }
.inc-axis { font-size: 24px; fill: var(--text-muted); }
.inc-axis--right { text-anchor: start; }

/* Chart bars */
.inc-b-actual  { fill: var(--chart-actual-fill); stroke: var(--chart-actual-border); stroke-width: 2; }
.inc-b-weekend { fill: var(--chart-actual-wknd); stroke: var(--chart-actual-border); stroke-width: 2; }
.inc-b-sel     { fill: var(--chart-actual-border); }   /* selected month: deeper blue */
/* Potential income (unpaid invoices) — opaque, dotted extension on top of a bar */
.inc-b-potential { fill: rgba(46,134,176,.16); stroke: var(--chart-actual-border); stroke-width: 1.3; stroke-dasharray: 3 2.5; }
/* VOUCHERS — the amber slice at the foot of an income bar (George, 2026-08-28).
   Money taken now for an activity someone does later, so it is not this
   month's trading however tall the bar looks. Drawn INSIDE the bar, so it
   shares the bar's own outline and carries only a top edge of its own to mark
   where the blue takes over. */
.inc-b-voucher { fill: var(--chart-voucher-fill); stroke: var(--chart-voucher-border); stroke-width: 2; }
.inc-b-voucher-weekend { fill: var(--chart-voucher-wknd); }

/* Floating red dot on each monthly bar = that month's target */
.inc-target-dot { fill: var(--chart-rose); stroke: #fff; stroke-width: 1.5; }

/* End-of-line labels at the last data point of each cumulative line */
.inc-end-lbl    { font-size: 26px; font-weight: 700; }
.inc-end-cum    { fill: var(--chart-cum); }
.inc-end-target { fill: var(--chart-rose); }
.inc-end-last   { fill: var(--chart-last-border); }
.inc-end-potential { fill: var(--chart-cum); opacity: .75; }

/* Each month is a clickable "button": hover tints the column, label gets a
   chip-style background, selected month stays highlighted. */
.inc-mbtn        { cursor: pointer; }
.inc-mbtn-hit    { fill: transparent; transition: fill .12s ease; }
.inc-mbtn:hover .inc-mbtn-hit   { fill: rgba(0,0,0,.04); }
.inc-mbtn-sel  .inc-mbtn-hit    { fill: rgba(46,134,176,.10); }   /* matches --chart-actual-border */
.inc-mbtn-lbl    { font-size: 24px; font-weight: 600; fill: var(--text-muted); transition: fill .12s ease; }
.inc-mbtn:hover .inc-mbtn-lbl   { fill: var(--brand); }
.inc-mbtn-sel  .inc-mbtn-lbl    { fill: var(--chart-actual-border); }

/* Each day in the daily chart is clickable — drills the payments to that day. */
.inc-dbtn      { cursor: pointer; }
.inc-dbtn-hit  { fill: transparent; transition: fill .12s ease; }
.inc-dbtn:hover .inc-dbtn-hit { fill: rgba(0,0,0,.04); }
.inc-dbtn-sel  .inc-dbtn-hit  { fill: rgba(46,134,176,.12); }
.inc-b-target  { fill: var(--chart-target-fill); stroke: var(--chart-target-border); stroke-width: 2; }
.inc-b-last    { fill: var(--chart-last-fill);   stroke: var(--chart-last-border);   stroke-width: 2; }
.inc-mgroup--sel .inc-sel-bg { fill: rgba(0,0,0,.05); }

/* Chart lines */
.inc-l-cum    { fill: none; stroke: var(--chart-cum); stroke-width: 2.5; }
.inc-l-last   { fill: none; stroke: var(--chart-last-border); stroke-width: 2; opacity: .9; }
.inc-l-target { fill: none; stroke: var(--chart-rose); stroke-width: 2; stroke-dasharray: 6 4; }
/* Dotted green extension = cumulative income + potential (unpaid invoices) */
.inc-l-potential { fill: none; stroke: var(--chart-cum); stroke-width: 2.4; stroke-dasharray: 5 4; opacity: .8; }
.inc-dot { fill: var(--chart-cum); }

/* Product expander: the purchases behind one activity, opened in place under
   its What's-selling row. The table scrolls sideways rather than squashing the
   money columns — the card is narrow and these are seven columns. */
.cfx-prod > .pay-toggle { cursor: pointer; }
.cfx-prod .cfx-ex-share { display: block; margin-top: .35rem; }
.cfx-prod .cfx-ex-fill  { display: block; }
.cfx-pl-wrap { overflow-x: auto; margin-top: .25rem; }
.cfx-pl { width: 100%; border-collapse: collapse; font-size: .72rem;
    font-variant-numeric: tabular-nums; }
.cfx-pl th, .cfx-pl td { padding: .3rem .45rem; text-align: left; white-space: nowrap;
    border-bottom: 1px solid var(--border, #eef2f5); vertical-align: top; }
.cfx-pl thead th { font-size: .66rem; text-transform: uppercase; letter-spacing: .04em;
    color: var(--text-muted); border-bottom-width: 2px; }
.cfx-pl tbody tr:hover { background: rgba(0,0,0,.025); }
.cfx-pl tfoot td { font-weight: 800; border-top: 2px solid var(--border, #dfe8ee); border-bottom: 0; }
.cfx-pl-num { text-align: right; }
.cfx-pl-name { color: var(--text-muted); font-weight: 600; margin-top: .1rem; }
.cfx-pl-sub  { color: var(--text-muted); font-size: .68rem; margin-top: .1rem; }
.cfx-pl-apport { color: var(--text-muted); cursor: help; margin-left: .15rem; font-weight: 800; }
/* Deferred = settled by credit/amendment, not new cash. Tagged so the line
   can't be read as an ordinary sale, with the till operator's reason on hover. */
.cfx-pl-defer { display: inline-block; margin-left: .3rem; padding: .05rem .3rem;
    border-radius: 4px; background: rgba(194,24,91,.10); color: var(--chart-rose, #c2185b);
    font-size: .62rem; font-weight: 800; text-transform: uppercase; letter-spacing: .03em;
    cursor: help; vertical-align: middle; }
.cfx-pl-defernum { color: var(--chart-rose, #c2185b); }
.cfx-pl-isdefer > td { background: rgba(194,24,91,.035); }
.cfx-pl-note { margin: .4rem 0 0; font-size: .68rem; color: var(--text-muted); line-height: 1.45; }

/* ── Compare ranges (compare.php) ─────────────────────────────────────────── */
.cmp-col { cursor: default; }
.cmp-bar { transition: fill .1s ease; }
.cmp-bar-hover { fill: var(--chart-actual-border); }
/* £ and units share a cell, so the unit sits under its figure */
.cmp-units { display: block; font-style: normal; font-size: .72rem; color: var(--text-muted); }
.cfx-oap-table thead th em.cfx-res-sub { display: block; font-weight: 600; }

/* ── Till operator page (operator.php) ────────────────────────────────────── */
.op-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 1.25rem; align-items: start; }
@media (max-width: 900px) { .op-cols { grid-template-columns: 1fr; } }

/* Year shape: twelve clickable month columns */
.op-months { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: .25rem;
    align-items: end; }
.op-mcol { display: flex; flex-direction: column; align-items: center; gap: .2rem;
    padding: .3rem .1rem; border-radius: 6px; text-decoration: none; color: inherit;
    transition: background .12s ease; }
.op-mcol:hover { background: rgba(0,0,0,.04); }
.op-mcol-on { background: rgba(46,134,176,.10); }
.op-mbarwrap { display: flex; align-items: flex-end; height: 110px; width: 100%; }
.op-mbar { display: block; width: 100%; border-radius: 3px 3px 0 0;
    background: var(--chart-actual-fill); border: 1px solid var(--chart-actual-border);
    border-bottom: 0; min-height: 2px; }
.op-mcol-on .op-mbar { background: var(--chart-actual-border); }
.op-mval { font-size: .62rem; font-weight: 800; color: var(--text-muted); min-height: 1em; }
.op-mlbl { font-size: .7rem; font-weight: 700; color: var(--text-muted); }
.op-mcol:hover .op-mlbl, .op-mcol-on .op-mlbl { color: var(--brand); }
.op-me .cfx-ent-meth-lbl { color: var(--brand); font-weight: 800; }

/* The "Sold by" name in What's selling — a door to that operator's till sales */
.cfx-pl-staff { color: var(--brand); font-weight: 700; text-decoration: none; }
.cfx-pl-staff:hover { text-decoration: underline; }

/* What's-selling date filter: five quick chips + a custom From/To. Compacted
   so the chip row and the date row each hold one line in the narrow column. */
#cfx_date_filter { row-gap: .4rem; padding: .5rem .6rem; }
#cfx_date_filter .cfx-seg { flex-wrap: wrap; }
#cfx_date_filter .dash-mode-btn { padding: .28rem .5rem; font-size: .76rem; }
#cfx_date_filter .filt-bar { gap: .35rem; align-items: center; }
#cfx_date_filter .filt-label { font-size: .74rem; }
#cfx_date_filter input[type="date"] { font-size: .76rem; padding: .2rem .35rem; }
#cfx_date_filter .btn { padding: .26rem .7rem; font-size: .76rem; }

/* What's-selling money line: Sub Total → Discount Total (with its % of Sub
   Total) → Grand Total. Discount is tinted rose so the giveaway stands out
   from the two black-and-green totals it sits between. */
/* Four figures with full labels won't hold one line in this narrow card, so
   they sit as a 2×2 grid — Sub / Discount above, Surcharge / Grand below —
   widening to a single row only when the card has room for it. */
.cfx-sell-money {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .2rem .75rem; white-space: nowrap;
    font-size: .72rem; font-weight: 700; font-variant-numeric: tabular-nums;
    border-bottom: 2px solid var(--border, #dfe8ee); padding: .3rem 0 .45rem;
}
@media (min-width: 1500px) {
    .cfx-sell-money { grid-template-columns: repeat(4, minmax(0, auto));
        justify-content: space-between; }
}
/* Labels ride slightly smaller than their figures so all three pairs hold one
   line in the narrow (dash-narrow) card without shrinking the numbers. */
.cfx-sell-money .cfx-sell-lbl { font-size: .92em; font-weight: 600; }
.cfx-sell-disc  { color: var(--chart-rose, #c2185b); }
.cfx-sell-gross { color: #1e8e5a; }

/* ── Chart hover tooltips (opt-in per page: window.DASH.chartTips) ──────────
   Hovering a column darkens its bar and floats a small card with the figure;
   hovering a cumulative dot gives that dot's running total instead. */
.inc-chart { position: relative; }        /* anchor for the absolute tooltip */

.inc-b-hover { fill: var(--chart-actual-border); }   /* bar darkens on hover */

/* Line dots: small on the page, generous to hit. The transparent inc-dot-hit
   circle does the catching; the visible dot just grows a little on hover.
   The group is clickable (it carries data-month / data-day) so sitting over a
   column costs no drill-through. */
.inc-dotg     { cursor: pointer; }
.inc-dot-hit  { fill: transparent; }
.inc-dot      { transition: r .1s ease; }
.inc-dotg:hover .inc-dot { r: 6; }
.inc-dot-last { fill: var(--chart-last-border); }   /* last-year line's dots */

.inc-tip {
    position: absolute; left: 0; top: 0; z-index: 5;
    display: none; min-width: 92px; max-width: 200px;
    padding: .45rem .6rem; border-radius: 8px;
    background: var(--card-bg, #fff); border: 1px solid var(--border, #e4eaf1);
    box-shadow: 0 4px 14px rgba(16,42,58,.13);
    font-size: .78rem; line-height: 1.35; pointer-events: none;
}
.inc-tip-on { display: block; }
.inc-tip-l { display: block; color: var(--text-muted); font-weight: 600; }
.inc-tip-v { display: block; color: var(--text); font-weight: 800; font-size: .95rem; }
.inc-tip-n { display: block; color: var(--text-muted); font-size: .7rem; font-weight: 600; }

/* ── Profit chart (cashflow home) ─────────────────────────────────── */
.cfx-pl-inc  { fill: none; stroke: var(--chart-cum); stroke-width: 2.6; }
.cfx-pl-cost { fill: none; stroke: var(--chart-actual-border); stroke-width: 2.6; }
.cfx-pl-inc.pred, .cfx-pl-cost.pred { stroke-dasharray: 6 4; }
.cfx-pl-zero { stroke: #9aa3ad; stroke-dasharray: 4 3; }
.cfx-pd-cost { fill: var(--chart-actual-border); }
.cfx-pb-profit { fill: var(--chart-pos); opacity: .72; }
.cfx-pb-loss   { fill: var(--chart-neg); opacity: .68; }
.cfx-pb-pred   { opacity: .3; }
.inc-end-cost  { fill: var(--chart-actual-border); }
.inc-ln-cost     { border-color: var(--chart-actual-border); }
.inc-ln-forecast { border-color: #9aa3ad; border-top-style: dashed; }
.inc-sw-profit { background: var(--chart-pos); border: none; }
.inc-sw-loss   { background: var(--chart-neg); border: none; }

.cfx-profit-wrap { position: relative; }
.cfx-profit-box {
    position: absolute; top: 8px; left: 60px; z-index: 2;
    background: rgba(255,255,255,.92); border: 1px solid var(--border);
    border-radius: 10px; padding: .4rem .75rem; box-shadow: 0 1px 4px rgba(0,0,0,.06);
}
.cfx-profit-lbl { display: block; font-size: .68rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; }
.cfx-profit-val { font-size: 1.4rem; font-weight: 800; color: var(--chart-pos); }
.cfx-profit-val.cfx-profit-neg { color: var(--chart-neg); }

/* ── Chart legend ────────────────────────────────────────────────── */
.inc-legend { display: flex; gap: 1.1rem; align-items: center; font-size: .78rem; color: var(--text-muted); flex-wrap: wrap; }
.inc-key { display: inline-flex; align-items: center; gap: .35rem; }
.inc-key--toggle { cursor: pointer; user-select: none; }
.inc-key--off { opacity: .4; text-decoration: line-through; }
.inc-swatch { width: 12px; height: 12px; border-radius: 3px; display: inline-block; box-sizing: border-box; }
.inc-sw-actual { background: var(--chart-actual-fill); border: 1.5px solid var(--chart-actual-border); }
.inc-sw-voucher { background: var(--chart-voucher-fill); border: 1.5px solid var(--chart-voucher-border); }
.inc-sw-potential { background: rgba(46,134,176,.16); border: 1px dashed var(--chart-actual-border); }
.inc-sw-target { background: var(--chart-target-fill); border: 1.5px solid var(--chart-target-border); }
.inc-sw-last   { background: var(--chart-last-fill);   border: 1.5px solid var(--chart-last-border); }
.inc-line { width: 18px; height: 0; border-top: 3px solid; display: inline-block; }
.inc-ln-cum    { border-color: var(--chart-cum); }
.inc-ln-last   { border-color: var(--chart-last-border); }
.inc-ln-target { border-color: var(--chart-rose); border-top-style: dashed; }

/* ── Theme (colours) admin page ───────────────────────────────────── */
.theme-layout { display: grid; grid-template-columns: 1fr; gap: 1.25rem; align-items: start; }
@media (min-width: 1100px) { .theme-layout { grid-template-columns: minmax(0,1fr) minmax(0,1fr); } }
.theme-group { margin-bottom: 1.25rem; }
.theme-group h3 { font-size: .9rem; color: var(--text-muted); margin: 0 0 .5rem; text-transform: uppercase; letter-spacing: .03em; }
.theme-row { display: flex; align-items: center; gap: .6rem; padding: .25rem 0; }
.theme-color { width: 38px; height: 30px; padding: 0; border: 1px solid var(--border); border-radius: var(--radius-sm); background: none; cursor: pointer; flex-shrink: 0; }
.theme-label { flex: 1; font-size: .85rem; }
.theme-hex { width: 90px; font-family: monospace; font-size: .8rem; padding: .3rem .4rem; border: 1px solid var(--border); border-radius: var(--radius-sm); text-transform: lowercase; }
.theme-default { width: 28px; height: 28px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: #fff; cursor: pointer; color: var(--text-muted); font-size: .95rem; line-height: 1; flex-shrink: 0; }
.theme-default:hover { background: var(--brand-light); }
.theme-actions { display: flex; align-items: center; gap: .75rem; margin-top: .5rem; }
.theme-preview { position: sticky; top: 1rem; }

/* ══════════════════════════════════════════════════════════════════
   Cashflow opening page (cfx-*)
   ══════════════════════════════════════════════════════════════════ */
.cfx-caption { margin-bottom: 1rem; }
.cfx-pos  { color: var(--chart-pos); }
.cfx-neg  { color: var(--chart-neg); }
.cfx-zero { color: var(--text-muted); }

/* Standalone, centred layout (no sidebar) */
.cfx-page  { padding: 1.5rem; }
.cfx-stage { max-width: 860px; margin: 1.5rem auto; }
.cfx-head  { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .25rem; }
.cfx-title { font-size: 1.5rem; font-weight: 800; margin: 0; color: var(--text); }
.cfx-caption2 { text-align: center; color: var(--text-muted); font-size: .85rem; margin: .5rem 0 1.5rem; }
.cfx-foot { text-align: center; color: var(--text-muted); font-size: .75rem; margin: 1.5rem 0 .5rem; }

/* Profit hero — centred prominent card */
.cfx-profit-panel {
    background: #fff;
    border: 1px solid var(--border);
    border-top: 5px solid var(--chart-income);
    border-radius: var(--radius);
    padding: 1.4rem 1rem;
    text-align: center;
    margin-bottom: 1.25rem;
    display: flex; flex-direction: column; gap: .2rem;
}
.cfx-profit-label { font-size: .8rem; color: var(--text-muted); }
.cfx-profit-value { font-size: 2.9rem; font-weight: 800; line-height: 1.05; }
.cfx-profit-sub   { font-size: .8rem; color: var(--text-muted); margin-top: .3rem; }

/* Fixed-size info squares */
.cfx-squares { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; margin-bottom: 1.25rem; }
.cfx-square {
    width: 190px; height: 190px;
    box-sizing: border-box;
    background: #fff;
    border: 1px solid var(--border);
    border-top: 4px solid var(--border);
    border-radius: var(--radius);
    padding: 1rem;
    text-align: center;
    display: flex; flex-direction: column; justify-content: center; gap: .35rem;
}
.cfx-square-income { border-top-color: var(--chart-actual-border); }
.cfx-square-cost   { border-top-color: var(--chart-last-border); }
.cfx-sq-label { font-size: .76rem; color: var(--text-muted); line-height: 1.25; }
.cfx-sq-value { font-size: 1.7rem; font-weight: 800; line-height: 1; }
.cfx-sq-sub   { font-size: .72rem; color: var(--text-muted); }

.cfx-card { padding: 0; overflow: hidden; width: 100%; }
.cfx-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.cfx-table thead th {
    text-align: right; font-size: .76rem; color: var(--text-muted); font-weight: 700;
    text-transform: uppercase; letter-spacing: .03em;
    padding: .9rem 1.4rem; border-bottom: 2px solid var(--border);
}
.cfx-th-label { text-align: left !important; }
.cfx-table td { padding: .72rem 1.4rem; border-bottom: 1px solid var(--border); }
.cfx-label { font-weight: 600; color: var(--text); }
.cfx-num   { text-align: right; font-size: 1.05rem; white-space: nowrap; }

.cfx-r-income td:first-child { box-shadow: inset 4px 0 0 var(--chart-actual-border); }
.cfx-r-cost   td:first-child { box-shadow: inset 4px 0 0 var(--chart-last-border); }
.cfx-r-diff td { background: #fafafa; }
.cfx-r-diff .cfx-label { font-weight: 500; font-size: .9rem; color: var(--text-muted); }

.cfx-r-profit td { border-top: 2px solid var(--border); border-bottom: none; padding-top: 1rem; padding-bottom: 1rem; }
.cfx-r-profit .cfx-label { font-weight: 800; font-size: 1.1rem; }
.cfx-r-profit .cfx-num   { font-weight: 800; font-size: 1.5rem; }

/* Expandable parent rows + indented child rows */
.cfx-toggle {
    font: inherit; font-weight: 700; color: var(--text);
    background: none; border: none; cursor: pointer; padding: 0;
    display: inline-flex; align-items: center; gap: .5rem;
}
.cfx-arrow { display: inline-block; font-size: .7rem; color: var(--text-muted); transition: transform .15s ease; }
.cfx-toggle.open .cfx-arrow { transform: rotate(90deg); }

.cfx-sub { display: none; }
.cfx-sub.cfx-show { display: table-row; }
.cfx-table td.cfx-sub-label { padding-left: 2.8rem; font-weight: 500; font-size: .92rem; color: var(--text); }
.cfx-sub td { background: #fafbfc; }
.cfx-sub td:first-child { box-shadow: inset 3px 0 0 var(--border); }
.cfx-sub .cfx-num { font-size: .95rem; }

/* Per-area "this month" dials */
.cfx-section-title { font-size: .95rem; font-weight: 700; color: var(--text-muted); text-align: center; margin: .5rem 0 1rem; }
.cfx-dial-grid { display: flex; flex-wrap: wrap; gap: .75rem; justify-content: center; margin-bottom: 1.5rem; }
.cfx-dial-tile {
    width: 132px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: .65rem .5rem;
    text-align: center;
    display: flex; flex-direction: column; align-items: center; gap: .3rem;
}
.cfx-dial { display: block; }
.cfx-dial-name { font-size: .72rem; font-weight: 600; color: var(--text); line-height: 1.15; }
.cfx-dial-fig  { font-size: .72rem; color: var(--text); }
.cfx-dial-of   { color: var(--text-muted); }

/* Graphical income block — title + three period dials with T/D/I figures */
.cfx-gblock { display: flex; align-items: center; gap: 1rem; padding: 1.25rem 1.5rem; margin-bottom: 1.25rem; }
.cfx-gtitle { font-size: 1.25rem; font-weight: 800; text-transform: uppercase; letter-spacing: .02em; min-width: 84px; }
.cfx-gcol { flex: 1; display: flex; flex-direction: column; align-items: center; gap: .55rem; }
.cfx-ghead { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--text-muted); text-align: center; }
.cfx-gcol-body { display: flex; align-items: center; gap: .7rem; }
.cfx-tdi { display: inline-flex; flex-direction: column; gap: 3px; font-size: .82rem; }
.cfx-tdi-row { display: flex; align-items: baseline; gap: .4rem; }
.cfx-tdi-k   { color: var(--text-muted); font-weight: 700; width: .9em; }
.cfx-tdi-sep { color: var(--border); }
.cfx-tdi-v   { font-variant-numeric: tabular-nums; }
/* Difference as a share of target — quieter than the money it qualifies. */
.cfx-tdi-pct { font-size: .82em; font-weight: 600; opacity: .85; }
@media (max-width: 640px) {
    .cfx-gblock { flex-direction: column; align-items: stretch; }
}

/* Income graphical row inside the table (under the shared headers) */
.cfx-grow td { border-bottom: 2px solid var(--border); padding: 1.6rem 1.4rem; }
.cfx-grow-title { font-weight: 800; }
.cfx-grow-title .cfx-toggle { font-weight: 800; }

/* Row icons */
.cfx-ico    { width: 30px; height: 30px; vertical-align: middle; margin-right: .55rem; flex-shrink: 0; }
.cfx-ico-sm { width: 24px; height: 24px; }
.cfx-toggle .cfx-ico { margin-right: 0; }

/* Drillable income-area title */
.cfx-drill { color: inherit; text-decoration: none; cursor: pointer; display: inline-flex;
             align-items: center; border-radius: 6px; }
.cfx-drill:hover { color: var(--chart-actual-border); text-decoration: underline; }

/* ── Drill-through detail view + transition ──────────────────────────────────── */
.cfx-detail {
    position: fixed; left: 0; right: 0; bottom: 0; top: var(--cfx-header-h, 60px);
    display: flex; background: #eef1f4; z-index: 30;
    opacity: 0; visibility: hidden; transform: translateY(16px);
    transition: opacity .55s ease, transform .55s cubic-bezier(.22,.61,.36,1), visibility 0s linear .55s;
}
body.cfx-detailing .cfx-detail {
    opacity: 1; visibility: visible; transform: none;
    transition: opacity .55s ease, transform .55s cubic-bezier(.22,.61,.36,1), visibility 0s;
}
/* home page eases back as the detail comes forward */
.cfx-page { transition: opacity .45s ease, transform .45s ease; }
body.cfx-detailing .cfx-page { opacity: 0; transform: scale(.975); pointer-events: none; }

/* left rail = the income areas as a menu */
.cfx-rail {
    width: 240px; flex: 0 0 240px; background: #fff; overflow-y: auto;
    border-right: 1px solid var(--border, #dfe3e8);
    display: flex; flex-direction: column; padding: .85rem;
    transform: translateX(-32px); opacity: 0;
    transition: transform .6s cubic-bezier(.22,.61,.36,1) .12s, opacity .55s ease .12s;
}
body.cfx-detailing .cfx-rail { transform: none; opacity: 1; }
.cfx-detail-close {
    display: inline-flex; align-items: center; gap: .4rem; align-self: flex-start;
    border: 1px solid var(--border, #dfe3e8); background: #f6f7f9; color: #333;
    border-radius: 8px; padding: .5rem .85rem; margin-bottom: .9rem;
    font: inherit; font-weight: 700; cursor: pointer;
}
.cfx-detail-close:hover { background: #eceef1; }
.cfx-rail-menu { display: flex; flex-direction: column; gap: .25rem; }
.cfx-rail-item {
    display: flex; align-items: center; gap: .5rem; padding: .5rem .6rem;
    border-radius: 8px; text-decoration: none; color: #2b3138; font-weight: 600;
    transform: translateX(-16px); opacity: 0;
    transition: transform .5s cubic-bezier(.22,.61,.36,1), opacity .5s ease, background .15s, color .15s;
}
body.cfx-detailing .cfx-rail-item { transform: none; opacity: 1; }
.cfx-rail-item:hover { background: #f0f2f5; }
.cfx-rail-item.active { background: var(--chart-actual-border); color: #fff; }
.cfx-rail-item--off { opacity: .45; cursor: default; }
body.cfx-detailing .cfx-rail-item--off { opacity: .45; }
/* gentle stagger of the menu items as they slide in */
body.cfx-detailing .cfx-rail-item:nth-child(1) { transition-delay: .18s; }
body.cfx-detailing .cfx-rail-item:nth-child(2) { transition-delay: .24s; }
body.cfx-detailing .cfx-rail-item:nth-child(3) { transition-delay: .30s; }
body.cfx-detailing .cfx-rail-item:nth-child(4) { transition-delay: .36s; }
body.cfx-detailing .cfx-rail-item:nth-child(5) { transition-delay: .42s; }
body.cfx-detailing .cfx-rail-item:nth-child(6) { transition-delay: .48s; }
body.cfx-detailing .cfx-rail-item:nth-child(7) { transition-delay: .54s; }
body.cfx-detailing .cfx-rail-item:nth-child(8) { transition-delay: .60s; }
body.cfx-detailing .cfx-rail-item:nth-child(n+9) { transition-delay: .66s; }

/* Rail section headings (Income / Costs) + indented sub-areas */
.cfx-rail-head {
    font-size: .68rem; text-transform: uppercase; letter-spacing: .06em; font-weight: 800;
    color: var(--text-muted); padding: .9rem .55rem .3rem; margin-top: .2rem;
}
.cfx-rail-menu > .cfx-rail-head:first-child { margin-top: 0; padding-top: .1rem; }
.cfx-rail-l2 { padding-left: 1.9rem; }

/* Hamburger + mobile slide-out rail — hidden on desktop */
.cfx-rail-burger   { display: none; }
.cfx-rail-backdrop { display: none; }
@media (max-width: 720px) {
    .cfx-rail {
        position: absolute; top: 0; left: 0; bottom: 0; width: 264px; max-width: 82%;
        flex: none; z-index: 40; box-shadow: 2px 0 18px rgba(0,0,0,.18);
        opacity: 1; transform: translateX(-102%); transition: transform .28s ease;
    }
    body.cfx-detailing .cfx-rail { transform: translateX(-102%); }   /* closed by default */
    body.cfx-detailing .cfx-detail.cfx-rail-open .cfx-rail { transform: none; }
    .cfx-detail-main { width: 100%; flex: 1 1 100%; }
    .cfx-rail-burger {
        display: inline-flex; align-items: center; justify-content: center;
        position: absolute; top: 8px; left: 8px; z-index: 30;
        width: 42px; height: 42px; font-size: 1.35rem; line-height: 1;
        background: #fff; color: #2b3138; border: 1px solid var(--border, #dfe3e8);
        border-radius: 8px; cursor: pointer; box-shadow: 0 1px 5px rgba(0,0,0,.12);
    }
    .cfx-rail-backdrop {
        display: block; position: absolute; inset: 0; z-index: 35;
        background: rgba(0,0,0,.35); opacity: 0; visibility: hidden; transition: opacity .28s;
    }
    .cfx-detail.cfx-rail-open .cfx-rail-backdrop { opacity: 1; visibility: visible; }
}

/* main pane = the embedded dashboard */
.cfx-detail-main {
    flex: 1 1 auto; position: relative; background: #fff;
    transform: translateX(40px); opacity: 0;
    transition: transform .6s cubic-bezier(.22,.61,.36,1) .18s, opacity .55s ease .18s;
}
body.cfx-detailing .cfx-detail-main { transform: none; opacity: 1; }
.cfx-detail-frame { width: 100%; height: 100%; border: 0; display: block; background: #fff; }
.cfx-detail-loading {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    color: #8a93a0; font-weight: 600; background: #fff;
}
.cfx-detail-loading.cfx-hidden { display: none; }

@media (max-width: 40rem) {
    .cfx-rail { width: 152px; flex-basis: 152px; padding: .6rem; }
    .cfx-rail-item { font-size: .82rem; padding: .45rem .5rem; }
    .cfx-detail-close span { display: none; }
}

/* Embed mode: dashboards rendered inside the detail iframe drop the outer chrome */
body.embed .app-main { padding-top: 0; }
body.embed .admin-wrap { display: block; }
body.embed .admin-content { max-width: none; margin: 0; padding: 1rem 1.25rem; }

.cfx-gcell { text-align: center; vertical-align: middle; }
.cfx-gcell-body { display: inline-flex; align-items: center; gap: .55rem; }

/* Income stream sub-rows (same graphical style, smaller + indented) */
.cfx-gsub td { border-bottom: 1px solid var(--border); background: #fafbfc; padding: .5rem 1.4rem; }
.cfx-gsub td.cfx-gsub-label { padding-left: 2.4rem; font-weight: 500; font-size: .9rem; color: var(--text); }
.cfx-gsub td:first-child { box-shadow: inset 3px 0 0 var(--border); }
.cfx-gsub .cfx-gcell-body { gap: .45rem; }
.cfx-gsub .cfx-tdi { font-size: .74rem; gap: 2px; }

/* Row accents (income = teal, costs = purple) + cost bar chart */
.cfx-grow-income  td:first-child { box-shadow: inset 4px 0 0 var(--chart-actual-border); }
.cfx-grow-cost    td:first-child { box-shadow: inset 4px 0 0 var(--chart-last-border); }
.cfx-grow-profit  td:first-child { box-shadow: inset 4px 0 0 var(--chart-pos); }
.cfx-grow-profit  td { border-bottom: none; }
.cfx-bars, .cfx-hbars { display: block; }

/* Full-year (monthly) view: toggle button, compact month cells, scroll */
.cfx-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.cfx-viewbtn {
    display: inline-block; font-size: .72rem; font-weight: 700; white-space: nowrap;
    color: var(--brand); background: var(--brand-light);
    border: 1px solid var(--border); border-radius: var(--radius-sm);
    padding: .3rem .6rem; text-decoration: none;
}
.cfx-viewbtn:hover { background: #fff; }
.cfx-stage.cfx-wide { max-width: 1700px; }

/* ── Home summary: three area columns (each = compact panel + its chart) ─────── */
.cfx-stage.cfx-areas-stage { max-width: 1820px; }
.cfx-areas-bar { margin: 0 0 1rem; }
.cfx-areas { display: grid; grid-template-columns: 1fr; gap: 1.25rem; align-items: start; }
.cfx-area  { display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
@media (min-width: 1024px) { .cfx-areas { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1920px) { .cfx-areas { grid-template-columns: repeat(3, 1fr); } }
/* charts moved out of .cfx-home-charts — restore its font scope + full-bleed */
.cfx-areas .card         { width: 100%; box-sizing: border-box; }
.cfx-areas .inc-chart    { max-width: none; width: 100%; }
.cfx-areas .inc-axis     { font-size: 14px; }
.cfx-areas .inc-end-lbl  { font-size: 15px; }
.cfx-areas .inc-mbtn-lbl { font-size: 14px; }

/* Sub-area list column — hidden until its area's arrow is pressed.
   NB: named .cfx-alist (not .cfx-detail) — .cfx-detail is the fixed drill-through overlay. */
.cfx-alist { display: none; min-width: 0; }
.cfx-alist-head {
    display: flex; align-items: center; gap: .4rem;
    font-weight: 800; font-size: 1.05rem;
    padding: 0 4px 8px; margin-bottom: 4px;
    border-bottom: 2px solid var(--border);
}
/* Focus mode: show only the active area + its sub-area list, hide the rest */
.cfx-areas.cfx-focus-income .cfx-area-costs,
.cfx-areas.cfx-focus-income .cfx-area-profit,
.cfx-areas.cfx-focus-costs  .cfx-area-income,
.cfx-areas.cfx-focus-costs  .cfx-area-profit { display: none; }
.cfx-areas.cfx-focus-income .cfx-alist-income,
.cfx-areas.cfx-focus-costs  .cfx-alist-costs { display: block; }

/* ── Income AREA view: pinned left menu + main dashboard ─────────────────────── */
.cfx-page-area { padding: 0; }
.cfx-arearoot { display: flex; align-items: flex-start; }

.cfx-areamenu {
    flex: 0 0 360px; width: 360px;
    position: sticky; top: var(--header-h, 60px);
    max-height: calc(100vh - var(--header-h, 60px)); overflow-y: auto;
    background: #fff; border-right: 1px solid var(--border);
    padding: 1rem .85rem 2rem;
}
.cfx-areamenu-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: .5rem; }
.cfx-areamenu .cfx-panels { gap: 8px; }
.cfx-menu-item .cfx-psub-label a { color: var(--text); text-decoration: none; font-weight: 600; }
.cfx-menu-item:hover { border-color: var(--chart-actual-border); }
.cfx-menu-on { background: var(--brand-light, #e8f4fd); box-shadow: inset 3px 0 0 var(--chart-actual-border); }
.cfx-menu-on .cfx-psub-label a { color: var(--brand); }
/* collapsed area rows: name + three mini dials, no figures */
.cfx-menu-crow {
    display: flex; align-items: center; gap: .5rem; padding: .4rem .55rem;
    background: #fff; border: 1px solid var(--border);
    border-left: 4px solid var(--chart-actual-border); border-radius: 10px;
    text-decoration: none; color: var(--text);
}
.cfx-menu-crow:hover { border-color: var(--chart-actual-border); background: var(--brand-light, #e8f4fd); }
.cfx-menu-cname {
    flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: .35rem;
    font-weight: 600; font-size: .92rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cfx-menu-cdials { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px; }
.cfx-menu-cdials .cfx-dial,
.cfx-menu-cdials .cfx-bars { width: 30px; height: 30px; display: block; }
.cfx-menu-crow--cost { border-left-color: var(--chart-last-border); }
.cfx-menu-crow--cost:hover { border-color: var(--chart-last-border); }
.cfx-alist-head--costs { margin: 1.1rem 0 .35rem; }

/* Main pane: cap the content and centre it in the space beside the menu, so
   ultra-wide screens don't smear everything across the full width. */
.cfx-areamain { flex: 1 1 0; min-width: 0; max-width: 1560px; margin: 0 auto; padding: 1.25rem 1.75rem 2rem; }

/* head: burger + title (left), year picker (right) — extra room for the title */
.cfx-area-head { align-items: flex-start; }
.cfx-area-headl { display: flex; align-items: flex-start; gap: .75rem; }
.cfx-area-head .cfx-title { margin: 0 0 .45rem; }

/* summary "title bar" — wider label column so the area name never wraps */
/* Summary "title bar": capped + compact so the three dials sit together instead
   of drifting apart across an ultra-wide row. */
.cfx-area-summary { width: 100%; max-width: 1180px; margin: .25rem 0 .5rem; }
.cfx-area-summary .cfx-prow { grid-template-columns: minmax(180px, 240px) repeat(3, minmax(0, 1fr)); }
.cfx-area-summary .cfx-pgrow-title { white-space: nowrap; }

/* charts stacked on the left; income data reserved on the right (shown on click) */
.cfx-addual { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.25rem; align-items: start; }
.cfx-ad-charts, .cfx-ad-data { display: flex; flex-direction: column; gap: 1.25rem; min-width: 0; }
.cfx-ad-charts > .card { max-width: 720px; }   /* cap chart size on very wide screens; fluid below */
.cfx-ad-data > .dash-narrow { max-width: 600px; }
@media (max-width: 1200px) { .cfx-addual { grid-template-columns: 1fr; } }
/* The date band + alerts shouldn't stretch the full width either */
.cfx-areamain > .alert { max-width: 720px; box-sizing: border-box; }

/* ── Node engine (nd-): the generic drill view — breadcrumb · KPIs · grid · pivot ── */
.nd-stage { max-width: 1720px; }
.nd-crumbs { font-size: .85rem; margin: .25rem 0 .75rem; color: var(--text-muted); }
.nd-crumbs a { color: var(--brand); text-decoration: none; font-weight: 600; }
.nd-crumbs a:hover { text-decoration: underline; }
.nd-crumb-sep  { margin: 0 .35rem; color: var(--text-muted); }
.nd-crumb-here { font-weight: 700; color: var(--text); }
.nd-head { margin-bottom: .75rem; }

.nd-kpis { display: flex; flex-wrap: wrap; gap: .75rem; margin: 0 0 1rem; }
.nd-kpi {
    display: flex; flex-direction: column; gap: 2px;
    background: #fff; border: 1px solid var(--border);
    border-left: 4px solid var(--chart-actual-border);
    border-radius: 10px; padding: .55rem .9rem; min-width: 8rem;
}
.nd-kpi-v   { font-size: 1.25rem; font-weight: 800; color: var(--text); }
.nd-kpi-txt { font-size: .95rem; }
.nd-kpi-l   { font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); }

.nd-body { display: grid; grid-template-columns: minmax(0, 1fr) 200px; gap: 1.25rem; align-items: start; }
@media (max-width: 1100px) { .nd-body { grid-template-columns: 1fr; } }
.nd-card { padding: 1rem 1.25rem; }
.nd-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.nd-table { width: 100%; border-collapse: collapse; font-size: .85rem; }
.nd-table th {
    font-size: .68rem; text-transform: uppercase; letter-spacing: .04em;
    color: var(--text-muted); font-weight: 700; text-align: left;
    padding: .35rem .45rem; border-bottom: 2px solid var(--border);
}
.nd-table td { padding: .45rem; border-bottom: 1px solid var(--border); vertical-align: middle; }
.nd-r  { text-align: right !important; }
.nd-mo { font-variant-numeric: tabular-nums; white-space: nowrap; font-size: .78rem; color: var(--text); }
.nd-zero { color: #c8ced4; }
.nd-muted { color: var(--text-muted); }
.nd-label { min-width: 11rem; }
.nd-total { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.nd-total-row td { border-top: 2px solid var(--border); border-bottom: none; font-weight: 800; }

.nd-door { display: block; text-decoration: none; color: var(--text); }
.nd-door-name { font-weight: 600; }
.nd-door-arrow { color: var(--text-muted); transition: color .12s ease, margin-left .12s ease; }
.nd-door:hover .nd-door-name  { color: var(--brand); }
.nd-door:hover .nd-door-arrow { color: var(--brand); margin-left: .15rem; }
.nd-door-sub { display: block; font-size: .74rem; color: var(--text-muted); max-width: 22rem;
               overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.nd-share-col { width: 90px; }
.nd-share { height: 8px; background: #eef1f4; border-radius: 4px; overflow: hidden; }
.nd-share-fill { height: 100%; background: var(--chart-actual-border); border-radius: 4px; }
.nd-share-pct { font-size: .7rem; color: var(--text-muted); }

.nd-pivot {
    background: #fff; border: 1px solid var(--border); border-radius: 12px;
    padding: .85rem; position: sticky; top: calc(var(--header-h, 60px) + 1rem);
}
.nd-pivot-head { font-size: .72rem; text-transform: uppercase; letter-spacing: .04em;
                 color: var(--text-muted); font-weight: 700; margin-bottom: .5rem; }
.nd-pivot-item {
    display: block; padding: .4rem .55rem; margin-bottom: .25rem; border-radius: 8px;
    text-decoration: none; color: var(--text); font-size: .88rem; font-weight: 600;
}
.nd-pivot-item:hover { background: var(--brand-light, #e8f4fd); color: var(--brand); }
.nd-pivot-on { background: var(--brand); color: #fff; }
.nd-capnote { font-size: .78rem; color: var(--text-muted); margin: 0 0 .5rem; }
/* cost-area grid: monthly budget shown beneath each spend cell */
.nd-bud { display: block; font-size: .68rem; color: var(--chart-last-border, #9a5cc4); font-weight: 400; }
.nd-bud-demo { color: var(--chart-last-border, #9a5cc4); }

.nd-leaf-table { max-width: 640px; }

/* Door bar on the area view (Explore → node engine) */
.nd-doorbar { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin: .25rem 0 .75rem; }
.nd-doorbar-lbl { font-size: .72rem; text-transform: uppercase; letter-spacing: .04em;
                  color: var(--text-muted); font-weight: 700; }

/* ── Explore mode: in-canvas node data ───────────────────────────────────────── */
/* The payment/invoice/items lists collapse; the monthly + daily charts stay as
   the month/day nav for the explore panels. */
.cfx-exploring #pay_card,
.cfx-exploring #inv_card,
.cfx-exploring #items_card { display: none !important; }

/* Cost departments menu section: collapsible (collapsed while exploring income) */
.cfx-mcosts-toggle {
    background: none; cursor: pointer; width: 100%; text-align: left;
    font-family: inherit; color: var(--text);
    border: 0; border-bottom: 2px solid var(--border);
}
.cfx-mcosts-toggle .cfx-arrow { margin-left: auto; }
.cfx-arrow-open { transform: rotate(90deg); }
/* NB: .cfx-panels declares display:flex LATER in this file, at equal specificity —
   the closed rule needs to out-rank it or the section silently never collapses. */
.cfx-panels.cfx-mcosts-closed,
.cfx-mcosts-closed { display: none; }

/* Icon chips */
.cfx-echip {
    display: inline-flex; align-items: center; gap: .4rem;
    font-size: .75rem; font-weight: 700; white-space: nowrap;
    color: var(--brand); background: var(--brand-light, #e8f4fd);
    border: 1px solid var(--border); border-radius: 999px;
    padding: .3rem .75rem; text-decoration: none;
    transition: background .12s ease, color .12s ease;
}
.cfx-echip svg { width: 14px; height: 14px; flex: none; }
.cfx-echip:hover { background: #fff; }
.cfx-echip-on { background: var(--brand); color: #fff; border-color: var(--brand); }
.cfx-echip-on:hover { background: var(--brand); }

/* Results card header bar: drilled-scope chip · cap note · full-table link */
.cfx-ex-bar { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin: 0 0 .6rem; }
.cfx-ex-scope {
    display: inline-flex; align-items: center; gap: .4rem;
    font-size: .78rem; font-weight: 700; color: var(--brand);
    background: var(--brand-light, #e8f4fd); border-radius: 999px; padding: .2rem .3rem .2rem .6rem;
}
.cfx-ex-scope a { color: var(--brand); text-decoration: none; font-weight: 800;
                  padding: 0 .3rem; border-radius: 999px; }
.cfx-ex-scope a:hover { background: #fff; }
.cfx-ex-note { font-size: .72rem; color: var(--text-muted); }
.cfx-ex-full { margin-left: auto; font-size: .75rem; font-weight: 600;
               color: var(--text-muted); text-decoration: none; }
.cfx-ex-full:hover { color: var(--brand); text-decoration: underline; }

/* ── Entity dossier (focus mode): headline tile, sibling menu, data grid ─────── */
.cfx-ent-head { padding: 16px 22px; }
.cfx-ent-name { font-size: 1.35rem; font-weight: 800; color: var(--text); }
.cfx-ent-sub  { font-size: .85rem; color: var(--text-muted); margin-top: .1rem; }
.cfx-ent-ctx  { font-size: .75rem; text-transform: uppercase; letter-spacing: .04em;
                color: var(--text-muted); margin-top: .35rem; }
.cfx-ent-kpis { margin-top: 1rem; }
.cfx-ent-kpi-owed { border-left-color: var(--chart-neg, #d8385f); }

.cfx-ent-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; align-items: start; }
.cfx-ent-wide { grid-column: 1 / -1; }
@media (max-width: 1100px) { .cfx-ent-grid { grid-template-columns: 1fr; } }
.cfx-ent-card { padding: 1rem 1.25rem; }
.cfx-ent-svg  { width: 100%; height: auto; display: block; }
.cfx-ent-val  { font-size: 11px; font-weight: 700; fill: var(--text); }
.cfx-ent-lbl  { font-size: 11px; fill: var(--text-muted); }
.cfx-ent-lbl-on { font-weight: 800; fill: var(--chart-actual-border); }

/* org lifetime: stacked second series + legend + record line + KPI accent */
.cfx-ent-bar2 { fill: #e6ebf0; stroke: #b9c2cb; stroke-width: 1; }
.cfx-ent-legend { display: flex; gap: 1rem; margin: .4rem 0 0; font-size: .74rem; color: var(--text-muted); }
.cfx-ent-key { display: inline-flex; align-items: center; gap: .35rem; }
.cfx-ent-sw  { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.cfx-ent-sw1 { background: var(--chart-actual-fill); border: 1px solid var(--chart-actual-border); }
.cfx-ent-sw2 { background: #e6ebf0; border: 1px solid #b9c2cb; }
.cfx-ent-orgrec { font-size: .74rem; color: var(--text-muted); margin-top: .3rem; }
.cfx-ent-kpi-life { border-left-color: var(--chart-pos, #3f9c48); }
.cfx-ent-meth-on .cfx-ent-meth-lbl { color: var(--brand); font-weight: 800; }
.cfx-ent-meth-lbl a { color: var(--text); text-decoration: none; font-weight: 600; }
.cfx-ent-meth-lbl a:hover { color: var(--brand); text-decoration: underline; }

/* payment-method mix bars */
.cfx-ent-meth { display: flex; flex-direction: column; gap: .5rem; }
.cfx-ent-meth-row { display: flex; align-items: center; gap: .6rem; }
.cfx-ent-meth-lbl { flex: 0 0 7.5rem; font-size: .8rem; font-weight: 600; color: var(--text); }
.cfx-ent-meth-bar { flex: 1 1 auto; height: 10px; background: #eef1f4; border-radius: 5px; overflow: hidden; }
.cfx-ent-meth-fill { display: block; height: 100%; background: var(--chart-actual-border); border-radius: 5px; }
.cfx-ent-meth-fill--over { background: var(--chart-neg, #d8385f); }
.cfx-ent-meth-val { flex: 0 0 auto; font-size: .74rem; color: var(--text-muted); white-space: nowrap; }

/* two-up booking panels inside the wide card */
.cfx-ent-bklist { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .45rem; }
@media (max-width: 900px) { .cfx-ent-bklist { grid-template-columns: 1fr; } }

/* sibling menu rows (focus mode) */
.cfx-menu-back {
    display: block; margin: 0 0 .6rem; padding: .35rem .55rem;
    font-size: .82rem; font-weight: 700; color: var(--brand);
    text-decoration: none; border-radius: 8px;
}
.cfx-menu-back:hover { background: var(--brand-light, #e8f4fd); }
.cfx-ment { justify-content: space-between; }
.cfx-ment-val { flex: 0 0 auto; font-size: .82rem; font-weight: 700; color: var(--text-muted);
                font-variant-numeric: tabular-nums; }
.cfx-ment-on { background: var(--brand-light, #e8f4fd); border-color: var(--chart-actual-border);
               box-shadow: inset 3px 0 0 var(--chart-actual-border); }
.cfx-ment-on .cfx-menu-cname { color: var(--brand); }
.cfx-ment-more { font-size: .72rem; color: var(--text-muted); text-align: center; margin: .4rem 0 0; }

/* Result panels (a-tag pay-panels with a share bar) */
.cfx-ex-panel { text-decoration: none; color: inherit; }
.cfx-ex-panel:hover { border-color: var(--chart-actual-border); background: #f4f9fc; }
.cfx-ex-arrow { color: var(--text-muted); }
.cfx-ex-panel:hover .pay-name, .cfx-ex-panel:hover .cfx-ex-arrow { color: var(--brand); }
.cfx-ex-share { height: 6px; background: #eef1f4; border-radius: 3px; margin-top: .45rem; }
.cfx-ex-fill  { height: 100%; background: var(--chart-actual-border); border-radius: 3px; }

/* ── Mobile tidy — cashflow + node pages only (body.cfx-app) ─────────────────── */
@media (max-width: 720px) {
    /* Internal app on a phone (David, 2026-07-10): KEEP the blue bar — logo
       only (no "Insight" wordmark), burger top-left, search + profile symbols
       top-right. The year trio moves to its own strip below (.cfx-year-mobile). */
    body.cfx-app { --header-h: 52px; }
    body.cfx-app .app-header { display: block; }
    body.cfx-app .cfx-header-inner { min-height: 52px; padding: .3rem .6rem; }
    body.cfx-app .cfx-header .logo-text { display: none; }          /* logo image only */
    body.cfx-app .cfx-header-year .filt-year-trio { display: none; } /* trio lives below */
    body.cfx-app .cfx-header-user .hu-name { display: none; }        /* profile = symbol */
    body.cfx-app .cfx-header-user .header-user svg { width: 22px; height: 22px; }

    /* Compact year trio */
    .filt-year-trio { gap: .35rem; }
    .filt-yr { min-width: 0; padding: .16rem .5rem; font-size: .82rem; border-width: 2px; border-radius: 8px; }
    .filt-yr--cur { font-size: .95rem; }

    /* Smaller page title so the head fits on one line with the trio */
    body.cfx-app .cfx-title { font-size: 1.15rem; }
    body.cfx-app .cfx-head { align-items: center; }

    /* Area summary panel: name + three bare dials on one row — no figure text.
       (Also fixes the dial/figure overlap: these override the desktop strip grid.) */
    .cfx-area-summary .cfx-prow { grid-template-columns: minmax(0, 1fr) repeat(3, auto); gap: 8px; align-items: center; }
    .cfx-area-summary .cfx-pcell { border-top: none; padding-top: 0; margin-top: 0; justify-content: center; }
    .cfx-area-summary .cfx-tdi { display: none; }
    .cfx-area-summary .cfx-dial,
    .cfx-area-summary .cfx-bars,
    .cfx-area-summary .cfx-hbars { width: 40px; height: 40px; }
    .cfx-area-summary .cfx-pcard { padding: 10px 12px; }
    .cfx-area-summary .cfx-pgrow-title { white-space: normal; font-size: .95rem; }

    /* Charts: compact cards — legends off on a phone, tighter padding */
    body.cfx-app .inc-legend { display: none; }
    body.cfx-app .card { padding: .8rem .85rem; }
    body.cfx-app .card-toolbar h2 { font-size: .95rem; }
    body.cfx-app .cfx-areamain { padding: .75rem .75rem 1.5rem; }
    body.cfx-app .cfx-page:not(.cfx-page-area) { padding: .75rem; }   /* home */
}

/* mid widths: slim the menu down before it starts squeezing the charts */
@media (max-width: 1400px) and (min-width: 901px) {
    .cfx-areamenu { flex: 0 0 320px; width: 320px; }
    .cfx-areamenu .cfx-menu-cdials { gap: 5px; }
}

/* mobile: menu collapses to an off-canvas drawer with a burger + close button */
.cfx-menu-burger, .cfx-menu-close, .cfx-areamenu-backdrop { display: none; }
@media (max-width: 900px) {
    .cfx-areamenu {
        position: fixed; top: var(--header-h, 60px); left: 0; bottom: 0;
        width: 280px; max-height: none; z-index: 40;
        transform: translateX(-100%); transition: transform .25s ease;
        box-shadow: 2px 0 14px rgba(0, 0, 0, .18);
    }
    .cfx-menu-open .cfx-areamenu { transform: none; }
    .cfx-areamenu-backdrop {
        display: block; position: fixed; inset: var(--header-h, 60px) 0 0 0;
        background: rgba(0, 0, 0, .35); opacity: 0; visibility: hidden;
        transition: opacity .25s ease, visibility 0s linear .25s; z-index: 39;
    }
    .cfx-menu-open .cfx-areamenu-backdrop { opacity: 1; visibility: visible; transition: opacity .25s ease; }
    .cfx-menu-burger {
        display: inline-flex; align-items: center; justify-content: center;
        font-size: 1.35rem; line-height: 1; color: var(--text);
        background: none; border: 1px solid var(--border); border-radius: 8px;
        padding: .2rem .55rem; cursor: pointer;
    }
    .cfx-menu-close {
        display: inline-flex; align-items: center; justify-content: center;
        background: none; border: 0; font-size: 1.05rem; color: var(--text-muted); cursor: pointer;
    }
}
.cfx-table td.cfx-mcol { padding: 1rem .5rem; }
.cfx-mcol  { min-width: 92px; }
.cfx-mcol-sum { box-shadow: inset 1px 0 0 var(--border); }
.cfx-mcell { display: flex; flex-direction: column; align-items: center; gap: 5px; }
.cfx-mcell .cfx-tdi { font-size: .66rem; gap: 1px; }

/* ── Summary as panel cards (grid-aligned on desktop, stacked on a phone) ─────── */
.cfx-panels { display: flex; flex-direction: column; gap: 10px; }
.cfx-prow   { display: grid; grid-template-columns: 180px repeat(3, 1fr); gap: 14px; align-items: center; }
.cfx-phead  { padding: 2px 20px 0 24px; }
.cfx-pcol   { font-size: .72rem; letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted); text-align: center; }
.cfx-pcard  {
    background: #fff; border: 1px solid var(--border);
    border-left: 4px solid var(--cfx-accent, #cbd2d9);
    border-radius: 12px; padding: 14px 20px;
}
.cfx-pcard-income { --cfx-accent: var(--chart-actual-border); }
.cfx-pcard-cost   { --cfx-accent: var(--chart-last-border); }
.cfx-pcard-profit { --cfx-accent: var(--chart-pos); }
.cfx-psub[data-parent="income"] { --cfx-accent: var(--chart-actual-border); }
.cfx-psub[data-parent="costs"]  { --cfx-accent: var(--chart-last-border); }
.cfx-pgrow-title { font-weight: 800; font-size: 1.05rem; }
.cfx-pgrow-title .cfx-toggle { font-weight: 800; }
.cfx-plabel { min-width: 0; }
.cfx-pcell  { display: flex; justify-content: center; align-items: center; }
.cfx-pcell-lbl { display: none; }
.cfx-psub   { display: none; background: #fafbfc; padding: 10px 20px; }
.cfx-psub.cfx-show { display: block; }
.cfx-psub-label { padding-left: 1.6rem; font-weight: 500; font-size: .92rem; color: var(--text); display: flex; align-items: center; }
.cfx-psub .cfx-gcell-body { gap: .45rem; }
.cfx-psub .cfx-tdi { font-size: .74rem; gap: 2px; }

/* Stacked panels (home area columns): each period on its own row with its label */
.cfx-panels-stacked .cfx-phead { display: none; }
.cfx-panels-stacked .cfx-prow  { grid-template-columns: 1fr; gap: 4px; }
.cfx-panels-stacked .cfx-pcell { justify-content: flex-start; gap: 12px; border-top: 1px solid var(--border); padding-top: 8px; margin-top: 2px; }
.cfx-panels-stacked .cfx-pcell-lbl {
    display: block; width: 92px; flex: none;
    font-size: .72rem; text-transform: uppercase; letter-spacing: .03em; color: var(--text-muted);
}
.cfx-panels-stacked .cfx-psub-label { padding-left: .3rem; }

/* Sub-area list panels: area name on its own line, then the three periods side by
   side (the column is wide enough and the dials small enough to fit in a row). */
.cfx-alist .cfx-psub { padding: 10px 14px; }
.cfx-alist .cfx-prow {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px 12px;
    align-items: start;
}
.cfx-alist .cfx-psub-label {
    grid-column: 1 / -1;
    padding-left: .1rem;
    margin-bottom: 3px;
}
.cfx-alist .cfx-pcell {
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 3px;
}
.cfx-alist .cfx-pcell-lbl {
    display: block;
    font-size: .58rem; font-weight: 600; text-transform: uppercase;
    letter-spacing: .03em; color: var(--text-muted);
}
.cfx-alist .cfx-dial       { width: 50px; height: 50px; }
.cfx-alist .cfx-gcell-body { gap: .4rem; }
.cfx-alist .cfx-tdi        { font-size: .66rem; gap: 2px; }

/* Daily detail row: on very wide screens it need only be two columns wide, not
   the full three — each chart spans 2 of the 3 grid columns (stacked). */
@media (min-width: 1920px) {
    #cfx_home_daily { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
    #cfx_home_daily > .card { grid-column: span 2; width: 100%; }
}

@media (max-width: 720px) {
    .cfx-phead { display: none; }
    .cfx-prow  { grid-template-columns: 1fr; gap: 4px; }
    .cfx-pcell { justify-content: flex-start; gap: 12px; border-top: 1px solid var(--border); padding-top: 8px; margin-top: 2px; }
    .cfx-pcell-lbl {
        display: block; width: 92px; flex: none;
        font-size: .72rem; text-transform: uppercase; letter-spacing: .03em; color: var(--text-muted);
    }
    .cfx-psub-label { padding-left: .3rem; }
}

@media (max-width: 640px) {
    .cfx-squares { flex-direction: column; align-items: center; }
    .cfx-profit-value { font-size: 2.3rem; }
}

/* ── Responsive ──────────────────────────────────────────────────── */
@media (max-width: 700px) {
    .dash-mode-switch { margin-left: 0; }
    .dash-today-val   { font-size: 1.25rem; }
    .inc-bar-label    { flex: 0 0 100px; }
    .inc-bar-value    { flex: 0 0 70px; font-size: .75rem; }
}

/* ══════════════════════════════════════════════════════════════════
   Cash Flow dashboard
   ══════════════════════════════════════════════════════════════════ */

.cf-toggle-btn.active {
    background: var(--brand);
    color: #fff;
    border-color: var(--brand);
}

/* Scrollable table container */
.cf-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    background: var(--card-bg);
}

/* Table base */
.cf-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .78rem;
    white-space: nowrap;
}
.cf-table thead th {
    position: sticky;
    top: 0;
    background: var(--brand);
    color: #fff;
    font-weight: 700;
    text-align: right;
    padding: .45rem .5rem;
    border-right: 1px solid rgba(255,255,255,.15);
    z-index: 2;
}
.cf-table thead th:first-child {
    text-align: left;
    position: sticky;
    left: 0;
    z-index: 3;
    min-width: 160px;
}
.cf-table thead th.cf-ytd   { background: #1a6090; }
.cf-table thead th.cf-total { background: #154e73; }

/* Body cells */
.cf-table tbody tr { border-bottom: 1px solid var(--border); }
.cf-table tbody tr:last-child { border-bottom: none; }
.cf-table tbody td { padding: .3rem .5rem; }

.cf-label {
    position: sticky;
    left: 0;
    background: var(--card-bg);
    font-weight: 500;
    color: var(--text);
    padding-right: 1rem;
    z-index: 1;
    border-right: 1px solid var(--border);
}
.cf-num { text-align: right; color: var(--text); }
.cf-ytd   { background: rgba(26,96,144,.06); font-weight: 600; }
.cf-total { background: rgba(21,78,115,.08); font-weight: 700; }

/* Section headers */
.cf-section-header td {
    background: var(--brand-light, #e8f1f8);
    color: var(--brand);
    font-weight: 700;
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    padding: .45rem .5rem;
}

/* Totals rows */
.cf-total-row .cf-label { font-weight: 700; }
.cf-total-row .cf-num   { font-weight: 700; border-top: 2px solid var(--border); }

/* Diff rows */
.cf-diff-row .cf-label { color: var(--text-muted); font-style: italic; }

/* Value states */
.cf-zero { color: var(--text-muted); }
.cf-neg  { color: var(--danger); }
.cf-pos  { color: var(--success); }

/* Alternating row tint */
.cf-table tbody tr:nth-child(even) .cf-label { background: #f9fafb; }
.cf-table tbody tr:nth-child(even) td        { background: #f9fafb; }
.cf-table tbody tr:nth-child(even) .cf-ytd   { background: rgba(26,96,144,.09); }
.cf-table tbody tr:nth-child(even) .cf-total { background: rgba(21,78,115,.11); }
/* Section headers always override stripe */

/* ── Toboggan dashboard (tob-*) ─────────────────────────────────────────────── */
.tob-sep { margin-left: .75rem; }

.tob-section { margin-bottom: 1.25rem; }

.tob-table-wrap { overflow-x: auto; }

.tob-table {
    border-collapse: collapse;
    width: 100%;
    font-size: .875rem;
}
.tob-table th,
.tob-table td {
    padding: .4rem .65rem;
    border: 1px solid var(--border);
    text-align: center;
    white-space: nowrap;
}
.tob-th-type,
.tob-type {
    text-align: left;
    min-width: 140px;
    font-weight: 600;
}
.tob-th-group {
    background: var(--bg-light, #f5f5f5);
    font-weight: 700;
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--brand);
    border-bottom: none;
}
.tob-th-total { background: rgba(26,96,144,.1); }
.tob-th-sub {
    background: #fafafa;
    font-weight: 600;
    font-size: .78rem;
    color: var(--text-muted);
}
.tob-n { text-align: right; color: var(--text); }
.tob-n-total { font-weight: 700; background: rgba(26,96,144,.06); }

.tob-totals-row td {
    background: var(--bg-light, #f5f5f5);
    font-weight: 700;
    border-top: 2px solid var(--border);
}
.tob-totals-row .tob-n-total { background: rgba(26,96,144,.12); }

.tob-loading,
.tob-empty {
    text-align: center;
    padding: 1.5rem;
    color: var(--text-muted);
    font-style: italic;
}

/* ── Staff Hours dashboard (sh-*) ───────────────────────────────────── */
.sh-date-range {
    font-size: .85rem;
    color: var(--text-muted);
    align-self: center;
    margin-left: 1rem;
}

.sh-table-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--brand);
    margin: 1.5rem 0 .6rem;
    padding: 0;
}

.sh-table-wrap {
    overflow-x: auto;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: #fff;
}

.sh-table {
    border-collapse: collapse;
    font-size: 12px;
    min-width: 100%;
    white-space: nowrap;
}

/* Rotated column headers */
.sh-table th {
    height: 120px;
    min-width: 34px;
    max-width: 34px;
    padding: 0;
    vertical-align: bottom;
    background: var(--bg-light, #f5f5f5);
    border-bottom: 2px solid var(--border);
    position: relative;
}

.sh-table th .sh-th-txt {
    position: absolute;
    bottom: 8px;
    left: 50%;
    transform-origin: left bottom;
    transform: translateX(-50%) rotate(-45deg);
    white-space: nowrap;
    font-size: 11px;
    font-weight: 600;
    color: var(--text);
    letter-spacing: .01em;
}

/* First column header — not rotated */
.sh-table th.sh-th-name {
    height: auto;
    min-width: 170px;
    max-width: 170px;
    vertical-align: middle;
    padding: 8px 10px;
    position: sticky;
    left: 0;
    z-index: 3;
}

.sh-table th.sh-th-name .sh-th-txt {
    position: static;
    transform: none;
    display: block;
    font-size: 12px;
}

/* Data cells */
.sh-table td {
    padding: 4px 6px;
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
    color: var(--text);
    background: #fff;
}

.sh-table tbody tr:nth-child(even) td { background: #f9fafb; }
.sh-table tbody tr:hover td           { background: #eef4fb; }

/* Left-border group separators */
.sh-table th.sh-sep,
.sh-table td.sh-sep {
    border-left: 2px solid var(--border);
}

/* First sticky column */
.sh-table td.sh-name {
    position: sticky;
    left: 0;
    z-index: 1;
    min-width: 170px;
    max-width: 170px;
    font-weight: 600;
    border-left: none;
    border-right: 2px solid var(--border);
    background: #fff;
}

.sh-table tbody tr:nth-child(even) td.sh-name { background: #f9fafb; }
.sh-table tbody tr:hover td.sh-name            { background: #eef4fb; }

.sh-contract {
    font-weight: 400;
    font-size: 11px;
    color: var(--text-muted);
}

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

/* Warning: bold red */
.sh-warn {
    font-weight: 700;
    color: var(--danger, #c0392b);
}
.cf-section-header td { background: var(--brand-light, #e8f1f8) !important; }

/* ── Course Redemption dashboard (cr-*) ─────────────────────────── */

.cr-filter-card {
    margin-bottom: 1.25rem;
}

.cr-template-select {
    display: block;
    width: 100%;
    max-width: 600px;
    font-size: .875rem;
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: .25rem;
    margin: .5rem 1rem 1rem;
    color: var(--text);
    background: #fff;
}

.cr-section { margin-bottom: 1.25rem; }

.cr-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.cr-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .875rem;
}

.cr-table th {
    padding: 6px 10px;
    background: var(--brand, #1a73a7);
    color: #fff;
    text-align: left;
    font-weight: 600;
    white-space: nowrap;
    border-bottom: 2px solid var(--brand-dark, #155f8a);
}

.cr-table td {
    padding: 6px 10px;
    border-bottom: 1px solid var(--border);
    vertical-align: top;
    background: #fff;
    color: var(--text);
}

.cr-table tbody tr:nth-child(even) td { background: #f9fafb; }
.cr-table tbody tr:hover td           { background: #eef4fb; }

.cr-th-n, .cr-n {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.cr-th-children { min-width: 400px; }

.cr-parent-row > .cr-children-cell { padding: 4px 6px; }

/* Nested child table inside parent row */
.cr-child-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .82rem;
}

.cr-child-table th {
    padding: 4px 8px;
    background: var(--brand-light, #e8f1f8);
    color: var(--text);
    font-weight: 600;
    text-align: left;
    border-bottom: 1px solid var(--border);
}

.cr-child-table td {
    padding: 3px 8px;
    border-bottom: 1px solid var(--border);
    background: transparent;
}

.cr-child-table tr:last-child td { border-bottom: none; }

.cr-loading, .cr-empty {
    text-align: center;
    padding: 1.5rem;
    color: var(--text-muted);
    font-style: italic;
}

/* ── OAP dashboards (oap-*) ──────────────────────────────────────── */
/* Shared between oap-lead-time and oap-booking-stats               */

.oap-section { margin-bottom: 1.25rem; }

.oap-avg {
    padding: .5rem 1rem .25rem;
    font-size: .9rem;
    font-weight: 600;
    color: var(--text);
}

.oap-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.oap-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .875rem;
}

.oap-table th {
    padding: 6px 10px;
    background: var(--brand, #1a73a7);
    color: #fff;
    text-align: center;
    font-weight: 600;
    white-space: nowrap;
    border-bottom: 2px solid var(--brand-dark, #155f8a);
}

.oap-th-group {
    text-align: center;
    border-left: 2px solid rgba(255,255,255,.3);
}

.oap-table td {
    padding: 5px 10px;
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
    background: #fff;
    color: var(--text);
}

.oap-table tbody tr:nth-child(even) td { background: #f9fafb; }
.oap-table tbody tr:hover td           { background: #eef4fb; }

.oap-table tfoot tr td {
    background: var(--brand-light, #e8f1f8);
    font-weight: 700;
    border-top: 2px solid var(--border);
}

.oap-totals-row td {
    background: var(--brand-light, #e8f1f8) !important;
    font-weight: 700;
    border-top: 2px solid var(--border);
}

.oap-th-n, .oap-n {
    text-align: center;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.oap-th-label  { min-width: 100px; }
.oap-th-activity { min-width: 160px; }
.oap-label, .oap-activity { white-space: nowrap; }

/* Stats table group separator */
.oap-stats-table th.oap-th-group:nth-child(3),
.oap-stats-table th.oap-th-group:nth-child(4) {
    border-left: 2px solid rgba(255,255,255,.3);
}

.oap-loading, .oap-empty {
    text-align: center;
    padding: 1.5rem;
    color: var(--text-muted);
    font-style: italic;
}

/* ── Voucher Sales dashboard (vs-*) ──────────────────────────────── */

.vs-section { margin-bottom: 1.25rem; }

.vs-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.vs-table {
    width: max-content;
    min-width: 100%;
    border-collapse: collapse;
    font-size: .82rem;
}

.vs-table th {
    padding: 5px 8px;
    background: var(--brand, #1a73a7);
    color: #fff;
    text-align: center;
    font-weight: 600;
    white-space: nowrap;
    border-bottom: 2px solid var(--brand-dark, #155f8a);
}

.vs-th-group {
    text-align: center;
    border-left: 2px solid rgba(255,255,255,.3);
}

.vs-table td {
    padding: 4px 8px;
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
    background: #fff;
    color: var(--text);
    white-space: nowrap;
}

.vs-table tbody tr:nth-child(even) td { background: #f9fafb; }
.vs-table tbody tr:hover td           { background: #eef4fb; }

.vs-th-n, .vs-n {
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.vs-th-template { min-width: 200px; }
.vs-template    { font-weight: 600; }

.vs-loading, .vs-empty {
    text-align: center;
    padding: 1.5rem;
    color: var(--text-muted);
    font-style: italic;
}

/* ── Insight tidy-up (2026-07-02): header zones · subtle year trio · feature
   Explore chips · over-budget panels · narrower menu · mobile year strip ─────── */

/* Header: year trio left · Insight centred · user + logout right */
body.cfx-app .cfx-header-inner {
    display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
}
.cfx-header-year { justify-self: start; }
.cfx-header-logo { justify-self: center; }
.cfx-header-user { justify-self: end; display: flex; align-items: center; gap: .8rem; }
.cfx-header-user .header-user { display: inline-flex; align-items: center; gap: .45rem; }
.cfx-header-user .header-user svg { width: 19px; height: 19px; opacity: .9; }
.cfx-header-user .header-user .hu-name { font-style: normal; }

/* Year trio inside the dark header: quiet outline pills, white current */
.app-header .filt-year-trio { gap: .3rem; }
.app-header .filt-yr {
    min-width: 3.4rem; padding: .18rem .6rem;
    font-size: .8rem; font-weight: 600;
    background: transparent; color: rgba(255, 255, 255, .85);
    border: 1px solid rgba(255, 255, 255, .45); border-radius: 8px;
    box-shadow: none;
}
.app-header .filt-yr--adj:hover { background: rgba(255, 255, 255, .14); filter: none; }
.app-header .filt-yr--cur {
    background: #fff; color: var(--brand); border-color: #fff;
    font-weight: 800; font-size: .85rem;
}
.app-header .filt-yr--off,
.app-header .filt-yr:disabled {
    background: transparent; color: rgba(255, 255, 255, .25);
    border-color: rgba(255, 255, 255, .15);
}

/* Phone: header is hidden, so the trio gets its own centred strip */
.cfx-year-mobile { display: none; }
@media (max-width: 720px) {
    .cfx-year-mobile { display: flex; justify-content: center; padding: .6rem .75rem 0; }
}

/* Breadcrumbs in the area head */
.cfx-area-crumbs { margin: 0 0 .2rem; }

/* Explore chips: now a core feature — bigger, bolder, lifted */
.nd-doorbar { gap: .6rem; margin: .4rem 0 1rem; }
.nd-doorbar-lbl { font-size: .8rem; letter-spacing: .06em; }
.cfx-echip {
    font-size: .85rem; padding: .5rem 1.05rem; gap: .5rem;
    background: #fff; border: 1px solid var(--border);
    box-shadow: 0 1px 3px rgba(16, 42, 67, .1);
    transition: background .12s ease, color .12s ease, transform .1s ease, box-shadow .12s ease;
}
.cfx-echip svg { width: 17px; height: 17px; }
.cfx-echip:hover { background: var(--brand-light, #e8f4fd); transform: translateY(-1px);
                   box-shadow: 0 3px 8px rgba(16, 42, 67, .14); }
.cfx-echip-on { background: var(--brand); color: #fff; border-color: var(--brand);
                box-shadow: 0 3px 8px rgba(16, 42, 67, .22); }
.cfx-echip-on:hover { background: var(--brand); transform: none; }

/* Over-budget cost areas shout */
.cfx-ex-over { border-left: 4px solid var(--chart-neg, #d8385f); background: #fff7f8; }
.cfx-ex-over .pay-org { color: var(--chart-neg, #d8385f); font-weight: 700; }
.cfx-ex-over:hover { background: #ffeef1; }
.cfx-areamenu-top .cfx-mcosts-toggle { width: auto; flex: 1 1 auto; }

/* ── Navigation loading swirl (assets/js/loading.js) ─────────────────────────── */
#cfx_loadswirl {
    position: fixed; inset: 0; z-index: 200;
    display: none; align-items: center; justify-content: center;
    background: rgba(238, 241, 244, .55);
}
#cfx_loadswirl.on { display: flex; }
.cfx-swirl {
    width: 46px; height: 46px; border-radius: 50%;
    border: 4px solid var(--brand-light, #e8f4fd);
    border-top-color: var(--brand, #005e85);
    animation: cfxspin .75s linear infinite;
}
@keyframes cfxspin { to { transform: rotate(360deg); } }

/* ── Insight search — command palette (Ctrl+K · assets/js/search.js) ─────────── */
#cfx_search {
    position: fixed; inset: 0; z-index: 300;
    display: none; align-items: flex-start; justify-content: center;
    padding-top: 12vh; background: rgba(16, 42, 67, .38);
}
#cfx_search.on { display: flex; }
.cfx-search-panel {
    width: min(620px, 92vw); background: #fff; border-radius: 14px;
    box-shadow: 0 18px 60px rgba(16, 42, 67, .35); overflow: hidden;
}
#cfx_search_input {
    width: 100%; box-sizing: border-box; border: 0; outline: none;
    padding: 1rem 1.15rem; font: inherit; font-size: 1.05rem;
    border-bottom: 1px solid var(--border);
}
.cfx-search-list { max-height: 52vh; overflow-y: auto; padding: .35rem; }
.cfx-search-group {
    font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
    color: var(--text-muted); padding: .55rem .8rem .25rem;
}
.cfx-search-item {
    display: flex; align-items: baseline; justify-content: space-between; gap: .75rem;
    padding: .5rem .8rem; border-radius: 8px; text-decoration: none; color: var(--text);
}
.cfx-search-item:hover, .cfx-search-item.on { background: var(--brand-light, #e8f4fd); }
.cfx-search-item.on .cfx-search-lbl { color: var(--brand); }
.cfx-search-lbl { font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cfx-search-ext { color: var(--text-muted); font-weight: 400; }
.cfx-search-sub { flex: 0 0 auto; font-size: .74rem; color: var(--text-muted); white-space: nowrap; }
.cfx-search-none { padding: .9rem; color: var(--text-muted); font-size: .9rem; margin: 0; }
.cfx-search-hint {
    padding: .45rem .9rem; font-size: .7rem; color: var(--text-muted);
    border-top: 1px solid var(--border); background: #fafbfc;
}

/* header magnifier button */
.cfx-search-btn {
    display: inline-flex; align-items: center; justify-content: center;
    background: none; border: 0; cursor: pointer; color: #fff; opacity: .9;
    padding: .3rem; border-radius: 8px;
}
.cfx-search-btn:hover { background: rgba(255, 255, 255, .14); opacity: 1; }
.cfx-search-btn svg { width: 19px; height: 19px; }
.cfx-search-err { color: var(--chart-neg, #d8385f); }

/* Search button: hidden until search.js announces itself on <html>. A page
   that does not load the engine used to show a button that did nothing. */
html:not(.has-search) .cfx-search-btn { display: none; }

/* ── Home button — shell mode only (see includes/cfx_header.php) ─────────────
   Inside the staff app's frame the logo is hidden, and on the canvas pages the
   logo was the only way back. Rendered on every page, revealed by
   html.ins-shell, because the guard can enter shell mode after PHP has run. */
.cfx-home {
    display: none; align-items: center; gap: .35rem; white-space: nowrap;
    padding: .18rem .55rem; border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, .45);
    color: rgba(255, 255, 255, .9); text-decoration: none;
    font-size: .8rem; font-weight: 600;
}
.cfx-home:hover { background: rgba(255, 255, 255, .16); color: #fff; }
.cfx-home svg  { width: 16px; height: 16px; }
/* Phone frame is 375-430px: the house alone carries it, the title stays. */
@media (max-width: 430px) {
    .cfx-home span { display: none; }
    .cfx-home      { padding: .28rem; }
}

/* ── User menu — where log out lives now ─────────────────────────────────────
   Was a bare ✕ in the top-right corner, i.e. exactly where a browser or a
   shell tab puts CLOSE. See includes/cfx_usermenu.php. */
.cfx-usermenu { position: relative; }
.cfx-user-btn {
    display: inline-flex; align-items: center; gap: .45rem;
    padding: .25rem .4rem; border-radius: 8px;
    background: none; border: 0; cursor: pointer;
    color: rgba(255, 255, 255, .85); font: inherit; font-size: .88rem;
}
.cfx-user-btn:hover      { background: rgba(255, 255, 255, .14); color: #fff; }
.cfx-user-btn svg        { width: 19px; height: 19px; opacity: .9; }
.cfx-user-btn .hu-name   { font-style: normal; }
.cfx-user-btn .cfx-user-caret { width: 14px; height: 14px; opacity: .7; }
/* Box matched to .insight-menu, because insight.js renders the pins and
   "Customise this page" straight into .insight-menu-slot inside it — one
   menu, not two competing ones on the same chip. */
.cfx-usermenu-pop {
    position: absolute; top: calc(100% + 8px); right: 0; z-index: 260;
    min-width: 270px; max-width: 340px; padding: .45rem;
    background: #fff; color: #16323f;
    border: 1px solid #d5dee4; border-radius: 10px;
    box-shadow: 0 10px 30px rgba(10, 40, 60, .18);
}
.cfx-usermenu-item {
    display: block; padding: .4rem .5rem; border-radius: 7px;
    color: inherit; text-decoration: none; font-size: .86rem; font-weight: 600;
}
.cfx-usermenu-item:hover { background: #eef4f7; }
/* Only when insight.js has actually put something above it. */
.insight-menu-slot:not(:empty) + .cfx-menu-logout {
    border-top: 1px solid #e3ebf0; margin-top: .35rem; padding-top: .5rem;
}
/* The name is the widest thing in the strip; drop it on a phone, keep the
   icon and caret so the menu is still findable. */
@media (max-width: 560px) { .cfx-user-btn .hu-name { display: none; } }

/* ── Home launchpad: direct doors to the deep data ───────────────────────────── */
.cfx-launch {
    display: grid; grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 1rem; margin: 1.5rem 0 .5rem;
}
@media (max-width: 1300px) { .cfx-launch { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 700px)  { .cfx-launch { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.cfx-launch-t {
    display: flex; flex-direction: column; align-items: center; gap: .35rem;
    padding: 1.1rem .75rem; text-align: center; text-decoration: none;
    background: #fff; border: 1px solid var(--border); border-radius: 14px;
    color: var(--text); cursor: pointer; font: inherit;
    box-shadow: 0 1px 3px rgba(16, 42, 67, .08);
    transition: transform .1s ease, box-shadow .12s ease, border-color .12s ease;
}
.cfx-launch-t:hover {
    transform: translateY(-2px); border-color: var(--chart-actual-border);
    box-shadow: 0 5px 14px rgba(16, 42, 67, .14);
}
.cfx-launch-t svg { width: 26px; height: 26px; color: var(--brand); }
.cfx-launch-t span { font-weight: 800; font-size: .92rem; }
.cfx-launch-t em { font-style: normal; font-size: .7rem; color: var(--text-muted); }
.cfx-launch-soon { opacity: .45; cursor: default; pointer-events: none; }

/* ── Voucher redemption economics + clickable chart bars ─────────────────── */
.cfx-econ-facts { display: flex; flex-wrap: wrap; gap: .6rem 1.4rem; margin: .35rem 0 .5rem; }
.cfx-econ-fact  { display: flex; flex-direction: column; min-width: 130px; }
.cfx-econ-v     { font-size: 1.25rem; font-weight: 700; color: var(--ink, #16323f); line-height: 1.2; }
.cfx-econ-l     { font-size: .72rem; color: var(--muted, #6b7f8a); max-width: 220px; }
.cfx-ent-bar-link { cursor: pointer; }
.cfx-ent-bar-link:hover rect[rx] { fill: var(--chart-actual-border); }
.cfx-ent-bar-link:hover text { font-weight: 700; }

/* ── Directory lens (organisations / group types / products / suppliers) ──── */
.cfx-dir-filter { display: block; width: calc(100% - 1.5rem); margin: .5rem .75rem;
    padding: .45rem .65rem; border: 1px solid var(--line, #d7e0e5); border-radius: 8px;
    font: inherit; font-size: .85rem; background: #fff; }
.cfx-dir-filter:focus { outline: none; border-color: var(--chart-actual-border, #2b7a9b); }
.cfx-dir-remote-head { display: block; padding: .6rem .75rem .2rem; }
a.cfx-ent-meth-row.cfx-dir-row { text-decoration: none; color: inherit; border-radius: 6px; }
a.cfx-ent-meth-row.cfx-dir-row:hover { background: var(--panel-hover, #eef4f7); }

/* ── Over-budget watchlist (home, third column when Costs is expanded) ─────── */
.cfx-areas.cfx-focus-costs .cfx-alist-watch { display: block; }
.cfx-watch-row { display: flex; justify-content: space-between; align-items: center; gap: .75rem;
    padding: 10px 14px; margin-bottom: .5rem; text-decoration: none; color: inherit;
    background: #fdf3f2; border: 1px solid #f2c9c4; border-left: 4px solid #c0392b;
    border-radius: 10px; }
.cfx-watch-row:hover { background: #fbe9e7; }
.cfx-watch-name { display: flex; flex-direction: column; min-width: 0; font-weight: 600;
    font-size: .9rem; color: #16323f; }
.cfx-watch-name em { font-style: normal; font-weight: 400; font-size: .72rem; color: var(--muted, #6b7f8a); }
.cfx-watch-fig { display: flex; flex-direction: column; align-items: flex-end; white-space: nowrap;
    font-weight: 700; font-size: .9rem; color: #c0392b; }
.cfx-watch-fig em { font-style: normal; font-weight: 400; font-size: .72rem; color: var(--muted, #6b7f8a); }
.cfx-watch-none, .cfx-watch-note { font-size: .78rem; color: var(--muted, #6b7f8a); padding: 0 2px; }
.cfx-watch-total { display: flex; flex-direction: column; align-items: flex-start;
    padding: 12px 14px; margin-bottom: .6rem; background: #c0392b; border-radius: 10px; }
.cfx-watch-total-v { font-size: 1.35rem; font-weight: 800; color: #fff; line-height: 1.15; }
.cfx-watch-total-l { font-size: .74rem; color: #f6d9d5; }

/* Cash-per-space KPI strip (basket streams: Online / Camping) */
.cfx-cps-kpis { margin: .25rem 0 1rem; }

/* Residentials lens */
.cfx-res-sub { display: block; font-style: normal; font-size: .72rem; color: var(--muted, #6b7f8a); }
.cfx-res-row .pay-name a { color: inherit; }

/* Activity economics (OAP) table */
.cfx-oap-tablewrap { overflow-x: auto; }
.cfx-oap-table { width: 100%; border-collapse: collapse; font-size: .85rem; }
.cfx-oap-table th { text-align: left; font-size: .7rem; text-transform: uppercase; letter-spacing: .04em;
    color: var(--muted, #6b7f8a); padding: .4rem .6rem; border-bottom: 1px solid var(--line, #e3eaee); }
.cfx-oap-table td { padding: .45rem .6rem; border-bottom: 1px solid var(--line, #eef2f5); white-space: nowrap; }
.cfx-oap-row:hover td { background: var(--panel-hover, #f2f7fa); }
.cfx-oap-name a { font-weight: 600; color: inherit; text-decoration: none; }
.cfx-oap-name a:hover { text-decoration: underline; }
.cfx-oap-name em { display: block; font-style: normal; font-size: .7rem; color: var(--muted, #6b7f8a); }
.cfx-oap-occ { min-width: 130px; }
.cfx-oap-occbar { display: inline-block; vertical-align: middle; width: 64px; height: 8px; margin-right: .45rem;
    background: #e8eef2; border-radius: 4px; overflow: hidden; }
.cfx-oap-occbar span { display: block; height: 100%; background: var(--chart-actual-border, #2b7a9b); border-radius: 4px; }
.cfx-oap-occbar .cfx-oap-occ-hi { background: #1e8e5a; }
.cfx-oap-occbar .cfx-oap-occ-lo { background: #c0392b; }
.cfx-oap-table th { cursor: pointer; user-select: none; }
.cfx-oap-table th:hover { color: var(--chart-actual-border, #2b7a9b); }
.cfx-oap-table th.cfx-oap-desc::after { content: ' \25BE'; }
.cfx-oap-table th.cfx-oap-asc::after  { content: ' \25B4'; }
.cfx-oap-row { cursor: pointer; }
.cfx-oap-name a { color: var(--chart-actual-border, #2b7a9b); }
.cfx-oap-vch { color: #1e8e5a; font-weight: 600; }
.cfx-av-sect { margin: .8rem 0 .3rem; font-size: .72rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .06em; color: var(--muted, #6b7f8a); }

/* ── Heat maps: slot grid + year calendar (activity supply planning) ───────── */
.cfx-heat { border-collapse: separate; border-spacing: 3px; font-size: .72rem; }
.cfx-heat th { font-weight: 600; color: var(--muted, #6b7f8a); padding: 0 4px; text-align: center; }
.cfx-heat tbody th { text-align: right; }
.cfx-heat-c { border-radius: 4px; text-align: center; min-width: 52px; padding: 6px 4px;
    font-weight: 700; font-size: .74rem; color: #1c2f38; }
.cfx-heat-c em { display: block; font-style: normal; font-weight: 400; font-size: .62rem; opacity: .75; }
.cfx-heat-c.hn { background: #eef2f5; }
.cfx-heat-c.h0 { background: #e8968b; }
.cfx-heat-c.h1 { background: #f0b58a; }
.cfx-heat-c.h2 { background: #f4d488; }
.cfx-heat-c.h3 { background: #cfe3a2; }
.cfx-heat-c.h4 { background: #93cd8f; }
.cfx-heat-c.h5 { background: #4aa96c; color: #fff; }
.cfx-heat-c.h5 em { opacity: .85; }
.cfx-heat-key { display: flex; align-items: center; gap: .35rem; flex-wrap: wrap;
    margin-top: .6rem; font-size: .68rem; color: var(--muted, #6b7f8a); }
.cfx-heat-key .cfx-heat-c { min-width: 14px; width: 14px; height: 14px; padding: 0; display: inline-block; }

.cfx-cal { overflow-x: auto; padding-bottom: .25rem; }
.cfx-cal-months { display: flex; gap: 2px; font-size: .62rem; color: var(--muted, #6b7f8a); margin-bottom: 2px; }
.cfx-cal-months span { width: 13px; flex: 0 0 13px; overflow: visible; white-space: nowrap; }
.cfx-cal-months .cfx-cal-dowpad { width: 30px; flex: 0 0 30px; }
.cfx-cal-row { display: flex; gap: 2px; margin-bottom: 2px; align-items: center; }
.cfx-cal-dow { width: 30px; flex: 0 0 30px; font-size: .62rem; color: var(--muted, #6b7f8a); }
.cfx-cal-c { width: 13px; height: 13px; flex: 0 0 13px; border-radius: 3px; display: inline-block; }
.cfx-cal-c.hx { background: transparent; }
.cfx-cal-c.hn { background: #eef2f5; }
.cfx-cal-c.h0 { background: #e8968b; }
.cfx-cal-c.h1 { background: #f0b58a; }
.cfx-cal-c.h2 { background: #f4d488; }
.cfx-cal-c.h3 { background: #cfe3a2; }
.cfx-cal-c.h4 { background: #93cd8f; }
.cfx-cal-c.h5 { background: #4aa96c; }

/* ── Week planner ──────────────────────────────────────────────────────────── */
.cfx-plan-nav { display: flex; align-items: center; gap: .4rem; }
.cfx-plan-navbtn { padding: .25rem .55rem; border-radius: 8px; background: rgba(255,255,255,.15);
    color: #fff; text-decoration: none; font-size: .8rem; }
.cfx-plan-navbtn:hover { background: rgba(255,255,255,.28); }
.cfx-plan-week { color: #fff; font-weight: 700; font-size: .9rem; white-space: nowrap; }
.cfx-plan { border-collapse: separate; border-spacing: 3px; width: 100%; font-size: .78rem; }
.cfx-plan th { font-size: .68rem; text-transform: uppercase; letter-spacing: .04em;
    color: var(--muted, #6b7f8a); padding: 2px 6px; text-align: center; }
.cfx-plan th:first-child { text-align: left; }
.cfx-plan-name { white-space: nowrap; padding-right: .6rem; }
.cfx-plan-name a { font-weight: 600; color: inherit; text-decoration: none; }
.cfx-plan-name a:hover { text-decoration: underline; }
.cfx-plan-name em { display: block; font-style: normal; font-size: .68rem; color: var(--muted, #6b7f8a); }
.cfx-plan-c { border-radius: 6px; text-align: center; min-width: 74px; padding: 5px 4px; vertical-align: top; }
.cfx-plan-c strong { font-size: .95rem; }
.cfx-plan-c em { display: block; font-style: normal; font-size: .64rem; opacity: .8; }
.cfx-plan-c.h5 { color: #fff; }
.cfx-plan-more, .cfx-plan-trim { display: inline-block; margin-top: 2px; padding: 0 5px; border-radius: 8px;
    font-size: .62rem; font-weight: 700; }
.cfx-plan-more { background: #1e8e5a; color: #fff; }
.cfx-plan-trim { background: #c0392b; color: #fff; }
.cfx-plan-trend { text-align: center; font-weight: 700; white-space: nowrap; }
/* Purchase-clock blues (volume scale — distinct from the occupancy instruction reds/greens) */
.cfx-heat-c.bn { background: #eef2f5; }
.cfx-heat-c.b0 { background: #e2ecf3; }
.cfx-heat-c.b1 { background: #c4dbeb; }
.cfx-heat-c.b2 { background: #9cc4de; }
.cfx-heat-c.b3 { background: #6ba7cd; }
.cfx-heat-c.b4 { background: #3f88bb; color: #fff; }
.cfx-heat-c.b5 { background: #1d6399; color: #fff; }
.cfx-buyclock { margin: -0.4rem 0 1rem; }
.cfx-buyclock summary { cursor: pointer; font-size: .85rem; font-weight: 600; color: var(--ink, #16323f);
    padding: .3rem 0; }
.cfx-buyclock summary:hover { color: var(--chart-actual-border, #2b7a9b); }
.cfx-buyclock .card { margin-top: .5rem; }

/* Sales-by-hour drill (basket streams: pick a day → hour bars → baskets) */
.cfx-hr-row { display: flex; align-items: center; gap: .6rem; width: 100%; padding: 4px 6px;
    border: 0; background: transparent; cursor: pointer; border-radius: 8px; font: inherit; text-align: left; }
.cfx-hr-row:hover { background: var(--panel-hover, #f2f7fa); }
.cfx-hr-row.cfx-hr-on { background: #e3eff6; }
.cfx-hr-lbl { flex: 0 0 46px; font-size: .78rem; font-weight: 600; color: var(--muted, #6b7f8a); }
.cfx-hr-bar { flex: 1; height: 14px; background: #eef2f5; border-radius: 7px; overflow: hidden; }
.cfx-hr-fill { display: block; height: 100%; background: var(--chart-actual-border, #2b7a9b); border-radius: 7px; }
.cfx-hr-val { flex: 0 0 175px; text-align: right; font-size: .8rem; font-weight: 700; white-space: nowrap; }
.cfx-hr-val em { font-style: normal; font-weight: 400; font-size: .7rem; color: var(--muted, #6b7f8a); }
.cfx-hr-dethead { margin: .7rem 0 .35rem; font-size: .78rem; font-weight: 700; color: var(--ink, #16323f); }
.cfx-hr-basket { margin-bottom: .4rem; }

/* Hot right now (weekly heat leaderboards) */
.cfx-hot-fill { background: linear-gradient(90deg, #f0a35c, #e2653a); }
.cfx-hot-up   { color: #1e8e5a; font-size: .68rem; font-weight: 700; white-space: nowrap; }
.cfx-hot-down { color: #c0392b; font-size: .68rem; font-weight: 700; white-space: nowrap; }
.cfx-hot-flat { color: var(--muted, #6b7f8a); font-size: .7rem; }
.cfx-hot-new  { background: #e2653a; color: #fff; font-size: .6rem; font-weight: 700;
    padding: 0 5px; border-radius: 7px; vertical-align: middle; }

/* Cost-area rows: green bar = % of own budget spent (red once over) */
.cfx-ex-bud { margin-bottom: 3px; }
.cfx-ex-budfill { height: 100%; background: #2f9e63; border-radius: inherit; }
.cfx-ex-budfill.cfx-ex-budover { background: #c0392b; }

/* ── Mobile pass (2026-07-04) ──────────────────────────────────────────────── */
/* Wide heat/slot tables scroll inside their card instead of stretching the page */
.cfx-ent-card { overflow-x: auto; }
/* Planner week nav on the light mobile strip (header is hidden on phones) */
.cfx-plan-nav-light .cfx-plan-navbtn { background: var(--brand, #16607a); }
.cfx-plan-nav-light .cfx-plan-navbtn:hover { background: var(--brand-dark, #104b60); }
.cfx-plan-nav-light .cfx-plan-week { color: var(--ink, #16323f); }
@media (max-width: 720px) {
    /* KPI tiles: two-up instead of a long single-column tower */
    .nd-kpis { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
    .nd-kpis .nd-kpi { margin: 0; }
    /* Hour-drill rows: give the bar room by shrinking the value column */
    .cfx-hr-val { flex-basis: 120px; }
    .cfx-hr-val em { display: block; }
    /* Watch rows + hot rows: keep figures readable */
    .cfx-watch-row { flex-wrap: wrap; }
    /* Planner: name column stays readable while the table scrolls */
    .cfx-plan-name { max-width: 160px; white-space: normal; }
}

/* ── BS sales funnel ───────────────────────────────────────────────────────── */
.cfx-fun { display: flex; flex-direction: column; gap: .55rem; padding: .3rem 0; }
.cfx-fun-row { display: flex; align-items: center; gap: .8rem; }
.cfx-fun-lbl { flex: 0 0 130px; text-align: right; font-weight: 700; font-size: .85rem; color: var(--ink, #16323f); }
.cfx-fun-lbl em { display: block; font-style: normal; font-weight: 400; font-size: .68rem; color: var(--muted, #6b7f8a); }
.cfx-fun-bar { flex: 1; background: #eef2f5; border-radius: 9px; overflow: hidden; }
.cfx-fun-fill { display: block; min-width: 40px; padding: 7px 10px; border-radius: 9px; box-sizing: border-box;
    background: linear-gradient(90deg, #3f88bb, #1d6399); color: #fff; font-weight: 800; font-size: .9rem; white-space: nowrap; }
.cfx-fun-won .cfx-fun-fill { background: linear-gradient(90deg, #37a06c, #1e7a4a); }
.cfx-fun-side { flex: 0 0 220px; font-size: .78rem; color: var(--muted, #6b7f8a); }
.cfx-fun-side strong { color: var(--ink, #16323f); }
.cfx-fun-side em { display: block; font-style: normal; font-size: .72rem; color: #c0392b; }
.cfx-fun-am { margin-left: auto; padding: .45rem .7rem; border: 1px solid var(--border, #d7e0e5);
    border-radius: 999px; font: inherit; font-size: .85rem; background: #fff; }
@media (max-width: 720px) {
    .cfx-fun-lbl { flex-basis: 86px; font-size: .74rem; }
    .cfx-fun-side { flex-basis: 120px; }
}

/* ── Funnel health (manager's home) ────────────────────────────────────────── */
.cfx-fh-hero { border-left: 5px solid var(--brand, #16607a); }
.cfx-fh-badge { padding: .3rem .8rem; border-radius: 999px; font-size: .78rem; font-weight: 800;
    letter-spacing: .04em; white-space: nowrap; }
.cfx-fh-alert { background: #c0392b; color: #fff; animation: cfx-fh-pulse 1.6s ease-in-out infinite; }
.cfx-fh-warn  { background: #f0a35c; color: #4a2c12; }
.cfx-fh-good  { background: #dff0e6; color: #1e7a4a; }
.cfx-fh-na    { background: #eef2f5; color: var(--muted, #6b7f8a); }
@keyframes cfx-fh-pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(192,57,43,.45); } 50% { box-shadow: 0 0 0 7px rgba(192,57,43,0); } }
.cfx-fh-detail { margin: -.2rem 0 .4rem; font-size: .78rem; color: var(--muted, #6b7f8a); }
.cfx-fh-facts { margin: .4rem 0 0; font-size: .78rem; color: var(--muted, #6b7f8a); }
.cfx-fh-seglink { color: inherit; text-decoration: none; }
.cfx-fh-seglink:hover { color: var(--chart-actual-border, #2b7a9b); }
.cfx-run-wide { max-height: 230px; }
.cfx-fh-hero .cfx-ent-svg { display: block; }
.cfx-fh-hero .cfx-econ-facts { margin-top: .3rem; }
.cfx-fh-hero .card-toolbar { margin-bottom: .1rem; }
.cfx-fh-hero { margin-bottom: 1.4rem; }

/* Weather radar */
.cfx-wx-radar { max-height: 430px; max-width: 640px; margin: 0 auto; display: block; }
.cfx-wx-axis { font-size: 13px; font-weight: 700; fill: #16323f; }
.cfx-wx-leg { display: inline-block; width: 14px; height: 14px; border-radius: 4px; vertical-align: -2px; }
.cfx-wx-hero .cfx-heat-key { justify-content: center; font-size: .78rem; }

/* ═══ INSIGHT personalisation: pins menu + panel customise (2026-07-06) ═══ */
.insight-user-btn { cursor: pointer; user-select: none; border-radius: 6px; padding: .25rem .5rem; }
.insight-user-btn:hover { background: rgba(255,255,255,.14); }
.insight-menu { display: none; position: absolute; top: calc(100% + 8px); right: 0; z-index: 260;
    min-width: 270px; max-width: 340px; background: #fff; color: #16323f;
    border: 1px solid #d5dee4; border-radius: 10px; box-shadow: 0 10px 30px rgba(10,40,60,.18);
    padding: .45rem; }
.insight-menu-open { display: block; }
.insight-menu-head { font-size: .68rem; font-weight: 800; text-transform: uppercase;
    letter-spacing: .06em; color: #6b8593; padding: .35rem .5rem .2rem; }
.insight-menu-empty { font-size: .8rem; color: #6b8593; padding: .2rem .5rem .45rem; }
.insight-pin-row { display: flex; align-items: center; gap: .25rem; border-radius: 7px; padding: .1rem .2rem; }
.insight-pin-row:hover { background: #eef4f7; }
.insight-pin-link { flex: 1; padding: .32rem .3rem; font-size: .86rem; font-weight: 600;
    color: #135e77; text-decoration: none; border-radius: 6px; overflow: hidden;
    text-overflow: ellipsis; white-space: nowrap; }
.insight-pin-btn { border: 0; background: none; cursor: pointer; font-size: .78rem; color: #8aa2ae;
    padding: .2rem .3rem; border-radius: 5px; visibility: hidden; }
.insight-pin-row:hover .insight-pin-btn { visibility: visible; }
.insight-pin-btn:hover { background: #dbe7ee; color: #16323f; }
.insight-pin-del:hover { color: #b41f2e; }
.insight-menu-act { display: block; width: 100%; text-align: left; border: 0; background: none;
    cursor: pointer; font: inherit; font-size: .86rem; font-weight: 600; color: #16323f;
    padding: .42rem .5rem; border-radius: 7px; }
.insight-menu-act:hover { background: #eef4f7; }
.insight-menu-sep { border-top: 1px solid #e3ebf0; margin: .35rem .2rem; }
.insight-menu-hidden { font-weight: 500; color: #135e77; padding-left: 1.1rem; }

/* hidden panels */
.insight-hidden { display: none !important; }
body.insight-edit .insight-hidden { display: block !important; opacity: .35; }

/* customise mode */
body.insight-edit main .card[data-insight-panel] { position: relative; outline: 2px dashed #7fb3c8;
    outline-offset: 3px; cursor: grab; }
body.insight-edit main .card[data-insight-panel].insight-dragging { opacity: .45; cursor: grabbing; }
.insight-panel-tools { position: absolute; top: 6px; right: 6px; z-index: 40; display: flex;
    gap: .3rem; align-items: center; background: #16323f; color: #fff; border-radius: 8px;
    padding: .18rem .45rem; box-shadow: 0 3px 10px rgba(10,40,60,.3); }
.insight-grip { cursor: grab; font-size: 1rem; line-height: 1; }
.insight-hide-btn { border: 0; background: none; color: #ffd9dd; cursor: pointer; font: inherit;
    font-size: .74rem; font-weight: 700; padding: 0 .1rem; }
.insight-hide-btn:hover { color: #fff; }
.insight-editbar { position: fixed; left: 50%; transform: translateX(-50%); bottom: 18px; z-index: 300;
    display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; max-width: 92vw;
    background: #16323f; color: #fff; border-radius: 12px; padding: .55rem .8rem;
    box-shadow: 0 12px 34px rgba(10,40,60,.4); }
.insight-editbar-lbl { font-size: .8rem; font-weight: 600; opacity: .9; }
.insight-editbar-btn { border: 0; border-radius: 8px; cursor: pointer; font: inherit;
    font-size: .8rem; font-weight: 700; padding: .35rem .7rem; background: #2c4d5d; color: #fff; }
.insight-editbar-btn:hover { background: #3a6274; }
.insight-editbar-done { background: #2e9e44; }
.insight-editbar-done:hover { background: #37b850; }
.insight-editbar-restore { border: 0; border-radius: 8px; cursor: pointer; font: inherit;
    font-size: .76rem; font-weight: 600; padding: .3rem .55rem; background: #234353; color: #cfe4ee; }
.insight-editbar-restore:hover { background: #2c5468; color: #fff; }

/* ═══ Till "what sold" panel (area view, Square streams) ═══ */
.sq-sold-grp { border-bottom: 1px solid #eef2f5; padding: .15rem 0; }
.sq-sold-grp > summary { list-style: none; cursor: pointer; }
.sq-sold-grp > summary::-webkit-details-marker { display: none; }
.sq-sold-grp > summary .cfx-ent-meth-row { display: flex; align-items: center; gap: .5rem; }
.sq-sold-grp[open] > summary .cfx-ent-meth-lbl { font-weight: 800; }
.sq-sold-item { display: flex; gap: .5rem; align-items: baseline; font-size: .8rem;
    padding: .14rem 0 .14rem 1rem; color: #41616f; }
.sq-sold-item > span:first-child { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sq-sold-iq { color: #8aa2ae; min-width: 2.6rem; text-align: right; }
.sq-sold-ig { font-weight: 700; min-width: 3.6rem; text-align: right; }
.sq-sold-more { color: #8aa2ae; font-style: italic; }

/* ═══ AURORA phase 1 (2026-07-06): fonts · KPI tiles · segmented control ═══
   From claude_design/ handoff, adopted with the agreed push-backs: light
   layout only, no mount animations, card headings untouched (panel keys). */
@font-face {
    font-family: 'Manrope';
    src: url('../fonts/manrope-var.woff2') format('woff2');
    font-weight: 400 800; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'JetBrains Mono';
    src: url('../fonts/jetbrains-mono-var.woff2') format('woff2');
    font-weight: 400 800; font-style: normal; font-display: swap;
}
body.cfx-app { font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    font-variant-numeric: tabular-nums; }
body.cfx-app .cfx-title { letter-spacing: -.02em; }

/* Numbers read as numbers: mono + tabular everywhere figures stack up */
body.cfx-app .nd-kpi-v, body.cfx-app .cfx-econ-v, body.cfx-app .cfx-ent-meth-val,
body.cfx-app .cfx-ment-val, body.cfx-app .cfx-oap-table td:not(.cfx-oap-name),
body.cfx-app .filt-yr, body.cfx-app .sq-sold-iq, body.cfx-app .sq-sold-ig {
    font-family: 'JetBrains Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;
    font-variant-numeric: tabular-nums;
}
body.cfx-app .cfx-oap-table td:not(.cfx-oap-name) { font-size: .82rem; }

/* KPI tiles — Aurora: label up top (small caps), big mono value, top accent */
body.cfx-app .nd-kpi {
    background: #fff; border: 1px solid #e6eaf1; border-left: 1px solid #e6eaf1;
    border-top: 3px solid #cdd8e0; border-radius: 14px; padding: .7rem .95rem .6rem;
    min-width: 9rem; gap: 1px; flex-direction: column-reverse; justify-content: flex-end;
    box-shadow: 0 1px 2px rgba(20,26,34,.04), 0 12px 28px -14px rgba(20,26,34,.14);
}
body.cfx-app .nd-kpi-v { font-size: 1.55rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.15; }
body.cfx-app .nd-kpi-l { font-size: .66rem; font-weight: 700; letter-spacing: .05em; line-height: 1.45; }
body.cfx-app .nd-kpi.cfx-ent-kpi-life { border-top-color: #12a06d; }
body.cfx-app .nd-kpi.cfx-ent-kpi-life .nd-kpi-v { color: #12a06d; }
body.cfx-app .nd-kpi.cfx-ent-kpi-owed { border-top-color: #e0455a; }
body.cfx-app .nd-kpi.cfx-ent-kpi-owed .nd-kpi-v { color: #e0455a; }

/* Segmented control — tabs for switching screens of the same data.
   Inset track; the active segment lifts out on a white panel. */
.cfx-seg { display: inline-flex; align-items: center; gap: 2px;
    background: #eaeef4; border: 1px solid #e2e8f0; border-radius: 12px; padding: 4px;
    max-width: 100%; overflow-x: auto; }
.cfx-seg > a, .cfx-seg > span {
    padding: .34rem .85rem; border-radius: 9px; font-size: .82rem; font-weight: 700;
    color: #5b7280; text-decoration: none; white-space: nowrap; line-height: 1.2; }
.cfx-seg > a:hover { color: #16323f; background: rgba(255,255,255,.55); }
.cfx-seg > .cfx-seg-on { background: #fff; color: #0d5a72;
    box-shadow: 0 1px 2px rgba(20,26,34,.1), 0 4px 10px -6px rgba(20,26,34,.25); }
.cfx-segbar { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin: 0 0 .9rem; }
.cfx-segbar .nd-doorbar-lbl { margin: 0; }

/* Two-tier lesson filter: discipline segments + a level dropdown in one well */
.cfx-lessonwell { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
    background: #f2f5f9; border: 1px solid #e6eaf1; border-radius: 14px;
    padding: .45rem .6rem; margin: 0 0 .9rem; }
.cfx-lessonwell .cfx-seg { background: #e4eaf1; }
.cfx-lesson-select { font: inherit; font-size: .82rem; font-weight: 700; color: #0d5a72;
    background: #fff; border: 1px solid #dbe4ec; border-radius: 9px; padding: .3rem .55rem;
    box-shadow: 0 1px 2px rgba(20,26,34,.06); cursor: pointer; }
.cfx-lesson-hint { margin-left: auto; font-size: .74rem; color: #8aa2ae; font-weight: 600; }

/* ═══ Global nav burger (header, all pages) — areas A→Z + dashboards ═══ */
.insight-nav-wrap { position: relative; display: flex; align-items: center; margin-right: .6rem; }
.insight-nav-btn { border: 0; background: rgba(255,255,255,.12); color: #fff; font-size: 1.05rem;
    line-height: 1; padding: .42rem .6rem; border-radius: 8px; cursor: pointer; }
.insight-nav-btn:hover { background: rgba(255,255,255,.22); }
.insight-nav-panel { left: 0; right: auto; top: calc(100% + 8px); max-height: 78vh; overflow-y: auto; }
.insight-nav-panel .insight-menu-act { padding: .34rem .5rem; }

/* nav burger lives inside the header's first grid cell, beside the year trio */
body.cfx-app .cfx-header-year { display: flex; align-items: center; gap: .6rem; }

/* ═══ Search palette: bigger panel + tick-where-to-look chips ═══ */
.cfx-search-panel { width: min(840px, 94vw); }
.cfx-search-list { max-height: 60vh; }
.cfx-search-chips { display: flex; flex-wrap: wrap; gap: .35rem; padding: .55rem .8rem;
    border-bottom: 1px solid var(--border); background: #f7f9fc; }
.cfx-search-chip { border: 1px solid #dbe4ec; background: #fff; color: #5b7280;
    font: inherit; font-size: .78rem; font-weight: 700; padding: .26rem .7rem;
    border-radius: 999px; cursor: pointer; }
.cfx-search-chip:hover { color: #16323f; border-color: #b9cad6; }
.cfx-search-chip.on { background: #0d5a72; border-color: #0d5a72; color: #fff; }

/* ═══ P1: area dashboards' range mode surfaced (was display:none) ═══ */
.cfx-rangebar { margin-bottom: .9rem; }
.cfx-seg > button.dash-mode-btn { border: 0; background: none; cursor: pointer; font: inherit;
    padding: .34rem .85rem; border-radius: 9px; font-size: .82rem; font-weight: 700;
    color: #5b7280; line-height: 1.2; }
.cfx-seg > button.dash-mode-btn:hover { color: #16323f; background: rgba(255,255,255,.55); }
.cfx-seg > button.dash-mode-btn.active { background: #fff; color: #0d5a72;
    box-shadow: 0 1px 2px rgba(20,26,34,.1), 0 4px 10px -6px rgba(20,26,34,.25); }
.cfx-rangebar #ctrl_range { display: inline-flex; align-items: center; gap: .4rem; }
.cfx-rangebar #ctrl_range.hidden { display: none; }
.cfx-rangebar #ctrl_range .filt-label { font-size: .74rem; font-weight: 700; color: #5b7280; }
.cfx-rangebar #ctrl_range input[type="date"] { font: inherit; font-size: .82rem; font-weight: 700;
    color: #0d5a72; background: #fff; border: 1px solid #dbe4ec; border-radius: 9px;
    padding: .3rem .55rem; box-shadow: 0 1px 2px rgba(20,26,34,.06); }
.cfx-rangebar #ctrl_range .btn { font: inherit; font-size: .82rem; font-weight: 700;
    background: #0d5a72; color: #fff; border: 1px solid #0d5a72; border-radius: 9px;
    padding: .3rem .7rem; cursor: pointer; }

/* ── Sales page (George's landing, 2026-07-08): inline spark bars in table cells ── */
.cfx-spark { display: inline-flex; align-items: flex-end; gap: 1px; height: 18px; vertical-align: middle; }
.cfx-spark i { width: 6px; min-height: 1px; background: #9ec5d8; border-radius: 1px 1px 0 0; display: block; }
.cfx-spark i.sk-hi { background: #0d5a72; }


/* ── Period headline blocks on basket areas (George, 2026-08-21) ───────────── */
/* The shared .nd-kpi is column-REVERSE so its markup reads value-then-label.
   These blocks carry a third line, so they opt back into normal order and are
   written in visual order instead — far easier to follow than a reversed
   three-part block. */
.cfx-period-kpis { margin: .25rem 0 1rem; }
.cfx-period-kpis .nd-kpi { flex: 1 1 12rem; }
body.cfx-app .cfx-period-kpis .nd-kpi { flex-direction: column; gap: 3px; justify-content: flex-start; }
.cfx-period-kpis .nd-kpi-l em { font-style: normal; text-transform: none; letter-spacing: 0;
    font-weight: 600; opacity: .8; }
.nd-kpi-sub { display: flex; flex-wrap: wrap; gap: .55rem; font-size: .72rem;
    color: var(--text-muted); font-variant-numeric: tabular-nums; margin-top: .1rem; }
.nd-kpi-sub b { font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
    font-size: .92em; opacity: .75; }
/* DIRECT children only. This styles the Week/Month/YTD figures on the "Income
   today" line; the prior-year figures are nested one level deeper inside
   .cfx-py and must keep their own up/down colour. Unscoped, this rule was more
   specific than .cfx-pos/.cfx-neg and silently flattened them. */
.nd-kpi-sub > i { font-style: normal; font-weight: 700; color: var(--text); }
.cfx-py { white-space: nowrap; font-weight: 700; }

/* ── What's selling: heading, its filter, then its results (George, 2026-08-21) ── */
.cfx-sell-h { margin: .2rem 0 .4rem; font-size: 1.05rem; font-weight: 800; letter-spacing: -.01em; }
.cfx-sell-filter { margin-top: 0; }
/* Its own line, hard left, under the From/To row (George, 2026-08-21). */
.cfx-sell-cmpwrap { flex-basis: 100%; }
/* Square, uppercase, no icon — sized to the FILTER label above it so the two
   read as one control block rather than a chip stuck on the end. */
.cfx-cmpbtn { display: inline-block; padding: .34rem .7rem; border: 1px solid var(--border);
    border-radius: 0; background: #fff; color: var(--text); text-decoration: none;
    font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.cfx-cmpbtn:hover { border-color: var(--chart-actual-border); color: var(--chart-actual-border); }
/* The panel's own title is now just the window it is showing. */
.cfx-sell-when { font-weight: 700; }

/* ITEM 1 (George, 2026-08-21): the Baskets panel is a desktop tool. On a phone
   it is a very long list of rows that pushes What's selling — the thing people
   actually open the page for — off the bottom of the screen. Hidden below the
   tablet breakpoint rather than removed, so nothing changes on desktop. */
@media (max-width: 900px) {
    #online_baskets_card { display: none !important; }
}

/* ── Online / Till Baskets rows (George, 2026-08-21) ───────────────────────── */
/* Header = booking ref + name. The basket's public_link is demoted to a second
   line: needed to find the basket in MendipSys, not needed at a glance. */
.bk-sub { display: block; font-size: .7rem; color: var(--text-muted);
    font-variant-numeric: tabular-nums; letter-spacing: .02em; margin-top: 1px; }
/* Expanded item lines carry the same Sub / Discount / Surcharge / Grand columns
   as the activity breakdown in What's selling. */
.bk-lines { display: block; }
.bk-line { display: grid; grid-template-columns: minmax(6rem, 2fr) minmax(7rem, 1.6fr)
    repeat(4, minmax(3.6rem, .8fr)); gap: .4rem; align-items: baseline;
    padding: .28rem .1rem; font-size: .78rem; }
.bk-line + .bk-line { border-top: 1px solid var(--border); }
.bk-head { font-size: .66rem; text-transform: uppercase; letter-spacing: .04em;
    color: var(--text-muted); font-weight: 700; border-bottom: 1px solid var(--border); }
.bk-l-t { font-weight: 600; }
.bk-l-w { color: var(--text-muted); font-size: .74rem; }
.bk-l-n { text-align: right; font-variant-numeric: tabular-nums; }
.bk-l-d { color: var(--chart-neg); }
.bk-l-s { color: var(--text-muted); }
.bk-l-g { font-weight: 700; color: var(--chart-pos); }
@media (max-width: 900px) {
    .bk-line { grid-template-columns: 1fr 1fr 1fr; }
    .bk-head { display: none; }
}
.cfx-period-kpis.is-loading { opacity: .55; transition: opacity .12s; }

/* ── Purchase clock, transposed: weekdays down, hours across (2026-08-21) ──── */
/* 18-ish hour columns need to be much narrower than the 7 weekday columns the
   upright version had, or the table runs off the card. Scrolls inside itself
   rather than pushing the page sideways. */
.cfx-heat-days { border-spacing: 2px; }
.cfx-heat-days .cfx-heat-c { min-width: 0; width: 2.1rem; padding: 5px 2px; font-size: .68rem; }
.cfx-heat-days thead th { font-size: .64rem; padding: 0 2px; font-variant-numeric: tabular-nums; }
.cfx-heat-days tbody th:first-child { min-width: 2.6rem; padding-right: 6px; }
.cfx-heat-days tbody tr:last-child th { font-weight: 700; }
/* The card, not the page, takes the overflow. */
.cfx-heat-wrap { overflow-x: auto; }

/* The period blocks stop where the summary panel above them stops, instead of
   running the full width of the canvas (George, 2026-08-21). */
.cfx-period-kpis { max-width: 1180px; }
/* Spelled-out T/D/I keys need room; the letter version was sized to one glyph. */
.cfx-tdi-full .cfx-tdi-k { width: auto; min-width: 4.6rem; text-align: left; }

/* ── Cashflow area header, second pass (George, 2026-08-21) ────────────────── */
/* The summary panel's label repeated the <h1> above it. With it gone, the three
   period columns take the whole width instead of ceding 240px to a blank cell. */
.cfx-pcard-nolabel .cfx-plabel { display: none; }
.cfx-area-summary .cfx-pcard-nolabel .cfx-prow { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* The stray date-range alert: the range is already in the header and the filter.
   Kept in the DOM because the JS writes load errors into it — so hide only the
   info state, never the warning. */
.cfx-hide-range.alert-info { display: none !important; }

/* Sized to the From/To labels beside it, not to a button. Pill, sentence case,
   white with blue text — matching the other chips on the canvas. Room above it
   so it is not crowded against the date inputs (George, 2026-08-21). */
.cfx-cmpbtn { font-size: .74rem; padding: .3rem .75rem; letter-spacing: .01em;
    text-transform: none; border-radius: 999px; margin-top: .5rem;
    background: #fff; color: var(--chart-actual-border);
    border-color: var(--chart-actual-border); font-weight: 700; }
.cfx-cmpbtn:hover { background: var(--chart-actual-border); color: #fff; }

/* "Synced 29 Aug, 02:15" under the period control, sharing the right edge of
   the "Showing …" line above it (George, 2026-08-29). Quiet: it is provenance,
   not a figure, and should not compete with the numbers below it. */
.mk-synced { margin: -.35rem 0 .7rem; text-align: right;
    font-size: .72rem; color: var(--text-muted); }
.mk-synced-bad { color: #b3541e; font-weight: 700; }
/* Says which table answered when the window predates the daily one. Provenance,
   not a warning — the figures are right, they are just month-grained. */
.mk-grain { color: var(--text-muted); font-style: italic; }

/* The filter is a group of controls, not a panel — it needs no tray of its own.
   Transparent against the page, no border, no padding to indent it. */
.cfx-sell-filter { background: transparent; border: 0; padding: 0; }

/* ── Activities / Vouchers / All (George, 2026-08-28) ──────────────────────
   Same pill as Compare Ranges, since it sits in the same visual family and
   does the same kind of job. Selected inverts to the blue fill, which is how
   every other chosen chip on the canvas reads. `on` is set on exactly one at
   a time, so the group never shows two answers at once. Sits inside the
   What's-selling card, above the lines it scopes. */
.cfx-kind { display: flex; gap: .35rem; flex-wrap: wrap;
    margin: 0 0 .55rem; padding: 0 0 .5rem; border-bottom: 1px solid var(--border); }
.cfx-kind .cfx-kindbtn { margin-top: 0; cursor: pointer; }
.cfx-kind .cfx-kindbtn.on,
.cfx-kind .cfx-kindbtn.on:hover {
    background: var(--chart-actual-border); border-color: var(--chart-actual-border);
    color: #fff; }
/* The voucher pill carries the amber it filters to, so the button and the bars
   it isolates are visibly the same subject. Kept to the border and text while
   unselected so it does not shout beside its neighbours. */
.cfx-kind .cfx-kindbtn[data-kind="vch"] {
    color: var(--chart-voucher-border); border-color: var(--chart-voucher-border); }
.cfx-kind .cfx-kindbtn[data-kind="vch"]:hover,
.cfx-kind .cfx-kindbtn[data-kind="vch"].on,
.cfx-kind .cfx-kindbtn[data-kind="vch"].on:hover {
    background: var(--chart-voucher-border); border-color: var(--chart-voucher-border);
    color: #fff; }

/* ── Cashflow header, third pass (George, 2026-08-21) ──────────────────────── */
/* The heading row lost its spacer cell with the panel's label, so it sits on
   the same three columns the panel does. */
.cfx-area-summary .cfx-phead-nolabel { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* Prior years: the year is a date and reads neutral; only the figure carries
   the up/down colour. */
.cfx-py { color: var(--text-muted); font-weight: 700; }
.cfx-py b { color: var(--text); font-weight: 700; }
.cfx-py i { font-style: normal; font-weight: 700; }
/* ── Baskets: paired cards match height, heatmap fills its card ─────────────
   (George, 2026-08-21) */
/* .cfx-ent-grid is align-items:start so short cards do not stretch. On the
   who/items row the two ARE a pair, so they should end level. */
.cfx-ent-grid-even { align-items: stretch; }
.cfx-ent-grid-even > .card { display: flex; flex-direction: column; }

/* The clock spreads across its card rather than sitting in a narrow block at
   the left: 100% width lets the hour columns share the space evenly. */
.cfx-heat-days { width: 100%; }
.cfx-heat-days .cfx-heat-c { width: auto; min-width: 1.6rem; }

/* ── Period control, two rows (George, 2026-08-23) ─────────────────────────── */
/* Row 1 is the calendar: Period · Full Year · Jan…Dec. Row 2 is everything that
   picks a rolling or custom window, indented to line up under the BUTTONS
   rather than under the label, with the resolved dates pushed right. */
.cfx-pwell { display: block; }
.cfx-pwell-row { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.cfx-pwell-row + .cfx-pwell-row { margin-top: .45rem; }
/* Matches the "Period" label's width so row 2 starts where the chips do. The
   label is uppercase .8rem; 3.6rem clears it without hard-coding a font metric. */
.cfx-pwell-gap { flex: 0 0 3.6rem; }
.cfx-pwell-showing { margin-left: auto; text-align: right; }
@media (max-width: 720px) {
    /* No room to indent on a phone — drop the gap and let it wrap naturally. */
    .cfx-pwell-gap { display: none; }
    .cfx-pwell-showing { margin-left: 0; width: 100%; text-align: left; }
}

/* ── SHELL MODE — Insight as a tab inside the staff app ──────────────────────
   html.ins-shell, set by the guard in includes/embed.php. The outer app
   supplies the branding and says who you are, so the logo and the user menu
   go. Everything that is NAVIGATION stays — burger, sidebar, year picker,
   search — and the Home button appears beside the year picker.

   Log out is hidden rather than merely tucked away: the sign-in is shared, so
   logging out of Insight inside the frame signs you out of the host app too.

   Deliberately NOT touching body.embed: that is the cashflow panel mode and it
   is load-bearing. */
html.ins-shell .cfx-header-logo,
html.ins-shell .app-header .header-logo { display: none !important; }

/* The chip STAYS: it is not decoration here, it is the pins and "Customise
   this page" menu, and those are as useful inside the frame as outside. Only
   the one item that must not be offered goes. */
html.ins-shell .cfx-menu-logout { display: none; }

/* …unless Log out was the ONLY thing in it. The legacy dashboards/* pages do
   not load insight.js, so their slot is never filled and hiding Log out would
   leave a button that opens an empty box — worse than no button (David's
   standing rule). :has() rather than JS on purpose: insight.js fills the slot
   on DOMContentLoaded, the same tick a script here would run, and the CSS
   re-evaluates itself when it does instead of racing it. */
html.ins-shell .cfx-usermenu:has(> .cfx-usermenu-pop > .insight-menu-slot:empty) {
    display: none;
}

html.ins-shell .cfx-home { display: inline-flex; }

/* The header shrinks to a thin nav strip rather than disappearing. */
html.ins-shell .app-header { padding: 0; min-height: 0; }
html.ins-shell .cfx-header-inner,
html.ins-shell .app-header .header-inner { min-height: 44px; }
html.ins-shell .cfx-header-year {
    justify-self: start; display: flex; align-items: center; gap: .6rem;
}

/* Legacy chrome (dashboard.php, admin/*, dashboards/*): the burger is the ONLY
   navigation on those pages and it lives INSIDE .header-actions — so that
   container must not be hidden. The first cut of shell mode hid it wholesale
   and left every legacy page with an empty strip and no way out. */
html.ins-shell .app-header .hamburger { display: inline-flex; }

/* No page needs its own top padding for a header that is now 44px. */
html.ins-shell .cfx-page { padding-top: .5rem; }