/* ===================================================================
   custom-analytics.css — Custom Analytics Settings (admin builder)

   Branding constraint (per spec): every visual matches the standard
   Analytics page. Brand colors locked:
     • Primary green:  #1E6332
     • Dark green:     #214A3E
     • Emerald accent: #2F8542
     • Beige bg:       #F4F0E9
     • Caramel accent: #C19A6B
     • Border:         #e5e1da
     • Subtle border:  #ede8df
   Card chrome: white bg, 14px radius, layered shadow matching Quick
   Actions and Continue Where You Left Off cards on the home page.
   =================================================================== */


/* ───────────────────────────────────────────────────
   1. PAGE ROOT
   Match the native Analytics page rhythm — generous gutters + a
   centered max-width so the page doesn't sprawl on wide monitors,
   and content has clear breathing room from the page edges.
   ─────────────────────────────────────────────────── */
#page-custom-analytics .dashboard-content {
    /* Generous gutters so the hero, search bar, and dashboard tiles
       have visible breathing room from the sidebar and right edge —
       matching the rhythm of the native Analytics page. */
    padding: 24px 40px 64px;
    background: transparent;
}

.ca-root {
    font-family: 'Futura PT', 'Jost', system-ui, -apple-system, sans-serif;
    color: #1f2937;
    width: 100%;
    max-width: none;
}

.ca-view { width: 100%; }


/* ───────────────────────────────────────────────────
   2. LIST VIEW — HERO
   White card with brand-green icon badge, more vertical room,
   layered shadow matching the native Analytics card style.
   ─────────────────────────────────────────────────── */
.ca-list-hero {
    background: linear-gradient(180deg, #ffffff 0%, #fafaf6 100%);
    border: 1px solid #e8e3da;
    border-radius: 16px;
    padding: 28px 32px;
    margin-bottom: 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.04),
        0 4px 14px rgba(33, 74, 62, 0.06);
}

.ca-list-hero-left { flex: 1; min-width: 0; }

.ca-page-title {
    font-size: 22px;
    font-weight: 700;
    color: #214A3E;
    margin: 0 0 6px 0;
    letter-spacing: -0.01em;
    display: flex;
    align-items: center;
    gap: 12px;
}
/* Brand-green icon badge — circular, matches native Analytics card heads */
.ca-page-title i {
    color: #fff;
    font-size: 16px;
    background: linear-gradient(135deg, #1E6332 0%, #2F8542 100%);
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(30, 99, 50, 0.25);
    flex-shrink: 0;
}

.ca-page-sub {
    font-size: 13.5px;
    color: #6b7280;
    margin: 0;
    line-height: 1.55;
    max-width: 640px;
}

.ca-list-hero-actions {
    display: flex;
    gap: 10px;
    flex-shrink: 0;
}


/* ───────────────────────────────────────────────────
   3. LIST VIEW — TOOLBAR (search + sort)
   Lifted into its own card so search + sort feel anchored,
   not floating loose between the hero and the dashboard grid.
   ─────────────────────────────────────────────────── */
.ca-list-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 18px;
    padding: 12px 16px;
    background: #fff;
    border: 1px solid #e8e3da;
    border-radius: 14px;
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.03),
        0 2px 8px rgba(33, 74, 62, 0.04);
}

.ca-search-wrap {
    position: relative;
    flex: 0 0 360px;
    max-width: 100%;
}
.ca-search-icon {
    position: absolute;
    top: 50%;
    left: 14px;
    transform: translateY(-50%);
    color: #9ca3af;
    font-size: 13px;
    pointer-events: none;
}
.ca-search-input {
    width: 100%;
    padding: 10px 14px 10px 38px;
    border: 1px solid #e5e1da;
    border-radius: 999px;
    background: #f8f6f1;
    font-size: 13.5px;
    font-family: inherit;
    color: #1f2937;
    transition: all 160ms ease;
}
.ca-search-input:focus {
    outline: none;
    background: #fff;
    border-color: #1E6332;
    box-shadow: 0 0 0 3px rgba(30, 99, 50, 0.12);
}

.ca-list-toolbar-right { display: flex; gap: 10px; }


/* ───────────────────────────────────────────────────
   4. DASHBOARD CARDS (the main list grid)
   ─────────────────────────────────────────────────── */
.ca-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 16px;
    /* A touch of horizontal padding so the leftmost / rightmost cards
       have visible breathing room from the page edges instead of
       sitting flush against the dashboard-content padding boundary. */
    padding: 4px 6px;
}

.ca-dash-card {
    background: #fff;
    border: 1px solid #e5e1da;
    border-radius: 14px;
    padding: 18px 18px 16px;
    cursor: pointer;
    position: relative;
    transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.04),
        0 4px 12px rgba(33, 74, 62, 0.07);
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-height: 170px;
}
.ca-dash-card:hover {
    transform: translateY(-2px);
    border-color: #1E6332;
    box-shadow:
        0 2px 4px rgba(0, 0, 0, 0.05),
        0 10px 24px rgba(33, 74, 62, 0.13);
}

.ca-dash-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}
.ca-dash-card-name {
    font-size: 16px;
    font-weight: 700;
    color: #1f2937;
    margin: 0;
    line-height: 1.3;
    flex: 1;
    min-width: 0;
    word-break: break-word;
}

.ca-dash-card-desc {
    font-size: 13px;
    color: #6b7280;
    line-height: 1.5;
    margin: 0;
    flex: 1;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.ca-dash-card-desc--placeholder {
    color: #cbd5e1;
    font-style: italic;
}

.ca-dash-card-stats {
    display: flex;
    gap: 14px;
    font-size: 11.5px;
    color: #6b7280;
    border-top: 1px solid #f3f0ec;
    padding-top: 10px;
}
.ca-dash-stat { display: inline-flex; align-items: center; gap: 5px; }
.ca-dash-stat i { color: #1E6332; font-size: 11px; }

.ca-dash-card-actions {
    /* Bottom-right placement keeps the action icons from overlapping the
       status pill (which sits at the top-right inside the card head).
       The right side of the stats footer is empty so we drop the action
       row there on hover — common pattern in Notion / Linear-style cards. */
    position: absolute;
    bottom: 12px;
    right: 12px;
    display: flex;
    gap: 4px;
    opacity: 0;
    transform: translateY(2px);
    transition: opacity 180ms ease, transform 180ms ease;
    /* White-fade backdrop so the icons read cleanly even if they sit
       briefly above the stats text on narrow cards */
    padding: 4px;
    background: linear-gradient(to left, #fff 60%, rgba(255, 255, 255, 0));
    border-radius: 8px;
    pointer-events: none;
}
.ca-dash-card:hover .ca-dash-card-actions {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.ca-dash-action {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    border: 1px solid #e5e1da;
    background: #fff;
    color: #6b7280;
    cursor: pointer;
    font-size: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 150ms ease;
}
.ca-dash-action:hover {
    background: #f4f0e9;
    color: #1E6332;
    border-color: #1E6332;
}
.ca-dash-action-danger:hover {
    background: #fee2e2;
    color: #dc2626;
    border-color: #fca5a5;
}


/* ───────────────────────────────────────────────────
   5. STATUS PILLS
   ─────────────────────────────────────────────────── */
.ca-status-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    line-height: 1.4;
    white-space: nowrap;
}
.ca-status-draft       { background: #f3f4f6; color: #6b7280; border: 1px solid #e5e7eb; }
.ca-status-published   { background: #dcfce7; color: #1E6332; border: 1px solid #bbf7d0; }
.ca-status-unpublished { background: #fef3c7; color: #92400e; border: 1px solid #fde68a; }


/* ───────────────────────────────────────────────────
   6. EMPTY / ERROR / SKELETON STATES
   ─────────────────────────────────────────────────── */
.ca-empty-state,
.ca-error-state {
    background: #fff;
    border: 1px solid #e5e1da;
    border-radius: 16px;
    padding: 60px 32px;
    text-align: center;
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.04),
        0 4px 14px rgba(33, 74, 62, 0.06);
}
.ca-empty-icon,
.ca-error-icon {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 18px;
    font-size: 30px;
}
.ca-empty-icon  { background: #f4f0e9; color: #1E6332; }
.ca-error-icon  { background: #fef2f2; color: #dc2626; }
.ca-empty-title,
.ca-error-title {
    font-size: 22px;
    font-weight: 700;
    color: #111827;
    margin: 0 0 8px;
}
.ca-empty-sub,
.ca-error-sub {
    font-size: 14px;
    color: #6b7280;
    margin: 0 auto 22px;
    max-width: 480px;
    line-height: 1.6;
}
.ca-list-empty-search {
    text-align: center;
    color: #6b7280;
    font-size: 14px;
    padding: 40px 20px;
    background: #fff;
    border: 1px dashed #e5e1da;
    border-radius: 12px;
}

.ca-dash-card-skel {
    background: #fff;
    border: 1px solid #e5e1da;
    border-radius: 14px;
    padding: 18px;
    height: 170px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.ca-skel-line {
    height: 12px;
    background: linear-gradient(90deg, #f3f0ec 0%, #ede8df 50%, #f3f0ec 100%);
    background-size: 200% 100%;
    animation: caSkelShimmer 1.4s linear infinite;
    border-radius: 6px;
}
.ca-skel-line-title { height: 18px; width: 70%; }
.ca-skel-line-short { width: 40%; }
@keyframes caSkelShimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}


/* ───────────────────────────────────────────────────
   7. BUTTONS (shared)
   ─────────────────────────────────────────────────── */
.ca-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 16px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    border: 1px solid transparent;
    transition: all 160ms ease;
    line-height: 1.3;
    white-space: nowrap;
}
.ca-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.ca-btn-primary {
    background: linear-gradient(135deg, #1E6332 0%, #2F8542 100%);
    color: #fff;
    border-color: #1E6332;
    box-shadow: 0 1px 2px rgba(30, 99, 50, 0.18);
}
.ca-btn-primary:hover {
    background: linear-gradient(135deg, #214A3E 0%, #1E6332 100%);
    box-shadow: 0 4px 10px rgba(30, 99, 50, 0.25);
    transform: translateY(-1px);
}

.ca-btn-secondary {
    background: #fff;
    color: #214A3E;
    border-color: #e5e1da;
}
.ca-btn-secondary:hover {
    background: #f4f0e9;
    border-color: #1E6332;
    color: #1E6332;
}

.ca-btn-ghost {
    background: transparent;
    color: #4b5563;
    border-color: transparent;
}
.ca-btn-ghost:hover {
    background: #f4f0e9;
    color: #1E6332;
}

.ca-btn-large {
    padding: 12px 22px;
    font-size: 14px;
    border-radius: 10px;
}

.ca-btn-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    border: 1px solid #e5e1da;
    background: #fff;
    color: #4b5563;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 160ms ease;
}
.ca-btn-icon:hover {
    background: #f4f0e9;
    color: #1E6332;
    border-color: #1E6332;
}


/* ───────────────────────────────────────────────────
   8. SELECT / TEXTAREA (shared)
   ─────────────────────────────────────────────────── */
.ca-select {
    padding: 8px 32px 8px 12px;
    border: 1px solid #e5e1da;
    border-radius: 8px;
    background-color: #fff;
    font-size: 13px;
    font-family: inherit;
    color: #1f2937;
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%231E6332' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    transition: all 160ms ease;
}
.ca-select:hover  { border-color: #c4bba9; }
.ca-select:focus  { outline: none; border-color: #1E6332; box-shadow: 0 0 0 3px rgba(30, 99, 50, 0.12); }

.ca-textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #e5e1da;
    border-radius: 8px;
    background: #fff;
    font-family: inherit;
    font-size: 13px;
    color: #1f2937;
    resize: vertical;
    min-height: 64px;
    transition: all 160ms ease;
}
.ca-textarea:focus {
    outline: none;
    border-color: #1E6332;
    box-shadow: 0 0 0 3px rgba(30, 99, 50, 0.12);
}


/* ───────────────────────────────────────────────────
   9. BUILDER VIEW — TOPBAR (sticky so it stays visible on long canvases)
   ─────────────────────────────────────────────────── */
.ca-builder-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 18px;
    position: sticky;
    top: 0;
    z-index: 30;
    background: #fff;
    border: 1px solid #e5e1da;
    border-radius: 14px;
    margin-bottom: 16px;
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.04),
        0 4px 14px rgba(33, 74, 62, 0.06);
}
.ca-builder-topbar-left {
    display: flex;
    align-items: center;
    gap: 14px;
    flex: 1;
    min-width: 0;
}
.ca-builder-name-block { flex: 1; min-width: 0; }
.ca-builder-name-input {
    width: 100%;
    border: 1px solid transparent;
    background: transparent;
    font-family: inherit;
    font-size: 18px;
    font-weight: 700;
    color: #1f2937;
    padding: 5px 8px;
    border-radius: 6px;
    transition: all 160ms ease;
}
.ca-builder-name-input:hover { background: #f4f0e9; }
.ca-builder-name-input:focus {
    outline: none;
    background: #fff;
    border-color: #1E6332;
    box-shadow: 0 0 0 3px rgba(30, 99, 50, 0.12);
}
.ca-builder-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 4px;
    padding: 0 8px;
}
.ca-saved-hint {
    font-size: 11.5px;
    color: #9ca3af;
}

.ca-builder-topbar-right {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}


/* ───────────────────────────────────────────────────
   10. BUILDER VIEW — BODY (3-column grid)
   ─────────────────────────────────────────────────── */
/* Flex (not grid) so panel widths can transition smoothly to 0 on Live Mode
   toggle. Grid-template-columns can transition in modern browsers but flex
   is broader-supported and animates predictably. */
.ca-builder-body {
    display: flex;
    gap: 16px;
    /* Anchor each column to the viewport so the canvas can scroll
       independently. 60px header + ~70px topbar + 20px page padding ≈ 150px. */
    height: calc(100vh - 200px);
    min-height: 500px;
    transition: gap 350ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.ca-builder-body > .ca-palette,
.ca-builder-body > .ca-props {
    flex-shrink: 0;
    transition:
        width 350ms cubic-bezier(0.22, 0.61, 0.36, 1),
        min-width 350ms cubic-bezier(0.22, 0.61, 0.36, 1),
        opacity 220ms ease,
        transform 350ms cubic-bezier(0.22, 0.61, 0.36, 1);
    transform: translateX(0);
}
.ca-builder-body > .ca-palette { width: 240px; }
.ca-builder-body > .ca-props   { width: 320px; }
.ca-builder-body > .ca-canvas-wrap {
    flex: 1;
    min-width: 0;
}


/* ───────────────────────────────────────────────────
   11. BUILDER — WIDGET PALETTE (left rail)
   ─────────────────────────────────────────────────── */
.ca-palette {
    background: #fff;
    border: 1px solid #e5e1da;
    border-radius: 14px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.04),
        0 4px 14px rgba(33, 74, 62, 0.06);
}
.ca-palette-head {
    padding: 12px 16px;
    background: linear-gradient(180deg, #fff 0%, #fafaf6 100%);
    border-bottom: 1px solid #ede8df;
    font-size: 12px;
    font-weight: 700;
    color: #214A3E;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    display: flex;
    align-items: center;
    gap: 8px;
}
.ca-palette-head i { color: #1E6332; }

.ca-palette-list {
    flex: 1;
    overflow-y: auto;
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ca-palette-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    border-radius: 8px;
    border: 1px solid transparent;
    cursor: grab;
    transition: all 150ms ease;
    user-select: none;
}
.ca-palette-item:hover {
    background: #f4f0e9;
    border-color: #ede8df;
    transform: translateX(2px);
}
.ca-palette-item:active,
.ca-palette-item.is-pressing { cursor: grabbing; }
.ca-palette-item.is-dragging {
    opacity: 0.55;
    background: #f0f7f1;
    border-color: #1E6332;
    box-shadow: 0 4px 12px rgba(30, 99, 50, 0.15);
}
.ca-palette-item-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: #f4f0e9;
    color: #1E6332;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 13px;
}
.ca-palette-item-text { flex: 1; min-width: 0; }
.ca-palette-item-label {
    font-size: 12.5px;
    font-weight: 600;
    color: #1f2937;
    line-height: 1.3;
}
.ca-palette-item-desc {
    font-size: 11px;
    color: #6b7280;
    line-height: 1.3;
    margin-top: 2px;
}

.ca-palette-foot {
    padding: 12px 16px;
    background: #fafaf6;
    border-top: 1px solid #ede8df;
}
.ca-palette-hint {
    font-size: 11px;
    color: #9ca3af;
    margin: 0;
    line-height: 1.4;
}


/* ───────────────────────────────────────────────────
   12. BUILDER — CANVAS
   ─────────────────────────────────────────────────── */
.ca-canvas-wrap {
    background: #fff;
    border: 1px solid #e5e1da;
    border-radius: 14px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.04),
        0 4px 14px rgba(33, 74, 62, 0.06);
}
.ca-canvas-toolbar {
    padding: 10px 16px;
    background: linear-gradient(180deg, #fff 0%, #fafaf6 100%);
    border-bottom: 1px solid #ede8df;
    display: flex;
    align-items: center;
    gap: 10px;
}
.ca-canvas-toolbar-label {
    font-size: 11.5px;
    font-weight: 600;
    color: #214A3E;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.ca-canvas-toolbar-spacer { flex: 1; }
.ca-canvas-block-count {
    font-size: 11.5px;
    color: #6b7280;
    background: #f4f0e9;
    padding: 3px 9px;
    border-radius: 999px;
    font-weight: 600;
}
.ca-canvas-refresh {
    width: 26px;
    height: 26px;
    border-radius: 6px;
    border: 1px solid transparent;
    background: transparent;
    color: #6b7280;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    transition: all 160ms ease;
}
.ca-canvas-refresh:hover {
    background: #f4f0e9;
    color: #1E6332;
    border-color: #ede8df;
}
.ca-canvas-refresh:active i {
    animation: caRefreshSpin 600ms cubic-bezier(0.4, 0, 0.6, 1);
}
@keyframes caRefreshSpin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* Data-loading banner — sits below the canvas toolbar, in front of the
   widget grid, so users see immediately why widgets are blank. */
.ca-data-banner {
    margin: 0;
    padding: 10px 16px;
    background: linear-gradient(90deg, #fef3c7 0%, #fef9e7 100%);
    border-bottom: 1px solid #fde68a;
    color: #92400e;
    font-size: 12.5px;
    display: flex;
    align-items: center;
    gap: 10px;
    animation: caBannerSlideIn 280ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.ca-data-banner i { color: #d97706; }
.ca-data-banner > span { flex: 1; }
.ca-data-banner code {
    background: rgba(0, 0, 0, 0.08);
    padding: 1px 6px;
    border-radius: 3px;
    font-size: 11px;
    font-family: 'JetBrains Mono', 'Consolas', monospace;
    color: #214A3E;
}
/* Warn state — red, used after the grace window expires */
.ca-data-banner--warn {
    background: linear-gradient(90deg, #fef2f2 0%, #fff5f5 100%);
    border-bottom-color: #fecaca;
    color: #991b1b;
}
.ca-data-banner--warn i { color: #dc2626; }
.ca-data-banner--warn .ca-banner-action {
    border-color: #fecaca;
    color: #991b1b;
}
.ca-data-banner--warn .ca-banner-action:hover {
    background: #fef2f2;
    border-color: #dc2626;
}
.ca-banner-action {
    background: #fff;
    border: 1px solid #fde68a;
    color: #92400e;
    padding: 4px 10px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 11.5px;
    font-weight: 600;
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: all 150ms ease;
}
.ca-banner-action:hover {
    background: #fef3c7;
    border-color: #d97706;
}
@keyframes caBannerSlideIn {
    from { opacity: 0; transform: translateY(-6px); max-height: 0; }
    to   { opacity: 1; transform: translateY(0); max-height: 100px; }
}

.ca-canvas {
    flex: 1;
    overflow: auto;
    padding: 24px;
    background:
        linear-gradient(#f8f6f1 1px, transparent 1px) 0 0 / 100% 24px,
        linear-gradient(90deg, #f8f6f1 1px, transparent 1px) 0 0 / calc(100% / 12) 24px,
        #fcfaf5;
    /* Faint 12-column grid backdrop so admins can sense the column structure
       even when the canvas is empty. Doesn't interfere with widget rendering
       because widgets are opaque white cards. */
}

.ca-canvas-empty,
.ca-canvas-loading,
.ca-canvas-blocks-placeholder {
    text-align: center;
    padding: 60px 32px;
    background: #fff;
    border: 2px dashed #e5e1da;
    border-radius: 14px;
    margin: 20px;
    color: #6b7280;
}
.ca-canvas-empty-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: #f4f0e9;
    color: #1E6332;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    margin: 0 auto 16px;
}
.ca-canvas-empty-title {
    font-size: 18px;
    font-weight: 700;
    color: #1f2937;
    margin: 0 0 8px;
}
.ca-canvas-empty-sub {
    font-size: 13.5px;
    color: #6b7280;
    margin: 0 auto 20px;
    max-width: 380px;
    line-height: 1.5;
}

.ca-canvas-loading {
    border-style: solid;
    border-color: #ede8df;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
}
.ca-spinner {
    width: 36px;
    height: 36px;
    border: 3px solid #e5e1da;
    border-top-color: #1E6332;
    border-radius: 50%;
    animation: caSpin 700ms linear infinite;
}
@keyframes caSpin { to { transform: rotate(360deg); } }

.ca-canvas-blocks-placeholder i {
    font-size: 32px;
    color: #1E6332;
    margin-bottom: 12px;
}
.ca-canvas-blocks-placeholder p {
    margin: 4px 0;
    font-size: 13.5px;
}
.ca-canvas-blocks-hint {
    color: #9ca3af !important;
    font-size: 12px !important;
    font-style: italic;
}


/* ───────────────────────────────────────────────────
   13. BUILDER — PROPERTIES PANEL (right rail)
   ─────────────────────────────────────────────────── */
.ca-props {
    background: #fff;
    border: 1px solid #e5e1da;
    border-radius: 14px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.04),
        0 4px 14px rgba(33, 74, 62, 0.06);
}
.ca-props-head {
    padding: 12px 16px;
    background: linear-gradient(180deg, #fff 0%, #fafaf6 100%);
    border-bottom: 1px solid #ede8df;
    font-size: 12px;
    font-weight: 700;
    color: #214A3E;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    display: flex;
    align-items: center;
    gap: 8px;
}
.ca-props-head i { color: #1E6332; }
.ca-props-body {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
}
.ca-props-section { margin-bottom: 14px; }
.ca-props-label {
    font-size: 11.5px;
    font-weight: 700;
    color: #214A3E;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 6px;
    display: block;
}
.ca-props-help {
    font-size: 12px;
    color: #6b7280;
    margin-top: 6px;
    display: flex;
    align-items: flex-start;
    gap: 6px;
    line-height: 1.5;
}
.ca-props-help i { color: #C19A6B; margin-top: 2px; }
.ca-props-help-muted {
    font-size: 11.5px;
    color: #9ca3af;
    margin: 6px 0 0;
    font-style: italic;
}
.ca-props-divider {
    height: 1px;
    background: #ede8df;
    margin: 16px -16px;
}
.ca-props-empty {
    color: #9ca3af;
    font-size: 13px;
    text-align: center;
    padding: 20px 0;
    font-style: italic;
}


/* ───────────────────────────────────────────────────
   14. FIELD REGISTRY MODAL
   ─────────────────────────────────────────────────── */
.ca-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(3px);
    z-index: 10100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px;
    animation: caFadeIn 200ms ease;
}
@keyframes caFadeIn { from { opacity: 0; } to { opacity: 1; } }

.ca-modal {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.30);
    max-width: 920px;
    width: 100%;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: caModalIn 220ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
@keyframes caModalIn {
    from { opacity: 0; transform: translateY(12px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

.ca-modal-head {
    padding: 18px 24px;
    background: linear-gradient(135deg, #1E6332 0%, #2F8542 100%);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
}
.ca-modal-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 16px;
    font-weight: 700;
}
.ca-modal-close {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 150ms ease;
}
.ca-modal-close:hover {
    background: rgba(255, 255, 255, 0.32);
    transform: rotate(90deg);
}

.ca-fields-modal { /* inherits .ca-modal */ }

.ca-fields-intro {
    padding: 16px 24px;
    background: #fafaf6;
    border-bottom: 1px solid #ede8df;
    margin: 0;
    font-size: 13px;
    color: #4b5563;
    line-height: 1.55;
}
.ca-fields-intro strong { color: #214A3E; }

.ca-fields-tabs {
    display: flex;
    gap: 4px;
    padding: 12px 16px 0;
    border-bottom: 1px solid #ede8df;
    background: #fafaf6;
    flex-wrap: wrap;
}
.ca-fields-tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 14px;
    border: 1px solid #e5e1da;
    border-bottom-color: transparent;
    background: #f4f0e9;
    color: #4b5563;
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    border-radius: 8px 8px 0 0;
    transition: all 160ms ease;
    margin-bottom: -1px;
}
.ca-fields-tab:hover {
    background: #fff;
    color: #1E6332;
}
.ca-fields-tab.is-active {
    background: #fff;
    color: #1E6332;
    border-color: #ede8df;
    border-bottom-color: #fff;
    box-shadow: 0 -2px 0 0 #1E6332 inset;
}
.ca-fields-tab i { color: #1E6332; }
.ca-fields-tab-count {
    background: #1E6332;
    color: #fff;
    font-size: 10.5px;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 999px;
}

.ca-fields-body {
    flex: 1;
    overflow-y: auto;
    padding: 20px 24px 24px;
}

.ca-fields-mod-head {
    padding: 0 0 14px 14px;
    margin-bottom: 16px;
    border-bottom: 1px solid #ede8df;
}
.ca-fields-mod-head h3 {
    font-size: 16px;
    font-weight: 700;
    color: #214A3E;
    margin: 0 0 6px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.ca-fields-mod-head h3 i { color: #1E6332; }
.ca-fields-mod-head p {
    font-size: 13px;
    color: #6b7280;
    margin: 0;
    line-height: 1.6;
}

.ca-fields-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.ca-fields-table thead th {
    text-align: left;
    padding: 10px 12px;
    background: #fafaf6;
    font-size: 10.5px;
    font-weight: 700;
    color: #214A3E;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    border-bottom: 1px solid #ede8df;
}
.ca-fields-table tbody td {
    padding: 12px;
    border-bottom: 1px solid #f3f0ec;
    vertical-align: top;
}
.ca-fields-table tbody tr:last-child td { border-bottom: none; }
.ca-fields-table tbody tr:hover { background: #fafaf6; }

.ca-field-label {
    font-weight: 600;
    color: #1f2937;
    margin-bottom: 4px;
}
.ca-field-key {
    font-family: 'JetBrains Mono', 'Consolas', 'SF Mono', monospace;
    font-size: 11px;
    color: #6b7280;
    background: #f4f0e9;
    padding: 2px 6px;
    border-radius: 4px;
    display: inline-block;
}

.ca-type-pill {
    display: inline-block;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 600;
    line-height: 1.4;
    background: #f3f4f6;
    color: #4b5563;
    border: 1px solid #e5e7eb;
}
.ca-type-currency  { background: #dcfce7; color: #1E6332; border-color: #bbf7d0; }
.ca-type-integer   { background: #dcfce7; color: #1E6332; border-color: #bbf7d0; }
.ca-type-percent   { background: #dcfce7; color: #1E6332; border-color: #bbf7d0; }
.ca-type-date      { background: #dbeafe; color: #1e40af; border-color: #bfdbfe; }
.ca-type-enum      { background: #fef3c7; color: #92400e; border-color: #fde68a; }
.ca-type-string    { background: #f3f4f6; color: #4b5563; border-color: #e5e7eb; }
.ca-type-lookup    { background: #f4f0e9; color: #6b4a28; border-color: #e8dfd0; }

.ca-usable-pill {
    display: inline-block;
    padding: 2px 7px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    background: #fff;
    color: #6b7280;
    border: 1px solid #e5e1da;
    margin-right: 3px;
    margin-bottom: 3px;
}
.ca-usable-dimension { color: #1E6332; border-color: #bbf7d0; background: #f0fdf4; }
.ca-usable-measure   { color: #6b4a28; border-color: #e8dfd0; background: #f4f0e9; }
.ca-usable-filter    { color: #1e40af; border-color: #bfdbfe; background: #eff6ff; }
.ca-usable-display   { color: #4b5563; border-color: #e5e7eb; background: #f9fafb; }


/* ═══════════════════════════════════════════════════
   SESSION 2 — GRID, BLOCK SHELLS, WIDGET RENDERERS, PROPS INPUTS
   ═══════════════════════════════════════════════════ */


/* ───────────────────────────────────────────────────
   S2.1 — 12-col canvas grid (explicit positioning)
   Each block declares grid-column: X / span W and grid-row: Y / span H
   so widgets stay exactly where users place them. The grid backdrop
   fades to a clearer 12-col guide while drag-dropping.
   ─────────────────────────────────────────────────── */
.ca-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    /* grid-template-rows is set inline by _renderCanvas() based on the
       lowest block edge so the canvas grows to fit content. */
    grid-auto-rows: 100px; /* safety net — covers blocks that resize past the
                              currently-defined row count, before the next
                              full render rewrites grid-template-rows. */
    gap: 14px;
    padding: 4px;
    min-height: 100%;
    position: relative; /* anchor for the absolutely-positioned ghost */
}

.ca-canvas.is-drop-target {
    background:
        linear-gradient(rgba(30, 99, 50, 0.10) 1px, transparent 1px) 0 0 / 100% calc(100px + 14px),
        linear-gradient(90deg, rgba(30, 99, 50, 0.10) 1px, transparent 1px) 0 0 / calc(100% / 12) 100%,
        #f0f7f1;
    transition: background 160ms ease;
}


/* ───────────────────────────────────────────────────
   S2.1b — Drop-preview ghost
   Floats inside the grid in the same coordinate system as real blocks,
   so it always lines up perfectly with where the block will land.
   ─────────────────────────────────────────────────── */
.ca-block-ghost {
    background: rgba(30, 99, 50, 0.18);
    border: 2px dashed #1E6332;
    border-radius: 12px;
    pointer-events: none;
    /* Sit ABOVE the block being resized (z=6 via .ca-block.is-resizing).
       Without this, shrinking a block hid the ghost behind the still-large
       block footprint — the user only saw feedback when GROWING into empty
       cells. With z=10 the ghost is always visible: while growing it
       extends beyond the block, while shrinking it shows the new smaller
       footprint as a dashed outline inside the faded original block. */
    z-index: 10;
    transition: grid-column 80ms ease, grid-row 80ms ease;
    /* Soft inner glow so the outline reads even when overlapping the
       semi-transparent (opacity 0.4) resizing block below it */
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.6),
        0 0 0 1px rgba(30, 99, 50, 0.15);
}
.ca-block-ghost.is-invalid {
    background: rgba(220, 38, 38, 0.14);
    border-color: #dc2626;
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.6),
        0 0 0 1px rgba(220, 38, 38, 0.18);
}


/* ───────────────────────────────────────────────────
   S2.2 — Block shell
   ─────────────────────────────────────────────────── */
.ca-block {
    background: #fff;
    border: 1px solid #e5e1da;
    border-radius: 12px;
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.04),
        0 4px 12px rgba(33, 74, 62, 0.06);
    position: relative;
    overflow: hidden;
    cursor: pointer;
    transition:
        transform 180ms ease,
        box-shadow 180ms ease,
        border-color 180ms ease;
    display: flex;
    flex-direction: column;
    /* Mount animation — fades and lifts in subtly on first paint */
    animation: caBlockIn 380ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
@keyframes caBlockIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}
.ca-block:hover {
    border-color: #cdd5c8;
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.05),
        0 8px 20px rgba(33, 74, 62, 0.10);
}
.ca-block.is-selected {
    border-color: #1E6332;
    box-shadow:
        0 0 0 2px rgba(30, 99, 50, 0.25),
        0 8px 20px rgba(33, 74, 62, 0.13);
}
.ca-block.is-dragging {
    opacity: 0.55;
    transform: scale(0.98);
}

/* Drag handle bar at the top of the block.
   Shows on hover/select. Click and drag anywhere on this strip to move
   the widget. Coord chip on the right shows current grid position. */
.ca-block-handle {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 24px;
    background: linear-gradient(180deg, #fafaf6 0%, #fff 100%);
    border-bottom: 1px solid #ede8df;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 10px;
    font-size: 10.5px;
    font-weight: 600;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    cursor: grab;
    opacity: 0;
    transform: translateY(-100%);
    transition: opacity 180ms ease, transform 180ms ease;
    z-index: 2;
    user-select: none;
    touch-action: none;
}
.ca-block-handle:hover { background: #fafaf6; }
.ca-block-handle i { color: #C19A6B; }
.ca-block-handle-label {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ca-block-handle-coord {
    font-family: 'JetBrains Mono', 'Consolas', monospace;
    font-size: 9.5px;
    background: #f4f0e9;
    color: #1E6332;
    padding: 1px 6px;
    border-radius: 4px;
    letter-spacing: 0;
    text-transform: none;
    font-weight: 700;
}
.ca-block:hover .ca-block-handle,
.ca-block.is-selected .ca-block-handle {
    opacity: 1;
    transform: translateY(0);
}
.ca-block.is-dragging .ca-block-handle { cursor: grabbing; }


/* ── Resize handles ───────────────────────────────────
   Three handles per block: right edge (E), bottom edge (S), and a small
   solid corner grip (SE). They stay visually invisible until hover/select
   so the canvas isn't covered in dots. Pointer-events on `.ca-block-handle`
   capture the move drag; these capture resize drags. */
.ca-resize-handle {
    position: absolute;
    z-index: 4;
    opacity: 0;
    transition: opacity 180ms ease, background-color 160ms ease;
    background: transparent;
    touch-action: none;
}
.ca-block:hover .ca-resize-handle,
.ca-block.is-selected .ca-resize-handle { opacity: 1; }

.ca-resize-e {
    top: 24px;
    bottom: 0;
    right: -2px;
    width: 6px;
    cursor: ew-resize;
}
.ca-resize-s {
    left: 0;
    right: 0;
    bottom: -2px;
    height: 6px;
    cursor: ns-resize;
}
.ca-resize-se {
    bottom: 0;
    right: 0;
    width: 14px;
    height: 14px;
    cursor: nwse-resize;
    background:
        linear-gradient(135deg,
            transparent 0%, transparent 50%,
            #1E6332 50%, #1E6332 60%,
            transparent 60%, transparent 70%,
            #1E6332 70%, #1E6332 80%,
            transparent 80%, transparent 90%,
            #1E6332 90%, #1E6332 100%);
    border-radius: 0 0 10px 0;
}
.ca-resize-e:hover { background: rgba(30, 99, 50, 0.20); }
.ca-resize-s:hover { background: rgba(30, 99, 50, 0.20); }
.ca-resize-se:hover {
    background:
        linear-gradient(135deg,
            transparent 0%, transparent 35%,
            #1E6332 35%, #1E6332 100%);
}

.ca-block.is-resizing { z-index: 6; }
.ca-block.is-resizing .ca-block-content { opacity: 0.4; }

.ca-block-content {
    flex: 1;
    overflow: auto;
    padding: 14px 16px;
    /* No padding-top reservation for the handle bar. The bar is
       `position: absolute; top: 0` and overlays content when it fades in
       on hover (opacity 0 → 1) — reserving 30px of always-empty space
       made small widgets (h=1, ~100px tall) too cramped to display their
       full content (title + value + subtitle exceeded the available 56px,
       clipping the value out of view). The bar covers the top edge of
       content briefly on hover, which is standard overlay UX. */

    /* Establish a size container so widget contents (KPI value, gauge
       number, sparkline value, etc.) can scale fluidly with the block's
       actual rendered size via cqh / cqi units — see `.ca-kpi-value`
       below. Resizing a widget in the builder now reflows the typography
       in real time without ever overflowing the block. */
    container-type: size;
    container-name: cawidget;
}

/* Handle-bar inline action buttons (Edit settings + Remove). They live
   inside `.ca-block-handle` so they share its layout — no overlap with
   the bar's grip / label / coord chip. Show together with the handle bar
   on hover/select. */
.ca-handle-action {
    width: 18px;
    height: 18px;
    border-radius: 4px;
    border: 1px solid transparent;
    background: rgba(255, 255, 255, 0.6);
    color: #6b7280;
    cursor: pointer;
    font-size: 9.5px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 150ms ease;
    flex-shrink: 0;
    padding: 0;
    margin: 0;
}
.ca-handle-action + .ca-handle-action { margin-left: 2px; }
.ca-handle-action:hover {
    background: #f4f0e9;
    color: #1E6332;
    border-color: #1E6332;
}
.ca-handle-action-danger:hover {
    background: #fee2e2;
    color: #dc2626;
    border-color: #fca5a5;
}

.ca-block-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-height: 60px;
}
.ca-spinner-sm {
    width: 22px;
    height: 22px;
    border-width: 2px;
}


/* ───────────────────────────────────────────────────
   S2.3 — Widget shared bits
   ─────────────────────────────────────────────────── */
.ca-w {
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.ca-w-title {
    font-size: 13px;
    font-weight: 700;
    color: #214A3E;
    margin: 0;
    line-height: 1.3;
    /* Don't let long titles push the rest of the widget around */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ca-w-title-muted {
    color: #6b7280;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 10.5px;
    letter-spacing: 0.06em;
}

.ca-w-empty,
.ca-w-empty-state {
    display: flex;
    flex-direction: column;
    height: 100%;
    color: #9ca3af;
    font-size: 12.5px;
    font-style: italic;
}
.ca-w-empty-state-body {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 8px;
    text-align: center;
}
.ca-w-empty-state-body i {
    color: #C19A6B;
    font-size: 22px;
}

.ca-w-error {
    background: #fef2f2;
    color: #b91c1c;
    border: 1px solid #fecaca;
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.ca-w-soon {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #9ca3af;
    text-align: center;
    gap: 4px;
}
.ca-w-soon i {
    font-size: 22px;
    color: #C19A6B;
    margin-bottom: 4px;
}
.ca-w-soon-label {
    font-size: 13px;
    font-weight: 700;
    color: #4b5563;
}
.ca-w-soon-sub { font-size: 11px; }


/* ───────────────────────────────────────────────────
   S2.4 — KPI Card widget
   Bigger headline number + tighter typography hierarchy. The label
   is the small uppercase "tag" pattern used by financial dashboards;
   the value is the hero. Subtle fade-up animation on mount + value
   transition when data updates.
   ─────────────────────────────────────────────────── */
.ca-w-kpi {
    align-items: flex-start;
    justify-content: center;
    gap: 2px;
    /* Don't let the widget contents bleed past the block edge — combined
       with the fluid typography below, the KPI now fits whatever block
       size the user resizes to. */
    min-height: 0;
    overflow: hidden;
}
.ca-w-kpi .ca-w-title {
    /* Fluid: 9px floor for tiny blocks, 13px ceiling for large blocks,
       scales with the parent .ca-block-content's actual height. */
    font-size: clamp(9px, 11cqh, 13px);
    font-weight: 700;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    margin-bottom: 0;
    line-height: 1.2;
    flex-shrink: 0;
}
.ca-w-kpi .ca-w-title-muted {
    color: #9ca3af;
    font-weight: 600;
}
.ca-kpi-value {
    /* Hero number — scales between 20px (h=1 block, ~100px tall) and
       56px (h=3+ blocks, ~300px+). The 28cqh fluid mid-point matches
       the available content height after subtracting title + sub. */
    font-size: clamp(20px, 28cqh, 56px);
    font-weight: 700;
    color: #1E6332;
    letter-spacing: -0.025em;
    line-height: 1.0;
    margin: 0;
    font-variant-numeric: tabular-nums;
    transition: color 220ms ease;
    /* Mount animation — counts up by sliding in from below subtly */
    animation: caKpiIn 380ms cubic-bezier(0.22, 0.61, 0.36, 1);
    /* Truncate gracefully if the formatted value is unusually long
       (e.g. "$1,234,567,890") and the block is narrow */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    flex-shrink: 1;
}
.ca-kpi-value.ca-drillable {
    border-radius: 6px;
    padding: 2px 4px;
    margin: -2px -4px;
}
.ca-kpi-value.ca-drillable:hover {
    background: rgba(30, 99, 50, 0.06);
    color: #214A3E;
}
.ca-kpi-sub {
    font-size: clamp(10px, 11cqh, 13px);
    color: #6b7280;
    line-height: 1.3;
    font-weight: 500;
    margin-top: 2px;
    flex-shrink: 0;
    /* Truncate on narrow blocks instead of wrapping */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}
@keyframes caKpiIn {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}


/* ───────────────────────────────────────────────────
   S2.5 — Stat Row
   ─────────────────────────────────────────────────── */
.ca-w-stat-row {
    justify-content: center;
}
.ca-stat-row-items {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 18px;
    align-items: center;
    padding: 4px 0;
}
.ca-stat-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
    border-left: 3px solid #1E6332;
    padding-left: 12px;
    min-width: 0;
}
.ca-stat-item:first-child { /* visual variation across the row */ }
.ca-stat-item:nth-child(2) { border-left-color: #2F8542; }
.ca-stat-item:nth-child(3) { border-left-color: #C19A6B; }
.ca-stat-item:nth-child(4) { border-left-color: #214A3E; }
.ca-stat-item:nth-child(5) { border-left-color: #6b4a28; }

.ca-stat-value {
    font-size: 22px;
    font-weight: 700;
    color: #1E6332;
    letter-spacing: -0.01em;
    line-height: 1.1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ca-stat-label {
    font-size: 11px;
    color: #6b7280;
    font-weight: 500;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


/* ───────────────────────────────────────────────────
   S2.6 — Bar Chart
   ─────────────────────────────────────────────────── */
.ca-w-bar { gap: 6px; }
.ca-bar-list {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 7px;
    padding: 4px 0;
}
.ca-bar-row {
    display: grid;
    grid-template-columns: 110px 1fr 70px;
    gap: 10px;
    align-items: center;
    font-size: 12px;
}
.ca-bar-label {
    color: #4b5563;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 500;
}
.ca-bar-row.is-other .ca-bar-label {
    color: #9ca3af;
    font-style: italic;
}
.ca-bar-track {
    background: #f4f0e9;
    border-radius: 4px;
    height: 20px;
    overflow: hidden;
}
.ca-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #1E6332 0%, #2F8542 100%);
    border-radius: 4px;
    transition: width 400ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.ca-bar-row.is-other .ca-bar-fill {
    background: linear-gradient(90deg, #94a3b8 0%, #cbd5e1 100%);
}
.ca-bar-value {
    color: #1E6332;
    font-weight: 600;
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}


/* ───────────────────────────────────────────────────
   S2.7 — Donut Chart
   ─────────────────────────────────────────────────── */
.ca-w-donut { gap: 8px; }
.ca-donut-body {
    flex: 1;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 18px;
    align-items: center;
    min-height: 0;
}
.ca-donut-svg-wrap {
    position: relative;
    flex-shrink: 0;
}
.ca-donut-svg-wrap svg { display: block; }
.ca-donut-center {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}
.ca-donut-center-value {
    font-size: 22px;
    font-weight: 700;
    color: #214A3E;
    line-height: 1;
}
.ca-donut-center-label {
    font-size: 10.5px;
    color: #9ca3af;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-top: 2px;
    font-weight: 600;
}
.ca-donut-legend {
    display: flex;
    flex-direction: column;
    gap: 6px;
    overflow-y: auto;
    max-height: 100%;
    padding-right: 4px;
}
.ca-donut-legend-item {
    display: grid;
    grid-template-columns: 12px 1fr auto;
    gap: 8px;
    align-items: center;
    font-size: 12px;
}
.ca-donut-swatch {
    width: 12px;
    height: 12px;
    border-radius: 3px;
}
.ca-donut-legend-label {
    color: #4b5563;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ca-donut-legend-value {
    color: #1E6332;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}


/* ───────────────────────────────────────────────────
   S2.8 — Text / Header / Divider
   ─────────────────────────────────────────────────── */
.ca-w-text { gap: 4px; padding: 4px 0; }
.ca-w-text-empty {
    color: #cbd5e1;
    font-style: italic;
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.ca-text-h1 { font-size: 24px; font-weight: 700; color: #214A3E; margin: 0; line-height: 1.2; }
.ca-text-h2 { font-size: 18px; font-weight: 700; color: #214A3E; margin: 0; line-height: 1.25; }
.ca-text-h3 { font-size: 15px; font-weight: 600; color: #214A3E; margin: 0; line-height: 1.3; }
.ca-text-p  { font-size: 13.5px; color: #4b5563; margin: 0; line-height: 1.55; }

/* Universal "transparent block" modifier — applied via the Appearance
   toggle in the props panel. Strips the white card chrome (background,
   border, shadow) so the widget content floats directly on the canvas
   background. Same visual treatment as the always-transparent Spacer
   widget below, but available on every widget type. */
.ca-block.is-transparent {
    background: transparent !important;
    border: 1px dashed transparent;
    box-shadow: none !important;
}
body:not(.ca-viewer-mode) .ca-block.is-transparent:hover,
body:not(.ca-viewer-mode) .ca-block.is-transparent.is-selected {
    /* In builder mode, show a subtle dashed footprint on hover/select
       so the user knows where the widget's bounds are even though the
       chrome is hidden */
    border: 1px dashed #c4bba9;
    background: rgba(196, 187, 169, 0.04) !important;
}
body.ca-viewer-mode .ca-block.is-transparent,
body.ca-viewer-mode .ca-block.is-transparent:hover {
    /* In viewer mode (live published view), no outline, just floating
       widget content on the canvas */
    border: 0 !important;
    background: transparent !important;
}

/* Spacer / Line widget — completely transparent by default. The block
   shell loses its white card chrome (background, border, shadow) so the
   widget reads as pure breathing room on the canvas. The handle bar +
   resize handles are still visible on hover so the user can move/resize
   the spacer in builder mode; in viewer mode there's nothing visible
   except the optional centered line. */
.ca-block[data-block-type="divider"] {
    background: transparent !important;
    border: 1px dashed transparent;
    box-shadow: none !important;
}
/* Subtle dashed outline on hover/select in BUILDER mode only — gives
   the user a way to see the spacer's footprint while editing without
   adding visual weight to the published view */
body:not(.ca-viewer-mode) .ca-block[data-block-type="divider"]:hover,
body:not(.ca-viewer-mode) .ca-block[data-block-type="divider"].is-selected {
    border: 1px dashed #c4bba9;
    background: rgba(196, 187, 169, 0.04) !important;
}
/* In viewer mode (live published dashboard), the spacer is INVISIBLE
   except for the line if enabled. No outline, no background. */
body.ca-viewer-mode .ca-block[data-block-type="divider"],
body.ca-viewer-mode .ca-block[data-block-type="divider"]:hover {
    border: 0 !important;
    background: transparent !important;
}
.ca-w-divider {
    /* Center the optional line vertically in the block. No padding so
       the spacer's space-claim matches its grid footprint exactly. */
    justify-content: center;
    align-items: stretch;
    padding: 0;
    width: 100%;
    height: 100%;
}
.ca-w-divider--empty {
    /* Nothing to render — purely visual breathing room */
    height: 100%;
    width: 100%;
}
.ca-w-divider-line {
    /* The line itself. Width / margin / border are set inline by the
       renderer based on the user's settings. */
    height: 0;
    align-self: center;
}


/* ───────────────────────────────────────────────────
   S2.8b — Image widget
   URL-only image embed. The widget itself fills its block (no gap, no
   padding) so the image controls the entire visual area. The renderer
   sets object-fit / object-position / border-radius inline based on the
   user's settings. Shadow modifiers are applied via class.
   ─────────────────────────────────────────────────── */
.ca-w-image {
    /* Override .ca-w defaults — no flex gap, fill the block edge-to-edge */
    gap: 0;
    padding: 0;
    /* The block-content already has padding 14px 16px; the image uses
       100% of whatever the parent gives it, so it sits flush inside that
       padded area. To make the image go truly edge-to-edge of the block
       we'd need to negative-margin out of block-content; keeping the
       padded inset is the more dashboard-y look. */
    height: 100%;
    width: 100%;
    overflow: hidden;
}
.ca-w-image > img,
.ca-w-image > a {
    /* Image / link wrapper fills the widget */
    flex: 1;
    min-height: 0;
    min-width: 0;
}

/* Shadow modifiers — applied to the wrapper, then visible around the
   image's border-radius corners */
.ca-w-image-shadow-sm > img,
.ca-w-image-shadow-sm > a {
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.06),
        0 2px 6px rgba(0, 0, 0, 0.04);
}
.ca-w-image-shadow-md > img,
.ca-w-image-shadow-md > a {
    box-shadow:
        0 2px 4px rgba(0, 0, 0, 0.08),
        0 8px 16px rgba(0, 0, 0, 0.08);
}
.ca-w-image-shadow-lg > img,
.ca-w-image-shadow-lg > a {
    box-shadow:
        0 4px 8px rgba(0, 0, 0, 0.10),
        0 16px 32px rgba(0, 0, 0, 0.12);
}

/* Empty state — caramel-tinted placeholder when no URL is set */
.ca-w-image-empty {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #fefcf7 0%, #f9f3e8 100%);
    border: 2px dashed #e8dcc4;
    border-radius: 10px;
    color: #92704a;
    text-align: center;
    padding: 16px;
    overflow: hidden;
}
.ca-w-image-empty > i {
    font-size: clamp(20px, 24cqh, 36px);
    color: #C19A6B;
    margin-bottom: 2px;
}
.ca-w-image-empty-title {
    font-size: clamp(11px, 13cqh, 14px);
    font-weight: 700;
    color: #6B4A28;
    line-height: 1.2;
}
.ca-w-image-empty-sub {
    font-size: clamp(10px, 11cqh, 12px);
    color: #92704a;
    line-height: 1.35;
    max-width: 240px;
}

/* Broken-image fallback (replaces the <img> if it fails to load) */
.ca-w-image-broken {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: 100%;
    height: 100%;
    background: #fef2f2;
    border: 2px dashed #fca5a5;
    border-radius: 10px;
    color: #b91c1c;
    text-align: center;
    padding: 12px;
}
.ca-w-image-broken > i { font-size: clamp(18px, 20cqh, 28px); margin-bottom: 2px; }
.ca-w-image-broken > span { font-size: clamp(11px, 12cqh, 13px); font-weight: 600; }
.ca-w-image-broken > small { font-size: clamp(9px, 10cqh, 11px); color: #ef4444; }

/* Dark theme — keep image wrapper transparent so the image itself
   carries all the visual weight; only the empty / broken states need
   adjusted backgrounds */
body.dark-theme .ca-w-image-empty {
    background: linear-gradient(135deg, #1f2937 0%, #111827 100%);
    border-color: #374151;
    color: #cbd5e1;
}
body.dark-theme .ca-w-image-empty-title { color: #e2e8f0; }
body.dark-theme .ca-w-image-empty-sub   { color: #9ca3af; }
body.dark-theme .ca-w-image-broken {
    background: #1a0f0f;
    border-color: #5a1a1a;
    color: #fca5a5;
}


/* ───────────────────────────────────────────────────
   S2.9 — Properties panel — inputs / ranges / checkboxes / stat config
   ─────────────────────────────────────────────────── */
.ca-input {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid #e5e1da;
    border-radius: 6px;
    background: #fff;
    font-family: inherit;
    font-size: 12.5px;
    color: #1f2937;
    transition: all 160ms ease;
}
.ca-input:focus {
    outline: none;
    border-color: #1E6332;
    box-shadow: 0 0 0 3px rgba(30, 99, 50, 0.12);
}
.ca-input-sm {
    padding: 6px 8px;
    font-size: 12px;
    flex: 1;
    min-width: 0;
}

.ca-select-block {
    width: 100%;
}
.ca-select-mt { margin-top: 6px; }

.ca-btn-block {
    width: 100%;
    justify-content: center;
}
.ca-btn-danger {
    color: #dc2626 !important;
    border-color: #fca5a5 !important;
}
.ca-btn-danger:hover {
    background: #fee2e2 !important;
    border-color: #ef4444 !important;
}

/* Appearance toggle — Card vs Transparent (used in props panel for
   every widget). Two-tile picker with a swatch preview, label, and
   sub-line. Active tile gets a green accent. */
.ca-appearance-toggle {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}
.ca-appearance-btn {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding: 10px;
    background: #fff;
    border: 1.5px solid #e5e1da;
    border-radius: 8px;
    cursor: pointer;
    text-align: left;
    transition: all 150ms ease;
    font-family: inherit;
}
.ca-appearance-btn:hover {
    border-color: #c4bba9;
    background: #fafaf6;
}
.ca-appearance-btn.is-active {
    border-color: #1E6332;
    background: rgba(30, 99, 50, 0.05);
    box-shadow: 0 0 0 1px #1E6332;
}
.ca-appearance-swatch {
    width: 100%;
    height: 32px;
    border-radius: 6px;
    margin-bottom: 4px;
}
.ca-appearance-swatch--card {
    background: #fff;
    border: 1px solid #e5e1da;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 2px 6px rgba(33, 74, 62, 0.04);
}
.ca-appearance-swatch--transparent {
    /* Checkerboard pattern conveys "no fill" — universal UI convention */
    background-image:
        linear-gradient(45deg, #d1d5db 25%, transparent 25%),
        linear-gradient(-45deg, #d1d5db 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, #d1d5db 75%),
        linear-gradient(-45deg, transparent 75%, #d1d5db 75%);
    background-size: 10px 10px;
    background-position: 0 0, 0 5px, 5px -5px, -5px 0;
    background-color: #fff;
    border: 1px dashed #c4bba9;
}
.ca-appearance-label {
    font-size: 12.5px;
    font-weight: 600;
    color: #1f2937;
    line-height: 1.2;
}
.ca-appearance-btn.is-active .ca-appearance-label { color: #1E6332; }
.ca-appearance-sub {
    font-size: 10.5px;
    color: #9ca3af;
    line-height: 1.3;
}
body.dark-theme .ca-appearance-btn {
    background: #1f2937;
    border-color: #374151;
}
body.dark-theme .ca-appearance-btn:hover {
    background: #111827;
    border-color: #4b5563;
}
body.dark-theme .ca-appearance-btn.is-active {
    border-color: #2F8542;
    background: rgba(47, 133, 66, 0.10);
    box-shadow: 0 0 0 1px #2F8542;
}
body.dark-theme .ca-appearance-label { color: #e2e8f0; }
body.dark-theme .ca-appearance-btn.is-active .ca-appearance-label { color: #34d399; }
body.dark-theme .ca-appearance-sub { color: #94a3b8; }
body.dark-theme .ca-appearance-swatch--card {
    background: #111827;
    border-color: #374151;
}
body.dark-theme .ca-appearance-swatch--transparent {
    background-color: #0f172a;
    background-image:
        linear-gradient(45deg, #334155 25%, transparent 25%),
        linear-gradient(-45deg, #334155 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, #334155 75%),
        linear-gradient(-45deg, transparent 75%, #334155 75%);
}

/* Segmented 3-button group (used by Spacer alignment chooser) */
.ca-segmented-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
}
.ca-seg-btn {
    background: #fff;
    border: 1px solid #e5e1da;
    border-radius: 6px;
    padding: 8px;
    color: #6b7280;
    cursor: pointer;
    font-size: 13px;
    transition: all 150ms ease;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ca-seg-btn:hover {
    background: #f4f0e9;
    color: #1E6332;
    border-color: #c4bba9;
}
.ca-seg-btn.is-active {
    background: #1E6332;
    color: #fff;
    border-color: #1E6332;
}

/* Color picker row + presets (used by Spacer line color) */
.ca-color-row {
    display: flex;
    align-items: center;
    gap: 8px;
}
.ca-color-input {
    width: 40px;
    height: 32px;
    padding: 2px;
    border: 1px solid #e5e1da;
    border-radius: 6px;
    background: #fff;
    cursor: pointer;
    flex: 0 0 auto;
}
.ca-color-input::-webkit-color-swatch-wrapper { padding: 0; }
.ca-color-input::-webkit-color-swatch { border: none; border-radius: 4px; }
.ca-color-presets {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}
.ca-color-swatch {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, 0.1);
    cursor: pointer;
    transition: transform 150ms ease, box-shadow 150ms ease;
    padding: 0;
}
.ca-color-swatch:hover {
    transform: scale(1.15);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}
.ca-color-swatch.is-active {
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px #1E6332;
}

/* Dark theme overrides for new spacer prop controls */
body.dark-theme .ca-seg-btn {
    background: #1f2937;
    border-color: #374151;
    color: #cbd5e1;
}
body.dark-theme .ca-seg-btn:hover {
    background: #111827;
    color: #34d399;
    border-color: #4b5563;
}
body.dark-theme .ca-seg-btn.is-active {
    background: #2F8542;
    color: #fff;
    border-color: #2F8542;
}
body.dark-theme .ca-color-input {
    background: #111827;
    border-color: #374151;
}
body.dark-theme .ca-color-swatch.is-active {
    box-shadow: 0 0 0 2px #1f2937, 0 0 0 4px #2F8542;
}

.ca-range {
    width: 100%;
    -webkit-appearance: none;
    appearance: none;
    height: 4px;
    background: #ede8df;
    border-radius: 4px;
    outline: none;
    margin: 4px 0 2px;
}
.ca-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #1E6332;
    cursor: pointer;
    border: 2px solid #fff;
    box-shadow: 0 1px 3px rgba(30, 99, 50, 0.3);
}
.ca-range::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #1E6332;
    cursor: pointer;
    border: 2px solid #fff;
}

.ca-size-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
.ca-size-cell { display: flex; flex-direction: column; gap: 4px; }
.ca-size-label {
    font-size: 11px;
    color: #6b7280;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-weight: 500;
}
.ca-size-value {
    font-size: 11px;
    color: #1E6332;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.ca-checkbox-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.ca-checkbox-row {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 12px;
    padding: 4px;
    border-radius: 6px;
    transition: background 150ms ease;
}
.ca-checkbox-row:hover { background: #fafaf6; }
.ca-checkbox-row input[type="checkbox"] {
    accent-color: #1E6332;
    width: 14px;
    height: 14px;
    cursor: pointer;
}

.ca-count-badge {
    display: inline-block;
    background: #f4f0e9;
    color: #214A3E;
    padding: 2px 7px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 700;
    margin-left: 6px;
    text-transform: none;
    letter-spacing: 0;
}

.ca-stat-config-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 10px;
}
.ca-stat-config-row {
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    gap: 6px;
    align-items: center;
    padding: 6px;
    background: #fafaf6;
    border-radius: 6px;
    border: 1px solid #ede8df;
}
.ca-stat-config-row .ca-input,
.ca-stat-config-row .ca-select { font-size: 11.5px; padding: 6px 8px; }

.ca-icon-btn {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    border: 1px solid #e5e1da;
    background: #fff;
    color: #6b7280;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    flex-shrink: 0;
    transition: all 150ms ease;
}
.ca-icon-btn:hover { background: #f4f0e9; color: #1E6332; }
.ca-icon-btn-danger:hover {
    background: #fee2e2;
    color: #dc2626;
    border-color: #fca5a5;
}


/* ═══════════════════════════════════════════════════
   SESSION 3 — FILTER CASCADE, FILTER WIDGET, LINE CHART, DATA TABLE
   ═══════════════════════════════════════════════════ */


/* ───────────────────────────────────────────────────
   S3.1 — Shared filter UI (props panel — global + widget filters)
   ─────────────────────────────────────────────────── */
.ca-filter-block {
    background: linear-gradient(180deg, #fafaf6 0%, #f6f3ec 100%);
    border: 1px solid #ede8df;
    border-radius: 10px;
    padding: 12px;
    margin: 0 -2px;
}
.ca-filter-block-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}
.ca-filter-block-head .ca-props-label { margin-bottom: 0; }

.ca-filter-row {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-bottom: 12px;
}
.ca-filter-row:last-child { margin-bottom: 0; }
.ca-filter-mini-label {
    font-size: 10.5px;
    font-weight: 700;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    display: flex;
    align-items: center;
    gap: 6px;
}
.ca-filter-row-controls {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.ca-filter-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.ca-toggle-pill {
    cursor: pointer;
    border: 1px solid currentColor;
    transition: all 150ms ease;
    opacity: 0.55;
    user-select: none;
    font-family: inherit;
}
.ca-toggle-pill:hover { opacity: 0.85; transform: translateY(-1px); }
.ca-toggle-pill.is-active {
    opacity: 1;
    box-shadow: 0 1px 3px rgba(0,0,0,0.10);
}

.ca-date-custom {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
}
.ca-date-sep {
    color: #9ca3af;
    font-size: 11px;
    font-weight: 600;
}

.ca-link-btn {
    background: transparent;
    border: none;
    color: #1E6332;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: background 150ms ease;
    font-family: inherit;
}
.ca-link-btn:hover { background: rgba(30, 99, 50, 0.08); }


/* ───────────────────────────────────────────────────
   S3.2 — Multi-check dropdown (locations / insurance multi-select)
   ─────────────────────────────────────────────────── */
.ca-mcheck {
    position: relative;
    width: 100%;
}
.ca-mcheck-trigger {
    width: 100%;
    padding: 8px 32px 8px 12px;
    border: 1px solid #e5e1da;
    border-radius: 8px;
    background-color: #fff;
    font-size: 12.5px;
    font-family: inherit;
    color: #1f2937;
    cursor: pointer;
    text-align: left;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    transition: all 160ms ease;
}
.ca-mcheck-trigger:hover { border-color: #c4bba9; }
.ca-mcheck-trigger > span:first-child {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ca-mcheck-trigger > i {
    font-size: 10px;
    color: #1E6332;
    transition: transform 200ms ease;
    flex-shrink: 0;
}
.ca-mcheck.is-open .ca-mcheck-trigger {
    border-color: #1E6332;
    box-shadow: 0 0 0 3px rgba(30, 99, 50, 0.12);
}
.ca-mcheck.is-open .ca-mcheck-trigger > i { transform: rotate(180deg); }

.ca-mcheck-panel {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid #e5e1da;
    border-radius: 10px;
    box-shadow: 0 12px 28px rgba(33, 74, 62, 0.16);
    z-index: 50;
    padding: 8px;
    display: none;
    flex-direction: column;
    gap: 6px;
    max-height: 320px;
}
.ca-mcheck.is-open .ca-mcheck-panel { display: flex; }

.ca-mcheck-search {
    width: 100%;
    flex-shrink: 0;
}
.ca-mcheck-actions {
    display: flex;
    gap: 4px;
    padding: 0 4px;
    flex-shrink: 0;
}
.ca-mcheck-list {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}
.ca-mcheck-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    color: #1f2937;
    transition: background 150ms ease;
}
.ca-mcheck-item:hover { background: #fafaf6; }
.ca-mcheck-item input[type=checkbox] {
    accent-color: #1E6332;
    cursor: pointer;
    flex-shrink: 0;
}
.ca-mcheck-item span {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}


/* ───────────────────────────────────────────────────
   S3.3 — Filter Widget (runtime user filters on canvas)
   ─────────────────────────────────────────────────── */
.ca-w-filter { gap: 12px; }
.ca-w-filter .ca-w-title {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #214A3E;
}
.ca-w-filter .ca-w-title i { color: #C19A6B; }

.ca-userf-controls {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 14px;
    align-items: end;
}
.ca-userf-control {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
}
.ca-userf-label {
    font-size: 10.5px;
    font-weight: 700;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    display: flex;
    align-items: center;
    gap: 6px;
}
.ca-userf-row {
    display: flex;
    gap: 6px;
}
.ca-userf-row .ca-select { flex: 1; min-width: 0; }
.ca-userf-row .ca-select:first-child { flex: 0 0 100px; }

.ca-userf-reset {
    grid-column: 1 / -1;
    background: #fff;
    border: 1px solid #e5e1da;
    color: #6b7280;
    padding: 6px 12px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 11.5px;
    font-weight: 600;
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: all 150ms ease;
    align-self: flex-start;
    width: max-content;
}
.ca-userf-reset:hover {
    background: #fee2e2;
    color: #dc2626;
    border-color: #fca5a5;
}


/* ───────────────────────────────────────────────────
   S3.4 — Line Chart
   ─────────────────────────────────────────────────── */
.ca-w-line { gap: 4px; }
.ca-line-svg-wrap {
    flex: 1;
    min-height: 0;
    width: 100%;
    overflow: hidden;
}
.ca-line-svg {
    width: 100%;
    height: 100%;
    display: block;
}


/* ───────────────────────────────────────────────────
   S3.5 — Data Table widget
   ─────────────────────────────────────────────────── */
.ca-w-table { gap: 6px; }
.ca-table-wrap {
    flex: 1;
    min-height: 0;
    overflow: auto;
    border: 1px solid #ede8df;
    border-radius: 8px;
}
.ca-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12.5px;
}
.ca-table thead th {
    text-align: left;
    padding: 9px 10px;
    background: #fafaf6;
    color: #214A3E;
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 1px solid #ede8df;
    position: sticky;
    top: 0;
    z-index: 1;
    white-space: nowrap;
}
.ca-table tbody td {
    padding: 8px 10px;
    border-bottom: 1px solid #f3f0ec;
    color: #1f2937;
    vertical-align: top;
    white-space: nowrap;
}
.ca-table-row { cursor: pointer; transition: background 150ms ease; }
.ca-table-row:hover { background: #fafaf6; }
.ca-table-row:last-child td { border-bottom: none; }
.ca-cell-empty { color: #cbd5e1; font-style: italic; }

.ca-table-foot {
    font-size: 10.5px;
    color: #9ca3af;
    text-align: right;
    padding-top: 4px;
}


/* ═══════════════════════════════════════════════════
   SESSION 5 — NEW WIDGETS (Comparison · Sparkline · Gauge · Top List)
                + palette grouping
   ═══════════════════════════════════════════════════ */


/* ───────────────────────────────────────────────────
   S5.1 — Palette grouping (left rail)
   ─────────────────────────────────────────────────── */
.ca-palette-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-bottom: 4px;
}
.ca-palette-group + .ca-palette-group {
    border-top: 1px solid #ede8df;
    margin-top: 6px;
    padding-top: 8px;
}
.ca-palette-group-label {
    font-size: 9.5px;
    font-weight: 800;
    color: #9ca3af;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 4px 8px 2px;
}


/* ───────────────────────────────────────────────────
   S5.2 — Comparison widget
   Left/right side big numbers + center delta arrow.
   ─────────────────────────────────────────────────── */
.ca-w-compare { gap: 6px; }
.ca-cmp-body {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 14px;
    align-items: center;
    flex: 1;
    min-height: 0;
}
.ca-cmp-side {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}
.ca-cmp-prev { text-align: right; }
.ca-cmp-period-label {
    font-size: 10px;
    font-weight: 700;
    color: #9ca3af;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    line-height: 1.2;
}
.ca-cmp-value {
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.05;
    font-variant-numeric: tabular-nums;
    transition: color 200ms ease;
}
.ca-cmp-current .ca-cmp-value { color: #1E6332; }
.ca-cmp-prev .ca-cmp-value    { color: #6b7280; }
.ca-cmp-arrow {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: -0.01em;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    transition: transform 220ms ease;
    flex-shrink: 0;
}
.ca-cmp-arrow:hover { transform: scale(1.04); }
.ca-cmp-arrow i { font-size: 12px; }
.ca-cmp-arrow-up   { background: #dcfce7; color: #166534; border: 1px solid #bbf7d0; }
.ca-cmp-arrow-down { background: #fee2e2; color: #b91c1c; border: 1px solid #fecaca; }
.ca-cmp-arrow-flat { background: #f3f4f6; color: #6b7280; border: 1px solid #e5e7eb; }
.ca-cmp-meta {
    font-size: 11px;
    color: #6b7280;
    text-align: center;
    padding-top: 6px;
    border-top: 1px solid #f3f0ec;
    line-height: 1.3;
}


/* ───────────────────────────────────────────────────
   S5.3 — Sparkline KPI
   ─────────────────────────────────────────────────── */
.ca-w-sparkline {
    gap: 0;
    justify-content: space-between;
}
.ca-spark-head {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex-shrink: 0;
}
.ca-spark-value {
    font-size: 30px;
    font-weight: 700;
    color: #1E6332;
    letter-spacing: -0.025em;
    line-height: 1.0;
    font-variant-numeric: tabular-nums;
    margin-top: 2px;
    /* Mount + value-update animation matches the KPI card */
    animation: caKpiIn 380ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.ca-spark-value.ca-drillable {
    border-radius: 6px;
    padding: 2px 4px;
    margin: -2px -4px;
}
.ca-spark-value.ca-drillable:hover {
    background: rgba(30, 99, 50, 0.06);
}
.ca-spark-label {
    font-size: 11.5px;
    color: #6b7280;
    line-height: 1.3;
}
.ca-spark-svg-wrap {
    flex: 1;
    min-height: 32px;
    margin-top: 8px;
    overflow: hidden;
}
.ca-spark-svg {
    width: 100%;
    height: 100%;
    display: block;
}
.ca-spark-empty {
    color: #cbd5e1;
    font-style: italic;
    font-size: 11px;
    text-align: center;
    padding: 8px 0;
}


/* ───────────────────────────────────────────────────
   S5.4 — Gauge widget
   ─────────────────────────────────────────────────── */
.ca-w-gauge {
    align-items: center;
    justify-content: flex-start;
    gap: 4px;
}
.ca-w-gauge .ca-w-title {
    align-self: flex-start;
}
.ca-gauge-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    min-height: 0;
    width: 100%;
    gap: 4px;
}
.ca-gauge-svg {
    max-height: 130px;
    width: 100%;
    height: auto;
    /* Light entrance flourish on mount */
    animation: caGaugeIn 600ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
@keyframes caGaugeIn {
    from { opacity: 0; transform: scale(0.92); }
    to   { opacity: 1; transform: scale(1); }
}
.ca-gauge-meta {
    font-size: 12px;
    color: #4b5563;
    text-align: center;
    font-variant-numeric: tabular-nums;
}
.ca-gauge-current { font-weight: 700; color: #1f2937; }
.ca-gauge-sep    { color: #cbd5e1; }
.ca-gauge-target { color: #6b7280; }
.ca-gauge-label {
    font-size: 11px;
    color: #9ca3af;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    text-align: center;
    font-weight: 600;
}


/* ───────────────────────────────────────────────────
   S5.5 — Top N List widget
   ─────────────────────────────────────────────────── */
.ca-w-toplist { gap: 6px; }
.ca-toplist-body {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 4px 0;
}
.ca-toplist-row {
    display: grid;
    grid-template-columns: 26px 1fr auto;
    gap: 10px;
    align-items: center;
    padding: 6px 8px;
    border-radius: 8px;
    transition: background 150ms ease, transform 150ms ease;
}
.ca-toplist-row:hover {
    background: #fafaf6;
    transform: translateX(2px);
}
.ca-toplist-rank {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #94a3b8;
    color: #fff;
    font-size: 11.5px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}
.ca-toplist-info {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.ca-toplist-label {
    font-size: 12.5px;
    color: #1f2937;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ca-toplist-bar {
    background: #f4f0e9;
    border-radius: 3px;
    height: 6px;
    overflow: hidden;
}
.ca-toplist-fill {
    height: 100%;
    background: linear-gradient(90deg, #1E6332 0%, #2F8542 100%);
    border-radius: 3px;
    transition: width 400ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.ca-toplist-value {
    font-size: 12.5px;
    font-weight: 700;
    color: #1E6332;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}


/* ───────────────────────────────────────────────────
   S5.6 — Dark theme overrides for the new widgets
   ─────────────────────────────────────────────────── */
body.dark-theme .ca-palette-group + .ca-palette-group { border-color: #334155; }
body.dark-theme .ca-cmp-current .ca-cmp-value { color: #4ade80; }
body.dark-theme .ca-cmp-prev .ca-cmp-value    { color: #94a3b8; }
body.dark-theme .ca-cmp-meta { border-color: #334155; color: #94a3b8; }
body.dark-theme .ca-cmp-arrow-up   { background: rgba(74, 222, 128, 0.18); color: #4ade80; border-color: rgba(74, 222, 128, 0.30); }
body.dark-theme .ca-cmp-arrow-down { background: rgba(239, 68, 68, 0.18); color: #ef4444; border-color: rgba(239, 68, 68, 0.30); }
body.dark-theme .ca-cmp-arrow-flat { background: #243149; color: #94a3b8; border-color: #475569; }
body.dark-theme .ca-spark-value      { color: #4ade80; }
body.dark-theme .ca-spark-label      { color: #94a3b8; }
body.dark-theme .ca-gauge-current    { color: #e2e8f0; }
body.dark-theme .ca-gauge-target,
body.dark-theme .ca-gauge-meta       { color: #94a3b8; }
body.dark-theme .ca-toplist-row:hover { background: #243149; }
body.dark-theme .ca-toplist-label     { color: #e2e8f0; }
body.dark-theme .ca-toplist-bar       { background: #1a2438; }
body.dark-theme .ca-toplist-value     { color: #4ade80; }


/* ───────────────────────────────────────────────────
   S3.6 — Column picker (Data Table) + Field picker (Filter Widget)
   ─────────────────────────────────────────────────── */
.ca-cols-picker {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
    max-height: 240px;
    overflow-y: auto;
    padding-right: 4px;
}

.ca-fieldpicker {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.ca-fieldpicker-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px;
    background: #fafaf6;
    border: 1px solid #ede8df;
    border-radius: 8px;
    cursor: pointer;
    transition: all 150ms ease;
}
.ca-fieldpicker-row:hover {
    background: #f0f7f1;
    border-color: #c8e6c9;
}
.ca-fieldpicker-row input[type=checkbox] {
    accent-color: #1E6332;
    margin-top: 2px;
    cursor: pointer;
    flex-shrink: 0;
}
.ca-fieldpicker-text {
    flex: 1;
    min-width: 0;
}
.ca-fieldpicker-label {
    font-size: 12.5px;
    font-weight: 700;
    color: #1f2937;
    line-height: 1.3;
}
.ca-fieldpicker-desc {
    font-size: 11px;
    color: #6b7280;
    line-height: 1.4;
    margin-top: 2px;
}


/* ═══════════════════════════════════════════════════
   SESSION 4 — KPI COMPARISON, DRILL MODAL, TEMPLATES,
                VERSIONS, SHARING, VIEWER MODE
   ═══════════════════════════════════════════════════ */


/* ───────────────────────────────────────────────────
   S4.1 — Drillable hint + KPI comparison trend pill
   ─────────────────────────────────────────────────── */
.ca-drillable {
    cursor: pointer;
    transition: filter 150ms ease, transform 150ms ease;
}
.ca-drillable:hover {
    filter: brightness(0.95);
    transform: translateY(-1px);
}
.ca-bar-row.ca-drillable:hover { background: rgba(30, 99, 50, 0.04); border-radius: 6px; }
.ca-donut-segment {
    transition: stroke-width 180ms ease, opacity 180ms ease;
}
.ca-donut-segment:hover {
    stroke-width: 28;
    filter: drop-shadow(0 2px 4px rgba(33, 74, 62, 0.20));
}
.ca-donut-legend-item.ca-drillable:hover {
    background: #fafaf6;
    border-radius: 6px;
    padding: 2px 4px;
    margin: -2px -4px;
}

.ca-kpi-trend {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    /* Scales fluidly so it doesn't fight with the value for vertical
       space on small KPI blocks */
    font-size: clamp(9.5px, 10cqh, 11.5px);
    font-weight: 600;
    margin-top: 2px;
    padding: 3px 8px;
    border-radius: 999px;
    width: max-content;
    max-width: 100%;
    flex-shrink: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ca-kpi-trend i { font-size: clamp(9px, 9cqh, 10px); }
/* Hide the secondary "vs. previous period" copy when the block is too
   short to fit it without overlap. The arrow + delta % is the signal. */
@container cawidget (max-height: 130px) {
    .ca-kpi-trend-period { display: none; }
}
.ca-kpi-trend-up   { background: #dcfce7; color: #166534; }
.ca-kpi-trend-down { background: #fee2e2; color: #b91c1c; }
.ca-kpi-trend-flat { background: #f3f4f6; color: #6b7280; }
.ca-kpi-trend-period {
    color: inherit;
    opacity: 0.7;
    font-weight: 500;
    margin-left: 3px;
}


/* ───────────────────────────────────────────────────
   S4.2 — Drill modal (chart-segment / KPI drilldown)
   ─────────────────────────────────────────────────── */
.ca-drill-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}
.ca-btn-sm {
    padding: 6px 11px;
    font-size: 12px;
}
.ca-btn-ghost.ca-btn-sm { color: #fff; }
.ca-btn-ghost.ca-btn-sm:hover { background: rgba(255,255,255,0.18); color: #fff; }

.ca-drill-sub {
    padding: 12px 24px;
    font-size: 12.5px;
    color: #6b7280;
    background: #fafaf6;
    border-bottom: 1px solid #ede8df;
}
.ca-drill-body {
    flex: 1;
    overflow-y: auto;
    padding: 0;
}
.ca-drill-table {
    width: 100%;
    font-size: 12.5px;
}
.ca-drill-table thead th {
    position: sticky;
    top: 0;
    background: #fff;
    border-bottom: 1px solid #ede8df;
    z-index: 1;
}
.ca-drill-empty {
    padding: 60px 24px;
    text-align: center;
    color: #6b7280;
    font-size: 14px;
}
.ca-drill-empty i { color: #C19A6B; margin-right: 6px; }


/* ───────────────────────────────────────────────────
   S4.3 — Template picker
   ─────────────────────────────────────────────────── */
.ca-template-modal { max-width: 720px; }
.ca-template-intro {
    padding: 16px 24px;
    background: #fafaf6;
    border-bottom: 1px solid #ede8df;
    margin: 0;
    font-size: 13px;
    color: #4b5563;
    line-height: 1.55;
}
.ca-template-grid {
    padding: 18px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 12px;
    overflow-y: auto;
}
.ca-template-card {
    background: #fff;
    border: 1px solid #e5e1da;
    border-radius: 12px;
    padding: 14px;
    cursor: pointer;
    display: flex;
    gap: 12px;
    align-items: flex-start;
    transition: all 200ms ease;
}
.ca-template-card:hover {
    border-color: #1E6332;
    box-shadow: 0 4px 14px rgba(33, 74, 62, 0.10);
    transform: translateY(-2px);
}
.ca-template-blank {
    background: linear-gradient(135deg, #fff 0%, #f4f0e9 100%);
    border-style: dashed;
}
.ca-template-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 16px;
}
.ca-template-body { min-width: 0; flex: 1; }
.ca-template-name {
    font-size: 13.5px;
    font-weight: 700;
    color: #1f2937;
    line-height: 1.3;
}
.ca-template-desc {
    font-size: 11.5px;
    color: #6b7280;
    line-height: 1.45;
    margin-top: 4px;
}
.ca-template-stats {
    font-size: 10.5px;
    color: #9ca3af;
    margin-top: 6px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 600;
}


/* ───────────────────────────────────────────────────
   S4.4 — Versions modal
   ─────────────────────────────────────────────────── */
.ca-versions-savebar {
    display: flex;
    gap: 8px;
    padding: 16px 24px;
    background: #fafaf6;
    border-bottom: 1px solid #ede8df;
    align-items: center;
}
.ca-versions-savebar .ca-input { flex: 1; }
.ca-versions-list {
    flex: 1;
    overflow-y: auto;
    padding: 12px 24px 24px;
}
.ca-versions-empty {
    padding: 40px 24px;
    text-align: center;
    color: #6b7280;
    font-size: 13px;
}
.ca-versions-empty i {
    font-size: 32px;
    color: #C19A6B;
    margin-bottom: 12px;
    display: block;
}
.ca-version-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid #f3f0ec;
}
.ca-version-row:last-child { border-bottom: none; }
.ca-version-info { flex: 1; min-width: 0; }
.ca-version-name {
    font-size: 13px;
    font-weight: 700;
    color: #1f2937;
    line-height: 1.3;
}
.ca-version-meta {
    font-size: 11px;
    color: #6b7280;
    margin-top: 3px;
}
.ca-version-actions {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}


/* ───────────────────────────────────────────────────
   S4.5 — Sharing modal
   ─────────────────────────────────────────────────── */
.ca-sharing-modal { max-width: 780px; }
/* Single scrolling body — replaces 3 separately-scrolling pickers so
   admins see ~3-4x more rows per visible page. The modal head + foot
   stay pinned; everything between scrolls together as one tall page. */
.ca-sharing-body {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    min-height: 0;
}
.ca-sharing-intro {
    padding: 16px 24px;
    background: #fafaf6;
    border-bottom: 1px solid #ede8df;
    margin: 0;
    font-size: 13px;
    color: #4b5563;
    line-height: 1.55;
}
.ca-sharing-section {
    padding: 18px 24px;
    border-bottom: 1px solid #f3f0ec;
}
.ca-sharing-section:last-of-type { border-bottom: none; }
.ca-radio-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 10px;
}
.ca-radio-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px;
    border: 1px solid #ede8df;
    border-radius: 10px;
    background: #fff;
    cursor: pointer;
    transition: all 160ms ease;
}
.ca-radio-row:hover { background: #fafaf6; border-color: #c4bba9; }
.ca-radio-row.is-active {
    border-color: #1E6332;
    background: #f0fdf4;
    box-shadow: 0 0 0 3px rgba(30, 99, 50, 0.08);
}
.ca-radio-row input[type=radio] {
    accent-color: #1E6332;
    margin-top: 3px;
    cursor: pointer;
    flex-shrink: 0;
}
.ca-radio-text { flex: 1; min-width: 0; }
.ca-radio-label {
    font-size: 13px;
    font-weight: 700;
    color: #1f2937;
    display: flex;
    align-items: center;
    gap: 8px;
}
.ca-radio-label i { color: #1E6332; font-size: 12px; }
.ca-radio-desc {
    font-size: 11.5px;
    color: #6b7280;
    margin-top: 4px;
    line-height: 1.45;
}

/* (Old typed-email picker styles `.ca-share-emails` / `.ca-email-row` /
   `.ca-email-chip*` were removed when the contact picker replaced the
   text input — the new picker uses `.ca-share-contact-*` classes.) */

.ca-modal-foot {
    padding: 14px 24px;
    background: #fafaf6;
    border-top: 1px solid #ede8df;
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}


/* ───────────────────────────────────────────────────
   S4.5b — Sharing modal: locations picker (Phase 2-B)
   ─────────────────────────────────────────────────── */
.ca-share-locations .ca-share-loc-head {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}
.ca-share-locations .ca-share-loc-head .ca-props-label {
    margin-bottom: 0;
    flex: 1;
}

/* Sticky tools row — search + tally bar stays pinned at top of section
   while the user scrolls through long contact / location lists */
.ca-share-sticky-tools {
    position: sticky;
    top: 0;
    z-index: 5;
    background: #fff;
    padding: 4px 0 10px;
    margin-bottom: 4px;
    border-bottom: 1px solid #f3f0ec;
}

/* Tally bar — instant feedback on how many users / locations are picked */
.ca-share-tally {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    margin-top: 8px;
    background: linear-gradient(135deg, #f0fdf4 0%, #f4f0e9 100%);
    border: 1px solid #d4e8db;
    border-radius: 8px;
    font-size: 12px;
    color: #214A3E;
    flex-wrap: wrap;
}
.ca-share-tally i { color: #1E6332; font-size: 13px; flex-shrink: 0; }
.ca-share-tally strong { color: #1E6332; font-size: 14px; font-weight: 800; }
.ca-share-tally-bar {
    flex: 1 1 100%;
    height: 4px;
    background: rgba(30, 99, 50, 0.12);
    border-radius: 999px;
    overflow: hidden;
    margin-top: 2px;
}
.ca-share-tally-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #1E6332 0%, #2F8542 100%);
    border-radius: 999px;
    transition: width 220ms ease;
}

.ca-share-loc-search-row {
    margin-bottom: 0;
}
.ca-share-loc-list {
    /* Lists no longer have their own internal scroll — the modal body
       scrolls as one tall page so users can sweep through everything
       without getting stuck in a tiny inner viewport */
    border: 1px solid #ede8df;
    border-radius: 8px;
    padding: 4px;
    background: #fff;
}
.ca-share-loc-item {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 6px 10px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 12.5px;
    color: #1f2937;
    transition: background 150ms ease, border-color 150ms ease;
    border: 1px solid transparent;
}
.ca-share-loc-item:hover { background: #fafaf6; }
.ca-share-loc-item.is-selected {
    background: #f0fdf4;
    border-color: #bee5c8;
}
.ca-share-loc-item input[type=checkbox] {
    accent-color: #1E6332;
    cursor: pointer;
    flex-shrink: 0;
}
.ca-share-loc-item i.fa-building {
    color: #C19A6B;
    font-size: 11.5px;
    flex-shrink: 0;
}
.ca-share-loc-item.is-selected i.fa-building { color: #1E6332; }
.ca-share-loc-item span {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ca-share-loc-empty {
    padding: 16px;
    background: #fafaf6;
    border: 1px dashed #ede8df;
    border-radius: 8px;
    color: #6b7280;
    font-size: 12.5px;
    font-style: italic;
    text-align: center;
}


/* ───────────────────────────────────────────────────
   S4.5c — Sharing modal: contact picker (replaces typed email input)
   Same Admin-Panel-style contact pool, grouped by funeral home,
   with per-contact checkboxes and per-group select all/none.
   ─────────────────────────────────────────────────── */
.ca-share-contact-list {
    /* No inner scroll — list grows naturally so users see everything in
       one tall page, scrolling the modal body instead of trapping focus
       in a tiny viewport that only fits 3-4 rows */
    border: 1px solid #ede8df;
    border-radius: 8px;
    padding: 4px;
    background: #fff;
}
.ca-share-contact-group + .ca-share-contact-group {
    margin-top: 4px;
}
.ca-share-contact-group-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    background: linear-gradient(180deg, #f4f0e9 0%, #ebe4d6 100%);
    border-radius: 6px;
    border: 1px solid #ede8df;
    margin-bottom: 0;
    font-size: 12.5px;
    font-weight: 700;
    color: #214A3E;
    cursor: pointer;
    /* Sticky inside the modal scroll — group head pins under the search/tally
       bar so admins always know which FH they're scrolling within */
    position: sticky;
    top: 80px;        /* below the .ca-share-sticky-tools row */
    z-index: 4;
    transition: background 180ms ease, box-shadow 180ms ease;
}
.ca-share-contact-group-head:hover {
    background: linear-gradient(180deg, #ebe4d6 0%, #ddd2bb 100%);
}
.ca-share-contact-group.has-selection > .ca-share-contact-group-head {
    background: linear-gradient(180deg, #e8f5ed 0%, #d4e8db 100%);
    border-color: #bee5c8;
    box-shadow: inset 4px 0 0 #1E6332;
}
.ca-share-contact-group-chevron {
    color: #6b7280;
    font-size: 10.5px;
    flex-shrink: 0;
    transition: transform 200ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.ca-share-contact-group.is-collapsed .ca-share-contact-group-chevron {
    transform: rotate(-90deg);
}
.ca-share-contact-group-icon { color: #C19A6B; flex-shrink: 0; }
.ca-share-contact-group.has-selection .ca-share-contact-group-icon { color: #1E6332; }
.ca-share-contact-group-name {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ca-share-contact-group-count {
    background: #fff;
    border: 1px solid #ede8df;
    border-radius: 999px;
    padding: 2px 10px;
    font-size: 11px;
    font-weight: 600;
    color: #6b7280;
    display: inline-flex;
    align-items: center;
    gap: 2px;
}
.ca-share-contact-group-count .ca-grp-picked {
    color: #1E6332;
    font-weight: 800;
    font-size: 11.5px;
}
.ca-share-contact-group-count .ca-grp-slash { color: #cbd5e1; font-weight: 400; margin: 0 1px; }
.ca-share-contact-group.has-selection .ca-share-contact-group-count {
    background: #1E6332;
    border-color: #1E6332;
    color: #fff;
}
.ca-share-contact-group.has-selection .ca-share-contact-group-count .ca-grp-picked,
.ca-share-contact-group.has-selection .ca-share-contact-group-count .ca-grp-slash,
.ca-share-contact-group.has-selection .ca-share-contact-group-count .ca-grp-total { color: #fff; }
.ca-share-contact-group-btn {
    font-size: 11px;
    padding: 3px 9px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid #d4d0c8;
    color: #214A3E;
    transition: all 150ms ease;
}
.ca-share-contact-group-btn:hover {
    background: #1E6332;
    color: #fff;
    border-color: #1E6332;
}
.ca-share-contact-group-body {
    padding: 4px 0 6px;
    overflow: hidden;
    transition: max-height 240ms cubic-bezier(0.22, 0.61, 0.36, 1),
                opacity 200ms ease;
}
.ca-share-contact-group.is-collapsed .ca-share-contact-group-body {
    max-height: 0;
    opacity: 0;
    padding-top: 0;
    padding-bottom: 0;
}

.ca-share-contact-item {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 5px 10px;
    border-radius: 6px;
    cursor: pointer;
    transition: background 150ms ease;
    border: 1px solid transparent;
}
.ca-share-contact-item:hover { background: #fafaf6; }
.ca-share-contact-item input[type=checkbox] {
    accent-color: #1E6332;
    cursor: pointer;
    flex-shrink: 0;
}
.ca-share-contact-item input[type=checkbox]:checked + .ca-share-contact-avatar {
    box-shadow: 0 0 0 2px rgba(30, 99, 50, 0.25);
}
.ca-share-contact-avatar {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: linear-gradient(135deg, #1E6332 0%, #2F8542 100%);
    color: #fff;
    font-size: 10.5px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    text-transform: uppercase;
}
.ca-share-contact-avatar.is-admin {
    background: linear-gradient(135deg, #C19A6B 0%, #a07d52 100%);
}
.ca-share-contact-info {
    flex: 1;
    min-width: 0;
    line-height: 1.25;
}
.ca-share-contact-name {
    font-size: 12.5px;
    font-weight: 600;
    color: #1f2937;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ca-share-contact-role {
    display: inline-block;
    margin-left: 4px;
    background: #fef3c7;
    color: #92400e;
    border: 1px solid #fde68a;
    border-radius: 4px;
    padding: 0 5px;
    font-size: 9.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    vertical-align: 1px;
}
.ca-share-contact-email {
    font-size: 11.5px;
    color: #6b7280;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* "Selected" chips strip — sits below the tally bar so admins can see at
   a glance who/what they've picked, with one-click × removal. Empty by
   default so the strip collapses when nothing is selected. */
.ca-share-selected-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    max-height: 132px;
    overflow-y: auto;
    margin-top: 8px;
    padding: 0;
}
.ca-share-selected-chips:empty { display: none; }

.ca-share-selected-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 4px 3px 4px;
    background: linear-gradient(135deg, #f0fdf4 0%, #e8f5ed 100%);
    border: 1px solid #bee5c8;
    border-radius: 999px;
    font-size: 12px;
    color: #214A3E;
    max-width: 100%;
    transition: background 150ms ease, border-color 150ms ease;
}
.ca-share-selected-chip:hover {
    background: linear-gradient(135deg, #e8f5ed 0%, #d4e8db 100%);
    border-color: #a8d4b6;
}
.ca-share-selected-chip-avatar {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: linear-gradient(135deg, #1E6332 0%, #18A74B 100%);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    text-transform: uppercase;
}
.ca-share-selected-chip.is-admin .ca-share-selected-chip-avatar {
    background: linear-gradient(135deg, #C19A6B 0%, #6B4A28 100%);
}
.ca-share-selected-chip--loc .ca-share-selected-chip-avatar i {
    font-size: 11px;
}
.ca-share-selected-chip-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 200px;
    font-weight: 500;
    padding-right: 2px;
}
.ca-share-selected-chip-x {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 0;
    background: transparent;
    color: #214A3E;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 9.5px;
    transition: background 150ms ease, color 150ms ease;
    flex-shrink: 0;
}
.ca-share-selected-chip-x:hover {
    background: #fee2e2;
    color: #dc2626;
}

body.dark-theme .ca-share-selected-chip {
    background: linear-gradient(135deg, #14302a 0%, #1a3d33 100%);
    border-color: #2F8542;
    color: #cbd5e1;
}
body.dark-theme .ca-share-selected-chip:hover {
    background: linear-gradient(135deg, #1a3d33 0%, #214A3E 100%);
    border-color: #1E6332;
}
body.dark-theme .ca-share-selected-chip-x { color: #cbd5e1; }
body.dark-theme .ca-share-selected-chip-x:hover {
    background: #4a1f1f;
    color: #fca5a5;
}


/* Stale email chips (saved emails not currently in the contact pool) */
.ca-share-stale-row {
    margin-top: 10px;
    padding: 10px 12px;
    background: #fffbeb;
    border: 1px dashed #fde68a;
    border-radius: 8px;
}
.ca-share-stale-head {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #92400e;
    font-size: 11.5px;
    font-weight: 600;
    margin-bottom: 6px;
}
.ca-share-stale-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.ca-share-stale-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: #fff;
    border: 1px solid #fde68a;
    color: #92400e;
    border-radius: 999px;
    padding: 3px 4px 3px 10px;
    font-size: 11.5px;
    font-weight: 500;
}
.ca-share-stale-chip button {
    background: transparent;
    border: 0;
    color: #92400e;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 150ms ease;
}
.ca-share-stale-chip button:hover { background: #fde68a; }
.ca-share-hidden-note {
    margin-top: 8px;
    font-size: 11.5px;
    color: #6b7280;
    font-style: italic;
}

/* Dark theme for contact picker */
body.dark-theme .ca-share-contact-list {
    background: #243149;
    border-color: #475569;
}
body.dark-theme .ca-share-contact-group + .ca-share-contact-group {
    border-top-color: #475569;
}
body.dark-theme .ca-share-contact-group-head {
    background: #1a2438;
    color: #cbd5e1;
}
body.dark-theme .ca-share-contact-group-count {
    background: #243149;
    border-color: #475569;
    color: #94a3b8;
}
body.dark-theme .ca-share-contact-item:hover { background: #1a2438; }
body.dark-theme .ca-share-contact-name { color: #f1f5f9; }
body.dark-theme .ca-share-contact-email { color: #94a3b8; }
body.dark-theme .ca-share-contact-role {
    background: #3a2d18;
    color: #fcd34d;
    border-color: #715b35;
}
body.dark-theme .ca-share-stale-row {
    background: #2a2418;
    border-color: #715b35;
}
body.dark-theme .ca-share-stale-head { color: #fcd34d; }
body.dark-theme .ca-share-stale-chip {
    background: #1a2438;
    border-color: #715b35;
    color: #fcd34d;
}
body.dark-theme .ca-share-stale-chip button { color: #fcd34d; }
body.dark-theme .ca-share-stale-chip button:hover { background: #715b35; }


/* ───────────────────────────────────────────────────
   S4.6 — Shared-with-me section on list page
   ─────────────────────────────────────────────────── */
.ca-shared-section {
    margin-top: 32px;
    padding-top: 24px;
    border-top: 2px dashed #ede8df;
}
.ca-shared-title {
    font-size: 18px;
    font-weight: 700;
    color: #214A3E;
    margin: 0 0 6px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.ca-shared-title i { color: #C19A6B; }
.ca-shared-sub {
    font-size: 13px;
    color: #6b7280;
    margin: 0 0 16px;
}
.ca-dash-card--shared {
    background: linear-gradient(135deg, #fff 0%, #fafaf6 100%);
}

/* "How am I matched?" pill on shared cards (email / location / both) */
.ca-share-match {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: #f4f0e9;
    color: #214A3E;
    border: 1px solid #ede8df;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 600;
    white-space: nowrap;
    margin-left: auto;
}
.ca-share-match i { color: #C19A6B; font-size: 9.5px; }
body.dark-theme .ca-share-match {
    background: #243149;
    border-color: #475569;
    color: #cbd5e1;
}
body.dark-theme .ca-share-loc-list {
    background: #243149;
    border-color: #475569;
}
body.dark-theme .ca-share-loc-item { color: #cbd5e1; }
body.dark-theme .ca-share-loc-item:hover { background: #1a2438; }
body.dark-theme .ca-share-loc-empty {
    background: #1a2438;
    border-color: #334155;
    color: #94a3b8;
}


/* ───────────────────────────────────────────────────
   S4.7 — Props-panel toggle (for Comparison checkbox etc.)
   ─────────────────────────────────────────────────── */
.ca-props-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    padding: 8px;
    background: #fafaf6;
    border-radius: 6px;
    margin-bottom: 4px;
}
.ca-props-toggle:hover { background: #f4f0e9; }
.ca-props-toggle input[type=checkbox] {
    accent-color: #1E6332;
    cursor: pointer;
    flex-shrink: 0;
}
.ca-props-toggle span {
    font-size: 12.5px;
    color: #1f2937;
    line-height: 1.4;
}


/* ───────────────────────────────────────────────────
   S4.7b — LIVE MODE TOGGLE (admin-side preview switch)
   Lets the admin temporarily hide the palette + props + edit chrome
   to see the dashboard exactly as a viewer would. Reuses the viewer-
   mode visual rules below + adds smooth animated transitions on the
   panel widths so the canvas expands fluidly.
   ─────────────────────────────────────────────────── */

/* Toggle button visual states */
.ca-live-toggle {
    /* Base ghost state */
    transition: background 200ms ease, color 200ms ease, border-color 200ms ease, box-shadow 200ms ease;
}
.ca-live-toggle.is-active {
    background: linear-gradient(135deg, #1E6332 0%, #2F8542 100%) !important;
    color: #fff !important;
    border-color: #1E6332 !important;
    box-shadow: 0 2px 6px rgba(30, 99, 50, 0.25) !important;
}
.ca-live-toggle.is-active:hover {
    background: linear-gradient(135deg, #214A3E 0%, #1E6332 100%) !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(30, 99, 50, 0.30) !important;
}
.ca-live-toggle .ca-live-pulse {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #fff;
    margin-right: 2px;
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7);
    animation: caLivePulse 1.6s cubic-bezier(0.4, 0, 0.6, 1) infinite;
    display: none;
}
.ca-live-toggle.is-active .ca-live-pulse { display: inline-block; }
@keyframes caLivePulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7); }
    70%      { box-shadow: 0 0 0 6px rgba(255, 255, 255, 0); }
}

/* Hide non-builder buttons but KEEP the live toggle visible */
body.ca-live-preview .ca-builder-only {
    opacity: 0;
    transform: translateY(-4px);
    pointer-events: none;
    /* `transition: ... visibility` lets us collapse layout space after fade */
    transition: opacity 220ms ease, transform 220ms ease, max-width 320ms ease 80ms, padding 320ms ease 80ms, margin 320ms ease 80ms;
    max-width: 0;
    padding: 0;
    margin: 0;
    overflow: hidden;
    border: 0;
}

/* Panels collapse to 0 width with opacity fade */
body.ca-live-preview .ca-builder-body > .ca-palette {
    width: 0 !important;
    opacity: 0;
    transform: translateX(-12px);
    overflow: hidden;
    pointer-events: none;
}
body.ca-live-preview .ca-builder-body > .ca-props {
    width: 0 !important;
    opacity: 0;
    transform: translateX(12px);
    overflow: hidden;
    pointer-events: none;
}
body.ca-live-preview .ca-builder-body { gap: 0; }

/* Hide block edit chrome (handles, action buttons, resize handles) */
body.ca-live-preview .ca-block-handle,
body.ca-live-preview .ca-handle-action,
body.ca-live-preview .ca-resize-handle,
body.ca-live-preview .ca-canvas-toolbar {
    opacity: 0 !important;
    pointer-events: none !important;
    transition: opacity 220ms ease;
}

/* Canvas backdrop loses its grid hint — viewer doesn't think in cells */
body.ca-live-preview .ca-canvas {
    background: #fff !important;
    transition: background 280ms ease;
}

/* Block hover/select rings disappear — they're edit-mode affordances */
body.ca-live-preview .ca-block { cursor: default; }
body.ca-live-preview .ca-block:hover {
    transform: none;
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.04),
        0 4px 12px rgba(33, 74, 62, 0.06);
    border-color: #e5e1da;
}
body.ca-live-preview .ca-block.is-selected {
    border-color: #e5e1da;
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.04),
        0 4px 12px rgba(33, 74, 62, 0.06);
}
/* (No padding override needed for live preview — `.ca-block-content`
   already uses padding: 14px and the handle bar overlays content rather
   than reserving space.) */

/* Drillable charts/KPIs still respond to clicks — viewers should be able
   to drill in just like a published dashboard. Cursor stays pointer. */
body.ca-live-preview .ca-drillable {
    cursor: pointer !important;
}

/* Status pill in the toolbar swaps to a "Live" badge */
body.ca-live-preview .ca-status-pill {
    background: linear-gradient(135deg, #1E6332 0%, #2F8542 100%);
    color: #fff;
    border-color: #1E6332;
}

/* Editor name input goes read-only-looking */
body.ca-live-preview .ca-builder-name-input {
    pointer-events: none;
    color: #1f2937;
}

/* Tiny "Live" tag near the name to reinforce the mode */
body.ca-live-preview .ca-builder-name-block::after {
    content: 'LIVE PREVIEW';
    display: inline-block;
    margin-left: 8px;
    padding: 2px 7px;
    background: linear-gradient(135deg, #1E6332, #2F8542);
    color: #fff;
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: 0.06em;
    border-radius: 4px;
    vertical-align: middle;
    animation: caLiveTagIn 280ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
@keyframes caLiveTagIn {
    from { opacity: 0; transform: scale(0.8) translateY(-3px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}

/* Block content fades in nicely as panels collapse — gives the impression
   widgets are "settling in" once chrome clears. */
body.ca-live-preview .ca-block-content > .ca-w {
    animation: caLiveSettle 380ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
@keyframes caLiveSettle {
    from { transform: scale(0.985); }
    to   { transform: scale(1); }
}


/* ───────────────────────────────────────────────────
   S4.8 — Viewer mode (read-only render of shared dashboards)
   ─────────────────────────────────────────────────── */
body.ca-viewer-mode .ca-palette,
body.ca-viewer-mode .ca-props,
body.ca-viewer-mode .ca-builder-only,
body.ca-viewer-mode .ca-canvas-toolbar,
body.ca-viewer-mode .ca-block-handle,
body.ca-viewer-mode .ca-handle-action,
body.ca-viewer-mode .ca-resize-handle,
/* Strip the entire builder topbar (back arrow + name input + "VIEWING"
   pill + "Shared by X" + Live Mode button) when consuming a dashboard.
   The picker bar at the very top already shows the dashboard name + who
   shared it, and viewers exit by picking Native Analytics from there.
   Builder topbar is for authors actively editing — viewers don't need it. */
body.ca-viewer-mode .ca-builder-topbar {
    display: none !important;
}
body.ca-viewer-mode .ca-builder-body {
    grid-template-columns: 1fr;
    /* Topbar is gone — drop the calc(100vh - 200px) height assumption that
       depended on it being there, and let the body size to its content */
    height: auto !important;
    min-height: 0 !important;
    background: transparent !important;
}
/* Strip ALL chrome from the canvas wrapper in viewer mode — no white card,
   no border, no shadow, no rounded corners. The dashboard widgets render
   directly onto the page background like a published article instead of
   sitting inside a "canvas" card. */
body.ca-viewer-mode .ca-canvas-wrap {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
}
body.ca-viewer-mode #caBuilderView,
body.ca-viewer-mode .ca-view,
body.ca-viewer-mode #caRoot {
    background: transparent !important;
}
body.ca-viewer-mode .ca-canvas {
    /* No grid backdrop — viewers don't think in cells. Transparent so the
       page background shows through cleanly. */
    background: transparent !important;
}
body.ca-viewer-mode .ca-grid {
    /* Disable hover/drag affordances */
    cursor: default;
}
body.ca-viewer-mode .ca-block {
    cursor: default;
}
body.ca-viewer-mode .ca-block:hover {
    transform: none;
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.04),
        0 4px 12px rgba(33, 74, 62, 0.06);
    border-color: #e5e1da;
}
body.ca-viewer-mode .ca-block.is-selected {
    border-color: #e5e1da;
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.04),
        0 4px 12px rgba(33, 74, 62, 0.06);
}
/* Restore drillable cursor for charts inside viewer mode */
body.ca-viewer-mode .ca-drillable {
    cursor: pointer !important;
}
/* Inline-host mode — the #caBuilderView is DOM-transplanted into
   #analyticsCustomViewerHost on the Analytics page. The existing
   body.ca-viewer-mode rules already strip the topbar/palette/props
   chrome. The host's outer spacing is handled by the .analytics-page
   flex gap (see analytics.css). Here we just neutralize the builder
   body's calc(100vh - ...) height assumption (it doesn't apply inside
   another page) and tighten the canvas padding so the dashboard sits
   flush with the picker bar above — matching the rhythm of native. */
body.ca-inline-viewer #analyticsCustomViewerHost #caBuilderView {
    height: auto !important;
    min-height: 0 !important;
}
body.ca-inline-viewer #analyticsCustomViewerHost .ca-canvas {
    padding: 0 !important;
    background: transparent !important;
}
body.ca-inline-viewer #analyticsCustomViewerHost .ca-builder-body {
    padding: 0 !important;
}

/* Filter Widget remains interactive in viewer mode */
body.ca-viewer-mode .ca-w-filter {
    background: #fafaf6;
    border-radius: 8px;
    padding: 4px;
}
/* (Viewer mode also uses the default 14px padding-top — no override needed.) */


/* ───────────────────────────────────────────────────
   S2.10 — Dark theme additions for new chrome
   ─────────────────────────────────────────────────── */
body.dark-theme .ca-block {
    background: #243149;
    border-color: #334155;
}
body.dark-theme .ca-block.is-selected {
    border-color: #4ade80;
    box-shadow: 0 0 0 2px rgba(74, 222, 128, 0.3);
}
body.dark-theme .ca-block-handle {
    background: linear-gradient(180deg, #1a2438 0%, #243149 100%);
    border-color: #334155;
}
body.dark-theme .ca-handle-action {
    background: rgba(36, 49, 73, 0.6);
    border-color: transparent;
    color: #cbd5e1;
}
body.dark-theme .ca-handle-action:hover {
    background: #243149;
    border-color: #4ade80;
    color: #4ade80;
}
body.dark-theme .ca-w-title { color: #cbd5e1; }
body.dark-theme .ca-kpi-value,
body.dark-theme .ca-stat-value,
body.dark-theme .ca-donut-center-value { color: #4ade80; }
body.dark-theme .ca-bar-track { background: #1a2438; }
body.dark-theme .ca-bar-label,
body.dark-theme .ca-stat-label,
body.dark-theme .ca-donut-legend-label { color: #94a3b8; }
body.dark-theme .ca-bar-value,
body.dark-theme .ca-donut-legend-value { color: #4ade80; }
body.dark-theme .ca-text-h1,
body.dark-theme .ca-text-h2,
body.dark-theme .ca-text-h3 { color: #cbd5e1; }
body.dark-theme .ca-text-p { color: #94a3b8; }
body.dark-theme .ca-input,
body.dark-theme .ca-stat-config-row,
body.dark-theme .ca-icon-btn {
    background: #243149;
    border-color: #475569;
    color: #cbd5e1;
}
body.dark-theme .ca-stat-config-row { background: #1a2438; }
body.dark-theme .ca-checkbox-row:hover { background: #2f3e57; }
body.dark-theme .ca-canvas.is-drop-target {
    background:
        linear-gradient(rgba(74, 222, 128, 0.14) 1px, transparent 1px) 0 0 / 100% calc(100px + 14px),
        linear-gradient(90deg, rgba(74, 222, 128, 0.14) 1px, transparent 1px) 0 0 / calc(100% / 12) 100%,
        #1f3a2c;
}
body.dark-theme .ca-block-handle {
    background: linear-gradient(180deg, #1a2438 0%, #243149 100%);
    border-color: #334155;
    color: #94a3b8;
}
body.dark-theme .ca-block-handle:hover { background: #1a2438; }
body.dark-theme .ca-block-handle-coord {
    background: #1a2438;
    color: #4ade80;
}
body.dark-theme .ca-block-ghost {
    background: rgba(74, 222, 128, 0.18);
    border-color: #4ade80;
}
body.dark-theme .ca-block-ghost.is-invalid {
    background: rgba(239, 68, 68, 0.18);
    border-color: #ef4444;
}

/* Session 3 dark-theme overrides */
body.dark-theme .ca-filter-block {
    background: linear-gradient(180deg, #1a2438 0%, #142035 100%);
    border-color: #334155;
}
body.dark-theme .ca-filter-mini-label,
body.dark-theme .ca-userf-label { color: #94a3b8; }
body.dark-theme .ca-link-btn { color: #4ade80; }
body.dark-theme .ca-link-btn:hover { background: rgba(74, 222, 128, 0.15); }

body.dark-theme .ca-mcheck-trigger {
    background: #243149;
    border-color: #475569;
    color: #cbd5e1;
}
body.dark-theme .ca-mcheck-panel {
    background: #1e293b;
    border-color: #334155;
}
body.dark-theme .ca-mcheck-item { color: #cbd5e1; }
body.dark-theme .ca-mcheck-item:hover { background: #243149; }

body.dark-theme .ca-userf-reset {
    background: #243149;
    border-color: #475569;
    color: #cbd5e1;
}

body.dark-theme .ca-table thead th {
    background: #1a2438;
    color: #cbd5e1;
    border-color: #334155;
}
body.dark-theme .ca-table tbody td {
    color: #e2e8f0;
    border-color: #334155;
}
body.dark-theme .ca-table-wrap { border-color: #334155; }
body.dark-theme .ca-table-row:hover { background: #243149; }
body.dark-theme .ca-cell-empty { color: #475569; }
body.dark-theme .ca-table-foot { color: #94a3b8; }

body.dark-theme .ca-fieldpicker-row {
    background: #1a2438;
    border-color: #334155;
}
body.dark-theme .ca-fieldpicker-row:hover {
    background: #1f3a2c;
    border-color: #4ade80;
}
body.dark-theme .ca-fieldpicker-label { color: #e2e8f0; }
body.dark-theme .ca-fieldpicker-desc  { color: #94a3b8; }


/* ───────────────────────────────────────────────────
   15. RESPONSIVE
   ─────────────────────────────────────────────────── */
@media (max-width: 1100px) {
    .ca-builder-body > .ca-palette { width: 200px; }
    .ca-builder-body > .ca-props   { width: 280px; }
}

@media (max-width: 900px) {
    /* Builder is desktop-only — collapse to a single column on narrow screens.
       The list view still works on mobile. */
    .ca-builder-body { flex-direction: column; height: auto; }
    .ca-builder-body > .ca-palette,
    .ca-builder-body > .ca-props { display: none; }
}

@media (max-width: 768px) {
    #page-custom-analytics .dashboard-content { padding: 14px 14px 80px; }
    .ca-list-hero {
        flex-direction: column;
        align-items: flex-start;
        padding: 20px;
    }
    .ca-list-hero-actions { width: 100%; flex-wrap: wrap; }
    .ca-list-hero-actions .ca-btn { flex: 1; justify-content: center; }
    .ca-list-toolbar { flex-direction: column; align-items: stretch; }
    .ca-search-wrap { flex: 1; }
    .ca-card-grid { grid-template-columns: 1fr; gap: 12px; }
    .ca-page-title { font-size: 22px; }
    .ca-modal { max-height: 100vh; max-width: 100%; border-radius: 0; }
    .ca-modal-backdrop { padding: 0; }
    .ca-fields-tabs { padding: 8px 8px 0; }
    .ca-fields-tab { padding: 7px 10px; font-size: 11.5px; }
    .ca-fields-table thead th,
    .ca-fields-table tbody td { padding: 8px 6px; font-size: 12px; }
    .ca-builder-topbar {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }
    .ca-builder-topbar-right { flex-wrap: wrap; }
    .ca-canvas-empty,
    .ca-canvas-blocks-placeholder { padding: 30px 16px; margin: 12px; }
}


/* ───────────────────────────────────────────────────
   16. DARK THEME
   ─────────────────────────────────────────────────── */
body.dark-theme #page-custom-analytics .dashboard-content { background: transparent; }
body.dark-theme .ca-list-hero,
body.dark-theme .ca-empty-state,
body.dark-theme .ca-error-state,
body.dark-theme .ca-dash-card,
body.dark-theme .ca-dash-card-skel,
body.dark-theme .ca-builder-topbar,
body.dark-theme .ca-palette,
body.dark-theme .ca-canvas-wrap,
body.dark-theme .ca-props,
body.dark-theme .ca-modal {
    background: #1e293b;
    border-color: #334155;
    color: #e2e8f0;
}
body.dark-theme .ca-page-title,
body.dark-theme .ca-empty-title,
body.dark-theme .ca-error-title,
body.dark-theme .ca-dash-card-name,
body.dark-theme .ca-canvas-empty-title { color: #e2e8f0; }
body.dark-theme .ca-page-sub,
body.dark-theme .ca-empty-sub,
body.dark-theme .ca-error-sub,
body.dark-theme .ca-dash-card-desc,
body.dark-theme .ca-canvas-empty-sub,
body.dark-theme .ca-saved-hint,
body.dark-theme .ca-fields-intro,
body.dark-theme .ca-props-help { color: #94a3b8; }
body.dark-theme .ca-search-input,
body.dark-theme .ca-select,
body.dark-theme .ca-textarea,
body.dark-theme .ca-builder-name-input {
    background: #243149;
    border-color: #475569;
    color: #e2e8f0;
}
body.dark-theme .ca-search-input:focus,
body.dark-theme .ca-select:focus,
body.dark-theme .ca-textarea:focus { background: #2f3e57; }
body.dark-theme .ca-btn-secondary {
    background: #243149;
    border-color: #475569;
    color: #e2e8f0;
}
body.dark-theme .ca-btn-secondary:hover { background: #2f3e57; }
body.dark-theme .ca-palette-head,
body.dark-theme .ca-canvas-toolbar,
body.dark-theme .ca-props-head,
body.dark-theme .ca-fields-tabs,
body.dark-theme .ca-fields-intro {
    background: linear-gradient(180deg, #1e293b 0%, #1a2438 100%);
    border-color: #334155;
    color: #cbd5e1;
}
body.dark-theme .ca-canvas {
    background:
        linear-gradient(#243149 1px, transparent 1px) 0 0 / 100% 24px,
        linear-gradient(90deg, #243149 1px, transparent 1px) 0 0 / calc(100% / 12) 24px,
        #1a2438;
}
body.dark-theme .ca-palette-item:hover { background: #2f3e57; }
body.dark-theme .ca-canvas-empty,
body.dark-theme .ca-canvas-blocks-placeholder {
    background: #243149;
    border-color: #475569;
    color: #94a3b8;
}
body.dark-theme .ca-fields-table tbody tr:hover { background: #243149; }
body.dark-theme .ca-fields-table tbody td { border-color: #334155; }
body.dark-theme .ca-field-key { background: #243149; color: #94a3b8; }