/* reports.css — Custom Report Builder
   Brand: Deep Royal Green #1E6332 · Sherwood #214A3E · Emerald #2F8542
          Beige #F4F0E9 / #E8DFD0 · Caramel #C19A6B
   Mirrors the Custom Analytics aesthetic (cr-* namespace). */

.cr-root { --cr-green:#1E6332; --cr-green-dk:#214A3E; --cr-emerald:#2F8542;
    --cr-beige:#F4F0E9; --cr-beige-dk:#E8DFD0; --cr-caramel:#C19A6B;
    --cr-bd:#e2e0db; --cr-bd-soft:#eceae5; --cr-muted:#6b7280; --cr-ink:#1f2937;
    --cr-bg:#edeef1;
    font-family:'Futura PT','Jost',sans-serif; color:var(--cr-ink);
    background:var(--cr-bg);
    height:100%; display:flex; flex-direction:column; min-height:0; }
.cr-view { flex:1; min-height:0; }

/* Module icon image (e.g. Insurance.png) — sized per context */
.cr-mod-img { width:16px; height:16px; object-fit:contain; vertical-align:middle; flex-shrink:0; }
.cr-mod-badge .cr-mod-img, .cr-fav-chip .cr-mod-img { width:14px; height:14px; }
.cr-mod-opt .cr-mod-img { width:24px; height:24px; }

/* ============================ LIST VIEW ============================ */
.cr-list-view { overflow-y:auto; padding:28px 40px 48px; }
.cr-list-hero { display:flex; justify-content:space-between; align-items:flex-start; gap:24px; flex-wrap:wrap; margin-bottom:18px; }
.cr-page-title { font-size:1.7rem; font-weight:700; color:var(--cr-ink); margin:0 0 6px; display:flex; align-items:center; gap:12px; }
.cr-page-title i { width:46px; height:46px; display:inline-flex; align-items:center; justify-content:center;
    background:linear-gradient(135deg,var(--cr-beige),var(--cr-beige-dk)); color:var(--cr-green); border-radius:12px; font-size:1.1rem; }
.cr-page-sub { color:var(--cr-muted); font-size:.92rem; max-width:680px; margin:0; line-height:1.5; }

/* Favorites chips */
.cr-fav-chips { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:16px; }
.cr-fav-label { font-size:.75rem; font-weight:700; text-transform:uppercase; letter-spacing:.6px; color:var(--cr-caramel); display:inline-flex; align-items:center; gap:6px; }
.cr-fav-chip { display:inline-flex; align-items:center; gap:7px; background:#fff; border:1px solid var(--cr-bd); border-radius:999px;
    padding:7px 14px; font-size:.84rem; font-weight:600; color:var(--cr-green-dk); cursor:pointer; transition:.18s; }
.cr-fav-chip:hover { border-color:var(--cr-green); background:var(--cr-beige); transform:translateY(-1px); box-shadow:0 4px 12px rgba(30,99,50,.12); }
.cr-fav-chip i { color:var(--cr-caramel); }

/* Toolbar */
.cr-list-toolbar { display:flex; align-items:center; gap:12px; margin-bottom:20px; flex-wrap:wrap; }
.cr-search-wrap { position:relative; flex:1; min-width:240px; max-width:420px; }
.cr-search-icon { position:absolute; left:14px; top:50%; transform:translateY(-50%); color:#94a3b8; font-size:.85rem; }
.cr-search-input { width:100%; height:40px; border:1px solid var(--cr-bd); border-radius:999px; padding:0 16px 0 38px;
    font-size:.9rem; background:#fff; outline:none; transition:.18s; font-family:inherit; }
.cr-search-input:focus { border-color:var(--cr-green); box-shadow:0 0 0 3px rgba(30,99,50,.12); }

/* Section label */
.cr-section-label { display:flex; align-items:center; gap:9px; font-size:.78rem; font-weight:700; text-transform:uppercase;
    letter-spacing:.7px; color:var(--cr-muted); margin:22px 0 12px; }
.cr-section-label:first-child { margin-top:0; }
.cr-section-label i { color:var(--cr-green); }
.cr-count { background:var(--cr-beige); color:var(--cr-green-dk); border-radius:999px; padding:1px 9px; font-size:.72rem; }

/* Cards */
.cr-card-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:16px; padding:2px; }
.cr-card { background:#fff; border:1px solid var(--cr-bd); border-radius:14px; padding:16px 16px 12px; cursor:pointer;
    transition:.2s cubic-bezier(.4,0,.2,1); display:flex; flex-direction:column; position:relative; }
.cr-card:hover { border-color:var(--cr-green); transform:translateY(-3px); box-shadow:0 10px 26px rgba(30,99,50,.13); }
.cr-card-top { display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; }
.cr-mod-badge { display:inline-flex; align-items:center; gap:6px; font-size:.72rem; font-weight:700; text-transform:uppercase;
    letter-spacing:.4px; color:var(--cr-green); background:var(--cr-beige); border-radius:999px; padding:4px 10px; }
.cr-fav-btn, .cr-shared-tag { background:none; border:none; cursor:pointer; width:28px; height:28px; border-radius:8px;
    display:inline-flex; align-items:center; justify-content:center; color:#cbd5e1; font-size:.95rem; transition:.15s; }
.cr-fav-btn:hover { background:var(--cr-beige); color:var(--cr-caramel); }
.cr-fav-btn.on { color:var(--cr-caramel); }
.cr-shared-tag { color:var(--cr-caramel); cursor:default; }
.cr-card-title { font-size:1.05rem; font-weight:700; color:var(--cr-ink); margin:0 0 10px; line-height:1.3; }
.cr-card-meta { display:flex; flex-wrap:wrap; gap:6px 14px; font-size:.8rem; color:var(--cr-muted); margin-bottom:12px; }
.cr-card-meta span { display:inline-flex; align-items:center; gap:5px; }
.cr-card-meta i { color:#9ca3af; font-size:.75rem; }
.cr-card-foot { margin-top:auto; padding-top:10px; border-top:1px solid var(--cr-bd-soft); display:flex; align-items:center; justify-content:space-between; }
.cr-card-updated { font-size:.74rem; color:#9ca3af; }
.cr-card-actions { display:flex; gap:2px; opacity:0; transition:opacity .15s; }
.cr-card:hover .cr-card-actions { opacity:1; }
.cr-card-act { width:30px; height:30px; border:none; background:none; border-radius:8px; color:#64748b; cursor:pointer; transition:.15s; font-size:.82rem; }
.cr-card-act:hover { background:var(--cr-beige); color:var(--cr-green); }
.cr-card-act.danger:hover { background:#fee2e2; color:#dc2626; }

/* Compact card — title + description + created/modified only (no module badge/meta) */
.cr-card-compact { padding:14px 14px 10px; }
.cr-card-compact .cr-card-top { align-items:flex-start; gap:8px; margin-bottom:7px; }
.cr-card-compact .cr-card-title { margin:0; flex:1 1 auto; min-width:0; font-size:1rem; }
.cr-card-compact .cr-fav-btn, .cr-card-compact .cr-shared-tag { flex:0 0 auto; }
.cr-card-desc { font-size:.82rem; color:var(--cr-muted); line-height:1.45; margin:0 0 12px;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.cr-card-times { display:flex; gap:14px; font-size:.72rem; color:#9ca3af; }
.cr-card-times span { display:inline-flex; align-items:center; gap:5px; }
.cr-card-times i { font-size:.68rem; color:#b0b7c0; }
/* Sharing info line on cards (owner = clickable chip, viewer = "Shared by …") */
.cr-card-shareinfo-row { margin:0 0 12px; }
.cr-card-shareinfo { display:inline-flex; align-items:center; gap:6px; font-size:.74rem; color:var(--cr-muted); }
.cr-card-shareinfo i { font-size:.7rem; color:#9ca3af; }
.cr-card-shareinfo-btn { background:none; border:1px solid var(--cr-bd-soft); border-radius:999px; padding:3px 11px;
    cursor:pointer; font-family:inherit; color:var(--cr-green-dk); transition:.14s; }
.cr-card-shareinfo-btn:hover { border-color:var(--cr-green); background:var(--cr-beige); }
.cr-card-shareinfo-btn i { color:var(--cr-green); }
body.dark-theme .cr-card-shareinfo-btn { border-color:var(--theme-border); color:var(--theme-text); }
body.dark-theme .cr-card-shareinfo-btn:hover { background:var(--theme-hover); }

/* First-visit "setting up your reports" state */
.cr-setup-state { text-align:center; max-width:440px; margin:48px auto; padding:40px 24px; }
.cr-setup-state h3 { font-size:1.12rem; font-weight:700; color:var(--cr-ink); margin:20px 0 8px; }
.cr-setup-state p { font-size:.88rem; color:var(--cr-muted); line-height:1.55; margin:0; }
.cr-setup-spinner { width:42px; height:42px; margin:0 auto; border:4px solid var(--cr-beige);
    border-top-color:var(--cr-green); border-radius:50%; animation:crSetupSpin .8s linear infinite; }
@keyframes crSetupSpin { to { transform:rotate(360deg); } }
body.dark-theme .cr-card-desc, body.dark-theme .cr-setup-state p { color:var(--theme-text-secondary); }
body.dark-theme .cr-setup-state h3 { color:var(--theme-text); }

/* Empty state */
.cr-empty { text-align:center; padding:60px 20px; color:var(--cr-muted); }
.cr-empty-icon { width:72px; height:72px; margin:0 auto 18px; border-radius:20px; display:flex; align-items:center; justify-content:center;
    background:linear-gradient(135deg,var(--cr-beige),var(--cr-beige-dk)); color:var(--cr-green); font-size:1.8rem; }
.cr-empty i { font-size:2rem; color:#cbd5e1; margin-bottom:12px; display:block; }
.cr-empty .cr-empty-icon i { font-size:1.8rem; color:var(--cr-green); margin:0; }
.cr-empty h3 { color:var(--cr-ink); margin:0 0 8px; font-size:1.2rem; }
.cr-empty p { max-width:440px; margin:0 auto 18px; font-size:.9rem; line-height:1.55; }

/* ============================ BUTTONS ============================ */
.cr-btn { display:inline-flex; align-items:center; gap:7px; border:1px solid transparent; border-radius:9px; padding:9px 15px;
    font-size:.86rem; font-weight:600; cursor:pointer; transition:.18s; font-family:inherit; white-space:nowrap; }
.cr-btn-primary { background:linear-gradient(135deg,var(--cr-green),var(--cr-green-dk)); color:#fff; box-shadow:0 3px 12px rgba(30,99,50,.28); }
.cr-btn-primary:hover { transform:translateY(-1px); box-shadow:0 6px 18px rgba(30,99,50,.36); }
.cr-btn-secondary { background:#fff; border-color:var(--cr-bd); color:var(--cr-green-dk); }
.cr-btn-secondary:hover { border-color:var(--cr-green); background:var(--cr-beige); }
.cr-btn-ghost { background:transparent; border-color:var(--cr-bd); color:#475569; }
.cr-btn-ghost:hover { border-color:var(--cr-green); color:var(--cr-green); background:var(--cr-beige); }
.cr-btn-icon { width:38px; height:38px; border:1px solid var(--cr-bd); background:#fff; border-radius:9px; cursor:pointer;
    display:inline-flex; align-items:center; justify-content:center; color:#475569; transition:.15s; font-size:.95rem; }
.cr-btn-icon:hover { border-color:var(--cr-green); color:var(--cr-green); background:var(--cr-beige); }
.cr-fav-toggle.on { color:var(--cr-caramel); border-color:var(--cr-caramel); background:#fbf7ef; }

/* ============================ BUILDER ============================ */
.cr-builder-view { display:flex; flex-direction:column; height:100%; }
.cr-builder-topbar { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:12px 20px;
    background:#fff; border-bottom:1px solid var(--cr-bd); flex-wrap:wrap; }
.cr-builder-topbar-left { display:flex; align-items:center; gap:12px; min-width:0; }
.cr-builder-name-block { min-width:0; }
.cr-builder-name-input { font-size:1.05rem; font-weight:700; color:var(--cr-ink); border:1px solid transparent; background:transparent;
    border-radius:8px; padding:5px 10px; outline:none; min-width:220px; font-family:inherit; transition:.15s; }
.cr-builder-name-input:hover { background:var(--cr-bd-soft); }
.cr-builder-name-input:focus { background:#fff; border-color:var(--cr-green); box-shadow:0 0 0 3px rgba(30,99,50,.1); }
.cr-builder-name-input[readonly] { cursor:default; }
.cr-builder-title-row { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.cr-builder-name-input { flex:0 1 auto; }
.cr-builder-meta { display:flex; align-items:center; gap:10px; }
.cr-status-pill { font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.5px; padding:2px 9px; border-radius:999px; }
.cr-status-pill.draft { background:#fef3c7; color:#b45309; }
.cr-status-pill.published { background:var(--cr-beige); color:var(--cr-green); }
.cr-saved-hint { font-size:.76rem; color:#9ca3af; }
.cr-saved-hint.dirty { color:#d97706; }
.cr-owner-tag { font-size:.76rem; color:var(--cr-caramel); font-weight:600; display:inline-flex; align-items:center; gap:5px; }
/* Report description (under the title) */
.cr-builder-desc-wrap { display:flex; align-items:center; gap:8px; margin-top:3px; }
.cr-builder-desc-input { flex:1; min-width:0; font-size:.82rem; color:var(--cr-muted); border:1px solid transparent; background:transparent;
    border-radius:8px; padding:4px 10px; outline:none; font-family:inherit; transition:.15s; }
.cr-builder-desc-input::placeholder { color:#b6bcc4; }
.cr-builder-desc-input:hover { background:var(--cr-bd-soft); }
.cr-builder-desc-input:focus { background:#fff; border-color:var(--cr-green); box-shadow:0 0 0 3px rgba(30,99,50,.1); color:var(--cr-ink); }
.cr-builder-desc-input[readonly] { cursor:default; }
.cr-desc-count { font-size:.68rem; color:#b6bcc4; opacity:0; transition:.15s; flex-shrink:0; }
.cr-builder-desc-input:focus + .cr-desc-count { opacity:1; }
.cr-desc-count.near-limit { color:#d97706; }
body.cr-view-mode .cr-builder-desc-input { padding-left:0; }
body.cr-view-mode .cr-desc-count { display:none; }
body.dark-theme .cr-builder-desc-input:focus { background:var(--theme-card-bg); color:var(--theme-text); }
.cr-builder-topbar-right { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }

/* Export menu */
.cr-export { position:relative; }
.cr-export-menu { display:none; position:absolute; top:calc(100% + 6px); right:0; z-index:50; background:#fff; border:1px solid var(--cr-bd);
    border-radius:10px; box-shadow:0 10px 28px rgba(0,0,0,.14); overflow:hidden; min-width:170px; }
.cr-export-menu.show { display:block; }
.cr-export-menu button { display:flex; align-items:center; gap:10px; width:100%; padding:10px 14px; border:none; background:none;
    font-size:.85rem; color:var(--cr-ink); cursor:pointer; text-align:left; font-family:inherit; }
.cr-export-menu button:hover { background:var(--cr-beige); color:var(--cr-green); }
.cr-export-menu i.fa-file-excel { color:#2F8542; }
.cr-export-menu i.fa-file-csv { color:#18A74B; }

/* Body split */
.cr-builder-body { flex:1; min-height:0; display:flex; }
.cr-config { width:352px; flex-shrink:0; overflow-y:auto; background:var(--cr-bg); border-right:1px solid var(--cr-bd); padding:16px; }
.cr-preview-wrap { flex:1; min-width:0; display:flex; flex-direction:column; background:var(--cr-bg); }
.cr-preview-toolbar { display:flex; align-items:center; justify-content:space-between; padding:16px 20px 10px; background:transparent; }
.cr-preview-title { font-weight:700; font-size:.92rem; color:var(--cr-ink); display:inline-flex; align-items:center; gap:8px; }
.cr-preview-title i { color:var(--cr-green); }
.cr-group-actions { display:inline-flex; gap:6px; margin-left:14px; }
.cr-ga-btn { display:inline-flex; align-items:center; gap:6px; border:1px solid var(--cr-bd); background:#fff; border-radius:7px; padding:6px 11px; font-size:.78rem; font-weight:600; color:var(--cr-green-dk); cursor:pointer; font-family:inherit; transition:.15s; }
.cr-ga-btn:hover { border-color:var(--cr-green); background:var(--cr-beige); }
body.dark-theme .cr-ga-btn { background:var(--theme-card-bg); border-color:var(--theme-border); color:var(--theme-text); }
/* "Collapse to" level menu (multi-level grouping) */
.cr-ga-dd { position:relative; display:inline-flex; }
.cr-ga-caret { font-size:.6rem; margin-left:1px; transition:transform .18s; }
.cr-ga-dd.open .cr-ga-caret { transform:rotate(180deg); }
.cr-ga-menu { display:none; position:absolute; top:calc(100% + 5px); right:0; min-width:200px; z-index:40;
    background:#fff; border:1px solid var(--cr-bd); border-radius:9px; box-shadow:0 10px 26px rgba(0,0,0,.14); padding:4px; }
.cr-ga-dd.open .cr-ga-menu { display:block; }
.cr-ga-menu-head { font-size:.64rem; font-weight:700; text-transform:uppercase; letter-spacing:.5px; color:var(--cr-muted); padding:7px 9px 4px; }
.cr-ga-menu button { display:flex; align-items:center; gap:9px; width:100%; border:none; background:none; border-radius:6px;
    padding:8px 9px; font-size:.82rem; color:var(--cr-ink); cursor:pointer; text-align:left; font-family:inherit; }
.cr-ga-menu button:hover { background:var(--cr-beige); color:var(--cr-green-dk); }
.cr-ga-menu button i { color:var(--cr-green); font-size:.78rem; width:16px; text-align:center; }
body.dark-theme .cr-ga-menu { background:var(--theme-card-bg); border-color:var(--theme-border); }
body.dark-theme .cr-ga-menu button { color:var(--theme-text); }
body.dark-theme .cr-ga-menu button:hover { background:var(--theme-hover); }
.cr-view-toggle { display:inline-flex; border:1px solid var(--cr-bd); border-radius:8px; overflow:hidden; background:#fff; margin-left:auto; }
.cr-vt-btn { display:inline-flex; align-items:center; gap:6px; border:none; background:#fff; color:#64748b; font-family:inherit; font-size:.8rem; font-weight:600; padding:6px 13px; cursor:pointer; transition:.15s; }
.cr-vt-btn + .cr-vt-btn { border-left:1px solid var(--cr-bd); }
.cr-vt-btn:hover { background:var(--cr-beige); color:var(--cr-green-dk); }
.cr-vt-btn.active { background:var(--cr-green); color:#fff; }
.cr-row-count { font-size:.85rem; color:var(--cr-muted); background:var(--cr-beige); padding:5px 14px; border-radius:999px; margin-left:12px; }

/* ===================== TABLE (sheet/Excel) VIEW ===================== */
.cr-table.cr-sheet { font-size:.82rem; }
.cr-table.cr-sheet thead th { background:#eef1f4; color:#374151; border:1px solid #cdd3da; text-transform:none; letter-spacing:0; font-weight:600; box-shadow:none; padding:8px 12px; }
.cr-table.cr-sheet tbody td { border:1px solid #e3e6ea; background:#fff !important; font-variant-numeric:tabular-nums; padding:6px 12px; }
.cr-table.cr-sheet tbody tr:hover td { background:#f3f7f4 !important; }
.cr-table.cr-sheet .cr-group-head td { background:#e8edf3 !important; color:#1f2937; font-weight:700; border:1px solid #cdd3da; }
.cr-table.cr-sheet .cr-subtotal td { background:#f6f8fa !important; color:#334155; border:1px solid #e3e6ea; }
.cr-table.cr-sheet .cr-grandtotal td { background:#dde3ea !important; color:#111827; border:1px solid #c2c9d2; }
.cr-table.cr-sheet .cr-agg-fn { display:none; }
.cr-table.cr-sheet .cr-grp-count { background:#fff; color:#475569; border-color:#cdd3da; }
body.dark-theme .cr-table.cr-sheet thead th { background:var(--theme-table-header); color:var(--theme-text); border-color:var(--theme-border); }
body.dark-theme .cr-table.cr-sheet tbody td { background:var(--theme-card-bg) !important; border-color:var(--theme-border-light); }
body.dark-theme .cr-table.cr-sheet .cr-group-head td { background:var(--theme-surface-alt) !important; color:var(--theme-text); }
body.dark-theme .cr-table.cr-sheet .cr-subtotal td, body.dark-theme .cr-table.cr-sheet .cr-grandtotal td { background:var(--theme-surface) !important; color:var(--theme-text); }
body.dark-theme .cr-view-toggle { background:var(--theme-card-bg); border-color:var(--theme-border); }
body.dark-theme .cr-vt-btn { background:var(--theme-card-bg); color:var(--theme-text-secondary); }
body.dark-theme .cr-vt-btn.active { background:var(--cr-green); color:#fff; }
.cr-row-count strong { color:var(--cr-green-dk); }
/* The table sits on a white "card" floating over the gray builder body, so it
   reads as a distinct surface. No top padding INSIDE the scroll container — a
   sticky <thead> sticks to the padding-box top, so any top padding would leave
   a transparent band above the header where scrolled rows peek through. The
   card's gutter comes from the margin (outside the scroll area) instead. */
.cr-preview { flex:1; min-height:0; overflow:auto; padding:0;
    margin:0 20px 20px; background:#fff; border:1px solid var(--cr-bd); border-radius:12px;
    box-shadow:0 1px 3px rgba(0,0,0,.05), 0 6px 18px rgba(0,0,0,.04); }

/* View mode → hide config, hide edit-only, show view-only */
body.cr-view-mode .cr-config { display:none; }
body.cr-view-mode .cr-edit-only { display:none !important; }
.cr-view-only { display:none; }
body.cr-view-mode .cr-view-only { display:inline-flex; }

/* ===================== CONFIG SECTIONS ===================== */
.cr-cfg-sec { background:#fff; border:1px solid var(--cr-bd); border-radius:12px; margin-bottom:14px; overflow:hidden; box-shadow:0 1px 3px rgba(0,0,0,.04); }
.cr-cfg-head { display:flex; align-items:center; gap:9px; padding:11px 14px; background:linear-gradient(135deg,var(--cr-beige),#fff);
    border-bottom:1px solid var(--cr-bd-soft); font-weight:700; font-size:.82rem; color:var(--cr-green-dk); }
.cr-cfg-head i { color:var(--cr-green); }
.cr-cfg-sub { margin-left:auto; font-size:.7rem; font-weight:600; color:var(--cr-caramel); background:#fbf7ef; padding:2px 8px; border-radius:999px; }
.cr-cfg-body { padding:12px 14px; }
.cr-hint { font-size:.78rem; color:var(--cr-muted); margin:8px 0 0; line-height:1.45; }
.cr-field-label { display:block; font-size:.74rem; font-weight:700; text-transform:uppercase; letter-spacing:.5px; color:var(--cr-muted); margin-bottom:6px; }

/* Module picker */
.cr-mod-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.cr-mod-opt { display:flex; flex-direction:column; align-items:center; gap:6px; padding:12px 8px; border:1.5px solid var(--cr-bd);
    border-radius:10px; background:#fff; cursor:pointer; transition:.15s; font-size:.78rem; font-weight:600; color:#475569; font-family:inherit; }
.cr-mod-opt i { font-size:1.15rem; color:#94a3b8; transition:.15s; }
.cr-mod-opt:hover { border-color:var(--cr-green); background:var(--cr-beige); }
.cr-mod-opt.active { border-color:var(--cr-green); background:var(--cr-beige); color:var(--cr-green-dk); box-shadow:0 0 0 2px rgba(30,99,50,.12); }
.cr-mod-opt.active i { color:var(--cr-green); }

/* Columns */
.cr-chosen-cols { display:flex; flex-direction:column; gap:6px; }
.cr-col-chip { display:flex; align-items:center; gap:8px; background:var(--cr-beige); border:1px solid var(--cr-bd-soft); border-radius:8px;
    padding:7px 8px 7px 6px; font-size:.83rem; font-weight:500; color:var(--cr-ink); cursor:grab; transition:.12s; }
.cr-col-chip.dragging { opacity:.45; }
.cr-col-chip.drag-over { box-shadow:inset 0 2px 0 var(--cr-green); }
.cr-grip { color:#b3bdc9; font-size:.8rem; }
.cr-col-chip span { flex:1; }
.cr-col-x { border:none; background:none; color:#94a3b8; cursor:pointer; width:20px; height:20px; border-radius:5px; font-size:.78rem; }
.cr-col-x:hover { background:#fee2e2; color:#dc2626; }
.cr-empty-cols { font-style:italic; }
.cr-avail-label { font-size:.72rem; font-weight:800; text-transform:uppercase; letter-spacing:.6px; color:var(--cr-green-dk);
    margin:14px 0 4px; padding-bottom:7px; border-bottom:1px solid var(--cr-bd); }
.cr-avail-cols { display:flex; flex-wrap:wrap; gap:6px; }
/* Category sub-header inside "Add fields" — small tinted icon chip + label +
   trailing hairline so each module's fields read as a clean section. */
.cr-cat-label { display:flex; align-items:center; gap:8px; margin:13px 0 8px; font-size:.8rem; font-weight:700; color:var(--cr-green-dk); white-space:nowrap; }
.cr-cat-label:first-of-type { margin-top:9px; }
.cr-cat-label i { display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; flex:0 0 auto;
    border-radius:6px; background:linear-gradient(135deg,var(--cr-beige),var(--cr-beige-dk)); color:var(--cr-green); font-size:.72rem; }
.cr-cat-label::after { content:''; flex:1; height:1px; background:var(--cr-bd-soft); margin-left:2px; }
.cr-add-col { display:inline-flex; align-items:center; gap:5px; border:1px dashed var(--cr-bd); background:#fff; border-radius:7px;
    padding:5px 9px; font-size:.78rem; color:var(--cr-green-dk); cursor:pointer; transition:.13s; font-family:inherit; }
.cr-add-col:hover { border-color:var(--cr-green); border-style:solid; background:var(--cr-beige); }
.cr-add-col i { font-size:.66rem; color:var(--cr-green); }
body.dark-theme .cr-cat-label { color:var(--theme-text); }
body.dark-theme .cr-cat-label i { background:var(--theme-hover); color:var(--cr-emerald); }
body.dark-theme .cr-avail-label { color:var(--theme-text); border-color:var(--theme-border); }

/* Filters / sorts shared inputs */
.cr-sel, .cr-input { border:1px solid var(--cr-bd); border-radius:7px; padding:7px 9px; font-size:.82rem; background:#fff;
    color:var(--cr-ink); outline:none; font-family:inherit; transition:.15s; }
.cr-sel:focus, .cr-input:focus { border-color:var(--cr-green); box-shadow:0 0 0 2px rgba(30,99,50,.12); }
.cr-full { width:100%; }

/* Custom icon dropdown — used by Group / Sort / Filter field pickers so the
   values can show icons (native <option> can't). Panel is in-flow so it never
   gets clipped by the scrolling config column. */
.cr-cselect { position:relative; }
.cr-sort-row { align-items:flex-start; }
.cr-sort-row .cr-cselect { flex:1; min-width:0; }
.cr-sort-row .cr-sort-ord { margin-top:9px; }
.cr-sort-row .cr-dir-toggle, .cr-sort-row .cr-row-x { margin-top:3px; }
.cr-cselect-trigger { display:flex; align-items:center; gap:8px; width:100%; background:#fff; border:1px solid var(--cr-bd);
    border-radius:7px; padding:8px 10px; font-size:.83rem; color:var(--cr-ink); cursor:pointer; font-family:inherit; text-align:left; transition:.15s; }
.cr-cselect-trigger:hover { border-color:#cbd5e1; }
.cr-cselect.open .cr-cselect-trigger { border-color:var(--cr-green); box-shadow:0 0 0 2px rgba(30,99,50,.12); }
.cr-cs-ic { width:16px; text-align:center; color:var(--cr-green); font-size:.82rem; flex-shrink:0; }
.cr-cs-ic.muted { color:#94a3b8; }
.cr-cs-label { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cr-cs-caret { color:#94a3b8; font-size:.7rem; transition:transform .18s; flex-shrink:0; }
.cr-cselect.open .cr-cs-caret { transform:rotate(180deg); }
.cr-cselect-panel { display:none; margin-top:5px; border:1px solid var(--cr-bd); border-radius:9px; background:#fff;
    box-shadow:0 10px 26px rgba(0,0,0,.12); max-height:280px; overflow-y:auto; padding:4px; position:relative; z-index:20; }
.cr-cselect.open .cr-cselect-panel { display:block; }
.cr-cselect-cat { font-size:.64rem; font-weight:700; text-transform:uppercase; letter-spacing:.6px; color:var(--cr-muted); padding:9px 8px 4px; }
.cr-cselect-opt { display:flex; align-items:center; gap:9px; width:100%; border:none; background:none; border-radius:6px;
    padding:7px 9px; font-size:.84rem; color:var(--cr-ink); cursor:pointer; text-align:left; font-family:inherit; }
.cr-cselect-opt:hover { background:var(--cr-beige); }
.cr-cselect-opt.selected { background:var(--cr-beige); color:var(--cr-green-dk); font-weight:600; }
.cr-cselect-opt .cr-cs-check { margin-left:auto; color:var(--cr-green); font-size:.75rem; }
/* Searchable field picker — sticky search box at the top of the panel */
.cr-cs-search-wrap { position:sticky; top:-4px; z-index:3; display:flex; align-items:center; gap:7px; margin:-4px -4px 4px; padding:8px 10px;
    background:#fff; border-bottom:1px solid var(--cr-bd-soft); }
.cr-cs-search-wrap i { color:var(--cr-muted); font-size:.74rem; }
.cr-cs-search { flex:1; min-width:0; border:1px solid var(--cr-bd); border-radius:6px; padding:6px 9px; font-size:.8rem; font-family:inherit; color:var(--cr-ink); outline:none; }
.cr-cs-search:focus { border-color:var(--cr-green); box-shadow:0 0 0 2px rgba(30,99,50,.12); }
.cr-cs-noresult { padding:12px; font-size:.78rem; color:var(--cr-muted); text-align:center; }
body.dark-theme .cr-cs-search-wrap { background:var(--theme-card-bg); border-color:var(--theme-border); }
body.dark-theme .cr-cs-search { background:var(--theme-surface); border-color:var(--theme-border); color:var(--theme-text); }

.cr-match { display:flex; align-items:center; gap:7px; font-size:.78rem; color:var(--cr-muted); margin-bottom:10px; }
.cr-match-btn { border:1px solid var(--cr-bd); background:#fff; border-radius:6px; padding:3px 10px; font-size:.72rem; font-weight:700;
    color:#64748b; cursor:pointer; font-family:inherit; }
.cr-match-btn.active { background:var(--cr-green); border-color:var(--cr-green); color:#fff; }
.cr-filter-rows, .cr-sort-rows { display:flex; flex-direction:column; gap:8px; }
.cr-filter-row { display:flex; align-items:center; gap:6px; flex-wrap:wrap; background:#fafbfc; border:1px solid var(--cr-bd-soft); border-radius:9px; padding:8px; }
.cr-filter-row .cr-f-field { flex:1 1 100%; }
.cr-filter-row .cr-f-op { flex:1 1 46%; }
.cr-filter-row .cr-f-val { flex:1 1 40%; min-width:90px; }
.cr-and { font-size:.74rem; color:var(--cr-muted); }
.cr-row-x { border:none; background:none; color:#94a3b8; cursor:pointer; width:26px; height:26px; border-radius:6px; font-size:.82rem; flex-shrink:0; margin-left:auto; }
.cr-row-x:hover { background:#fee2e2; color:#dc2626; }
.cr-add-row { display:inline-flex; align-items:center; gap:6px; border:1px dashed var(--cr-bd); background:#fff; border-radius:8px;
    padding:7px 12px; font-size:.8rem; color:var(--cr-green-dk); cursor:pointer; margin-top:10px; font-family:inherit; transition:.13s; }
.cr-add-row:hover { border-color:var(--cr-green); border-style:solid; background:var(--cr-beige); }
.cr-add-row i { color:var(--cr-green); font-size:.7rem; }

/* Sort rows */
.cr-sort-row { display:flex; align-items:center; gap:7px; }
.cr-sort-row .cr-sel { flex:1; }
.cr-sort-ord { width:20px; height:20px; border-radius:50%; background:var(--cr-green); color:#fff; font-size:.7rem; font-weight:700;
    display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; }
.cr-dir-toggle { display:flex; border:1px solid var(--cr-bd); border-radius:7px; overflow:hidden; }
.cr-dir-toggle button { border:none; background:#fff; padding:6px 9px; cursor:pointer; color:#64748b; font-size:.78rem; }
.cr-dir-toggle button.active { background:var(--cr-green); color:#fff; }

/* Grouping levels (nested sub-groups, up to 5) */
.cr-group-levels { display:flex; flex-direction:column; gap:8px; margin-bottom:4px; }
.cr-group-level { display:flex; align-items:flex-start; gap:7px; }
.cr-group-level > .cr-cselect { flex:1; min-width:0; }
.cr-group-level .cr-sort-ord { margin-top:9px; }
.cr-group-level .cr-row-x { margin-top:4px; }
/* Date granularity picker sits beside the grouped date field */
.cr-group-gran { flex:0 0 132px; min-width:0; }
.cr-group-gran .cr-cselect { width:100%; }
.cr-group-gran .cr-cselect-trigger { font-size:.78rem; padding:7px 9px; }
/* deeper group headers get a slightly lighter band so nesting reads clearly */
.cr-table .cr-group-head.cr-grp-d1 td { background:#f5f8f5; }
.cr-table .cr-group-head.cr-grp-d2 td { background:#f8faf9; }
.cr-table .cr-group-head.cr-grp-d3 td, .cr-table .cr-group-head.cr-grp-d4 td { background:#fbfcfc; }

/* Aggregates */
.cr-agg-list { display:flex; flex-direction:column; gap:6px; }
.cr-agg-row { display:flex; align-items:center; justify-content:space-between; gap:10px; font-size:.82rem; color:var(--cr-ink); }
.cr-agg-row .cr-sel { padding:4px 7px; font-size:.74rem; }

/* ===================== PREVIEW TABLE ===================== */
.cr-table { width:100%; border-collapse:collapse; font-size:.86rem; background:#fff; }
/* Clean, flat header — solid warm-white, muted label text, a single crisp
   bottom rule. (The old diagonal beige gradient created an ugly seam.) */
.cr-table thead th { position:sticky; top:0; z-index:5; background:#faf9f6;
    color:#5f6b64; text-align:left; font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.7px;
    padding:13px 16px; border-bottom:2px solid var(--cr-bd); white-space:nowrap; box-shadow:0 1px 0 rgba(0,0,0,.02); }
.cr-table th.cr-num, .cr-table td.cr-num { text-align:right; }
.cr-table tbody td { padding:10px 16px; border-bottom:1px solid var(--cr-bd-soft); vertical-align:middle; white-space:nowrap; }
/* Subtle zebra for scanability (flat tables). */
.cr-table tbody tr:not(.cr-group-head):not(.cr-subtotal):nth-child(even) td { background:#fcfbf9; }
.cr-table.cr-clickable tbody tr:not(.cr-group-head):not(.cr-subtotal):hover td { background:var(--cr-beige); cursor:pointer; }
/* Stripe toggle — kill zebra when "Striped rows" is off in settings. */
.cr-table:not(.cr-striped) tbody tr:not(.cr-group-head):not(.cr-subtotal):nth-child(even) td { background:transparent; }
/* Row density */
.cr-table.cr-density-compact thead th { padding:8px 16px; }
.cr-table.cr-density-compact tbody td { padding:5px 16px; }
.cr-table.cr-density-spacious thead th { padding:16px 18px; }
.cr-table.cr-density-spacious tbody td { padding:15px 18px; }
/* Row-number column */
.cr-table .cr-rownum, .cr-table .cr-rownum-th { width:46px; text-align:right; color:#9aa3ad; font-variant-numeric:tabular-nums;
    font-size:.74rem; padding-right:14px; }
.cr-table .cr-rownum-th { font-weight:700; }

/* ===================== PIVOT / MATRIX ===================== */
.cr-table.cr-pivot { table-layout:auto; }
.cr-table.cr-pivot thead th { background:#faf9f6; }
.cr-table.cr-pivot th.cr-pivot-corner { text-align:left; color:var(--cr-green-dk); background:var(--cr-beige); }
.cr-table.cr-pivot td.cr-pivot-rowhead { font-weight:600; color:var(--cr-ink); background:#fbfdfb; white-space:nowrap;
    position:sticky; left:0; z-index:1; border-right:1px solid var(--cr-bd-soft); }
.cr-table.cr-pivot th.cr-pivot-th-total, .cr-table.cr-pivot td.cr-pivot-rowtotal {
    background:var(--cr-beige); font-weight:700; color:var(--cr-green-dk); border-left:1px solid var(--cr-bd); }
.cr-table.cr-pivot tbody tr:hover td { background:#f7faf8; }
.cr-table.cr-pivot tbody tr:hover td.cr-pivot-rowtotal { background:var(--cr-beige-dk); }
/* Nested row groups — parent subtotal rows */
.cr-table.cr-pivot tbody tr.cr-pivot-grouprow td { background:#eef4ef; color:var(--cr-green-dk); border-top:1px solid var(--cr-bd-soft); }
.cr-table.cr-pivot tbody tr.cr-pivot-grouprow td.cr-pivot-rowhead { font-weight:700; }
.cr-table.cr-pivot tbody tr.cr-pivot-grouprow.cr-pivot-gd1 td { background:#f4f8f5; }
.cr-table.cr-pivot tbody tr.cr-pivot-grouprow.cr-pivot-gd2 td { background:#f8fbf9; }
.cr-table.cr-pivot tbody tr.cr-pivot-grouprow:hover td { background:#e6efe8; }
body.dark-theme .cr-table.cr-pivot tbody tr.cr-pivot-grouprow td { background:var(--theme-hover); color:var(--theme-text); }

/* Layout toggle + pivot config controls */
.cr-seg.cr-seg-wide { display:flex; width:100%; }
.cr-seg.cr-seg-wide .cr-seg-btn { flex:1; display:inline-flex; align-items:center; justify-content:center; gap:7px; padding:9px 12px; }
.cr-pivot-totals { display:flex; flex-direction:column; gap:8px; }
.cr-check { display:flex; align-items:center; gap:8px; font-size:.84rem; color:var(--cr-ink); cursor:pointer; }
.cr-check input { accent-color:var(--cr-green); width:15px; height:15px; cursor:pointer; }
body.dark-theme .cr-table.cr-pivot thead th, body.dark-theme .cr-table.cr-pivot td.cr-pivot-rowhead { background:var(--theme-surface); color:var(--theme-text); }
body.dark-theme .cr-table.cr-pivot th.cr-pivot-corner, body.dark-theme .cr-table.cr-pivot th.cr-pivot-th-total,
body.dark-theme .cr-table.cr-pivot td.cr-pivot-rowtotal { background:var(--theme-hover); color:var(--theme-text); }
body.dark-theme .cr-check { color:var(--theme-text); }

/* Column resizing — drag the right edge of any header. (The sticky <th> is a
   positioned box, so the absolute handle anchors to it without breaking the
   sticky header.) */
.cr-table.cr-resizable th, .cr-table.cr-resizable td { overflow:hidden; text-overflow:ellipsis; }
.cr-col-resize { position:absolute; top:0; right:-2px; width:9px; height:100%; cursor:col-resize; z-index:7; user-select:none; }
.cr-col-resize::after { content:''; position:absolute; top:18%; bottom:18%; right:4px; width:2px; border-radius:2px; background:transparent; transition:background .12s; }
.cr-col-resize:hover::after, .cr-col-resize.active::after { background:var(--cr-green); }
.cr-muted { color:#b8c0cc; }

/* Group rows */
.cr-group-head td { background:#f3f6f4; border-top:1px solid var(--cr-bd); border-bottom:1px solid var(--cr-bd-soft); cursor:pointer;
    font-weight:700; color:var(--cr-green-dk); padding:9px 14px; }
.cr-grp-caret { width:14px; color:var(--cr-green); margin-right:8px; font-size:.78rem; }
.cr-grp-label { font-size:.86rem; }
.cr-grp-count { background:#fff; color:var(--cr-green); border:1px solid var(--cr-bd); border-radius:999px; padding:1px 9px; font-size:.72rem; margin-left:9px; }
.cr-group-head:hover td { background:var(--cr-beige); }

/* Subtotal + grand total */
.cr-subtotal td { background:#fbfdfb; border-top:1px dashed var(--cr-bd); border-bottom:1px solid var(--cr-bd-soft);
    font-weight:600; color:var(--cr-green-dk); padding:8px 14px; font-size:.82rem; }
.cr-subtotal td:first-child { font-style:italic; color:var(--cr-muted); }
.cr-grandtotal td { background:var(--cr-green); color:#fff; font-weight:700; padding:11px 14px; font-size:.86rem; border:none; }
.cr-grandtotal td:first-child { border-radius:0 0 0 8px; }
.cr-grandtotal td:last-child { border-radius:0 0 8px 0; }
.cr-agg-fn { font-size:.6rem; opacity:.7; text-transform:uppercase; letter-spacing:.5px; margin-right:3px; }
.cr-grandtotal .cr-agg-fn { opacity:.85; }

/* Status badge in preview */
.cr-badge { display:inline-flex; align-items:center; padding:3px 10px; border-radius:999px; font-size:.68rem; font-weight:700;
    text-transform:uppercase; letter-spacing:.4px; }
.cr-badge.funded { background:#e7f0ea; color:#1e6332; }
.cr-badge.in-process { background:#f6efe4; color:#8a6536; }
.cr-badge.closed { background:#eceeef; color:#475453; }
.cr-badge.withdrawn { background:#fbe9e9; color:#b00000; }

/* Preview empty states */
.cr-preview-empty { display:flex; flex-direction:column; align-items:center; justify-content:center; height:100%; color:var(--cr-muted);
    text-align:center; gap:10px; padding:40px; }
.cr-preview-empty i { font-size:2.4rem; color:#cbd5e1; }
.cr-preview-empty p { margin:0; font-size:.92rem; }

/* ===================== SHARE MODAL ===================== */
.cr-modal-backdrop { position:fixed; inset:0; background:rgba(15,23,42,.55); z-index:10120; display:flex; align-items:center; justify-content:center; padding:20px; }
.cr-modal { background:#fff; border-radius:16px; width:100%; max-width:560px; max-height:88vh; display:flex; flex-direction:column; overflow:hidden; box-shadow:0 24px 60px rgba(0,0,0,.3); }
.cr-modal-head { display:flex; align-items:center; justify-content:space-between; padding:16px 20px; background:linear-gradient(135deg,var(--cr-green),var(--cr-green-dk)); color:#fff; }
.cr-modal-title { display:flex; align-items:center; gap:10px; font-weight:700; font-size:1.02rem; }
.cr-modal-close { width:32px; height:32px; border:none; background:rgba(255,255,255,.16); color:#fff; border-radius:8px; cursor:pointer; }
.cr-modal-close:hover { background:rgba(255,255,255,.28); }
.cr-modal-body { padding:18px 20px; overflow-y:auto; }
.cr-modal-foot { display:flex; justify-content:flex-end; gap:10px; padding:14px 20px; border-top:1px solid var(--cr-bd); }

/* ===================== SETTINGS MODAL ===================== */
.cr-settings-modal { max-width:600px; }
.cr-set-section { margin-bottom:18px; }
.cr-set-section:last-child { margin-bottom:0; }
.cr-set-head { display:flex; align-items:center; gap:8px; font-size:.74rem; font-weight:800; text-transform:uppercase; letter-spacing:.6px;
    color:var(--cr-green-dk); margin:0 0 8px; padding-bottom:6px; border-bottom:1px solid var(--cr-bd-soft); }
.cr-set-head i { color:var(--cr-green); }
.cr-set-row { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:8px 4px; }
.cr-set-row + .cr-set-row { border-top:1px solid var(--cr-bd-soft); }
.cr-set-row-text { display:flex; flex-direction:column; gap:2px; min-width:0; }
.cr-set-row-label { font-size:.86rem; font-weight:600; color:var(--cr-ink); }
.cr-set-row-hint { font-size:.74rem; color:var(--cr-muted); }
/* Toggle switch */
.cr-switch { position:relative; flex:0 0 auto; width:42px; height:24px; border-radius:999px; border:none; background:#cbd5d0; cursor:pointer; transition:.18s; padding:0; }
.cr-switch.on { background:var(--cr-green); }
.cr-switch-knob { position:absolute; top:3px; left:3px; width:18px; height:18px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.25); transition:.18s; }
.cr-switch.on .cr-switch-knob { transform:translateX(18px); }
/* Segmented control */
.cr-seg { display:inline-flex; background:#eef0f2; border-radius:8px; padding:2px; gap:2px; }
.cr-seg-btn { border:none; background:none; border-radius:6px; padding:6px 12px; font-size:.78rem; font-weight:600; color:#5f6b64;
    cursor:pointer; font-family:inherit; transition:.14s; }
.cr-seg-btn:hover { color:var(--cr-green-dk); }
.cr-seg-btn.active { background:#fff; color:var(--cr-green-dk); box-shadow:0 1px 3px rgba(0,0,0,.12); }
.cr-seg.cr-seg-sm .cr-seg-btn { padding:5px 9px; }
.cr-seg-btn.cr-seg-icon { padding:5px 8px; }
/* Per-column formatting rows */
.cr-colfmt-head { display:grid; grid-template-columns:1fr auto auto; gap:12px; align-items:center; padding:0 4px 6px;
    font-size:.66rem; font-weight:700; text-transform:uppercase; letter-spacing:.5px; color:var(--cr-muted); }
.cr-colfmt-row { display:grid; grid-template-columns:1fr auto auto; gap:12px; align-items:center; padding:7px 4px; }
.cr-colfmt-row + .cr-colfmt-row { border-top:1px solid var(--cr-bd-soft); }
.cr-colfmt-name { font-size:.84rem; font-weight:600; color:var(--cr-ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cr-bold-btn { width:34px; height:30px; border:1px solid var(--cr-bd); background:#fff; border-radius:7px; color:#5f6b64; cursor:pointer; transition:.14s; }
.cr-bold-btn:hover { border-color:var(--cr-green); color:var(--cr-green-dk); }
.cr-bold-btn.on { background:var(--cr-green); border-color:var(--cr-green); color:#fff; }
/* Dark theme */
body.dark-theme .cr-seg { background:var(--theme-surface); }
body.dark-theme .cr-seg-btn.active { background:var(--theme-card-bg); color:var(--theme-text); }
body.dark-theme .cr-set-row-label, body.dark-theme .cr-colfmt-name { color:var(--theme-text); }
body.dark-theme .cr-switch { background:var(--theme-border); }
body.dark-theme .cr-switch.on { background:var(--cr-green); }
body.dark-theme .cr-bold-btn { background:var(--theme-card-bg); border-color:var(--theme-border); color:var(--theme-text); }

.cr-share-modes { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:16px; }
.cr-share-mode { display:flex; align-items:flex-start; gap:11px; text-align:left; padding:12px; border:1.5px solid var(--cr-bd);
    border-radius:11px; background:#fff; cursor:pointer; transition:.15s; font-family:inherit; }
.cr-share-mode i { color:#94a3b8; font-size:1rem; margin-top:2px; }
.cr-share-mode strong { display:block; font-size:.86rem; color:var(--cr-ink); }
.cr-share-mode span { font-size:.74rem; color:var(--cr-muted); line-height:1.35; }
.cr-share-mode:hover { border-color:var(--cr-green); background:var(--cr-beige); }
.cr-share-mode.active { border-color:var(--cr-green); background:var(--cr-beige); box-shadow:0 0 0 2px rgba(30,99,50,.12); }
.cr-share-mode.active i { color:var(--cr-green); }
.cr-share-block { margin-top:14px; }
.cr-share-block label { display:block; font-size:.74rem; font-weight:700; text-transform:uppercase; letter-spacing:.5px; color:var(--cr-muted); margin-bottom:7px; }
.cr-chip-wrap { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:8px; }
.cr-chip { display:inline-flex; align-items:center; gap:6px; background:var(--cr-beige); border:1px solid var(--cr-bd-soft); border-radius:999px;
    padding:4px 6px 4px 11px; font-size:.8rem; color:var(--cr-green-dk); }
.cr-chip button { border:none; background:none; color:#94a3b8; cursor:pointer; width:18px; height:18px; border-radius:50%; font-size:.7rem; }
.cr-chip button:hover { background:#fee2e2; color:#dc2626; }
.cr-share-add { display:flex; gap:8px; }
.cr-share-add .cr-input { flex:1; }
.cr-loc-list { display:flex; flex-direction:column; gap:4px; max-height:200px; overflow-y:auto; border:1px solid var(--cr-bd-soft); border-radius:9px; padding:6px; }
.cr-loc-item { display:flex; align-items:center; gap:9px; padding:6px 8px; border-radius:7px; font-size:.85rem; cursor:pointer; color:var(--cr-ink); }
.cr-loc-item:hover { background:var(--cr-beige); }
.cr-loc-item i { color:var(--cr-green); font-size:.82rem; }
.cr-share-note { margin-top:14px; padding-top:12px; border-top:1px solid var(--cr-bd-soft); display:flex; gap:7px; align-items:flex-start; }
.cr-share-note i { color:var(--cr-caramel); margin-top:2px; }

/* =====================================================================
   SHARED LEGACY STYLES — the global #exportOptionsModal (in index.html) and
   the .column-manager dropdown are reused by Claims & Drafts. These styles
   historically lived in reports.css; they MUST stay here even though the new
   builder doesn't use them. Without `.export-options-modal { display:none }`
   the modal's content leaks inline at the bottom of every page.
   ===================================================================== */
.column-manager { position: relative; }
.column-manager-dropdown { position: absolute; top: calc(100% + 5px); right: 0; width: 280px; background: #fff;
    border-radius: 0.5rem; box-shadow: 0 4px 20px rgba(0,0,0,0.15); border: 1px solid #e2e8f0; z-index: 100;
    display: none; max-height: 400px; overflow: hidden; }
.column-manager-dropdown.show { display: block; }
.column-manager-header { padding: 0.75rem 1rem; border-bottom: 1px solid #e2e8f0; display: flex; justify-content: space-between; align-items: center; }
.column-manager-header h6 { margin: 0; font-size: 0.85rem; font-weight: 600; }
.column-manager-body { padding: 0.5rem; max-height: 280px; overflow-y: auto; }
.column-item { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.75rem; border-radius: 0.375rem; cursor: pointer; transition: background 0.15s ease; }
.column-item:hover { background: #F4F0E9; }
.column-item input[type="checkbox"] { accent-color: #1E6332; }
.column-item label { flex: 1; cursor: pointer; font-size: 0.85rem; margin: 0; }
.column-item .drag-handle { color: #9ca3af; cursor: grab; padding: 2px; transition: color 0.15s ease; }
.column-item .drag-handle:active { cursor: grabbing; }
.column-item.dragging { opacity: 0.5; background: #e2e8f0; }
.column-item.drag-over { border-top: 2px solid #1E6332; }
.column-manager-footer { padding: 0.75rem 1rem; border-top: 1px solid #e2e8f0; display: flex; justify-content: space-between; gap: 0.5rem; }

.export-options-modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.5); z-index: 2000; align-items: center; justify-content: center; }
.export-options-modal.show { display: flex; }
.export-options-content { background: #fff; border-radius: 0.75rem; width: 100%; max-width: 500px; box-shadow: 0 25px 50px rgba(0,0,0,0.25); }
.export-options-header { padding: 1.25rem 1.5rem; border-bottom: 1px solid #e2e8f0; display: flex; justify-content: space-between; align-items: center; }
.export-options-header h5 { margin: 0; display: flex; align-items: center; gap: 0.5rem; }
.export-options-body { padding: 1.5rem; }
.export-format-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; margin-bottom: 1.5rem; }
.export-format-option { border: 2px solid #e2e8f0; border-radius: 0.5rem; padding: 1rem; cursor: pointer; transition: all 0.2s ease; text-align: center; }
.export-format-option:hover { border-color: #1E6332; }
.export-format-option.selected { border-color: #1E6332; background: #F4F0E9; }
.export-format-option i { font-size: 2rem; margin-bottom: 0.5rem; display: block; }
.export-format-option i.fa-file-csv { color: #18A74B; }
.export-format-option i.fa-file-excel { color: #2F8542; }
.export-format-option i.fa-file-pdf { color: #ef4444; }
.export-format-option i.fa-print { color: #3b82f6; }
.export-format-option span { font-size: 0.85rem; font-weight: 500; }
.export-options-footer { padding: 1rem 1.5rem; border-top: 1px solid #e2e8f0; display: flex; justify-content: flex-end; gap: 0.75rem; }

/* ============================ RESPONSIVE ============================ */
@media (max-width:900px) {
    .cr-config { width:300px; }
}
@media (max-width:768px) {
    .cr-list-view { padding:18px 16px 40px; }
    .cr-builder-body { flex-direction:column; }
    .cr-config { width:100%; max-height:46%; border-right:none; border-bottom:1px solid var(--cr-bd); }
    body.cr-view-mode .cr-config { display:none; }
    .cr-share-modes { grid-template-columns:1fr; }
    .cr-builder-name-input { min-width:140px; }
}

/* ============================ DARK THEME ============================ */
body.dark-theme .cr-root { --cr-ink:var(--theme-text); --cr-bd:var(--theme-border); --cr-bd-soft:var(--theme-border-light);
    --cr-beige:#243042; --cr-beige-dk:#2c3a4f; --cr-muted:var(--theme-text-muted); color:var(--theme-text); }
body.dark-theme .cr-card, body.dark-theme .cr-cfg-sec, body.dark-theme .cr-table,
body.dark-theme .cr-search-input, body.dark-theme .cr-sel, body.dark-theme .cr-input,
body.dark-theme .cr-btn-icon, body.dark-theme .cr-btn-secondary, body.dark-theme .cr-fav-chip,
body.dark-theme .cr-export-menu, body.dark-theme .cr-modal, body.dark-theme .cr-mod-opt,
body.dark-theme .cr-share-mode { background:var(--theme-card-bg) !important; color:var(--theme-text); border-color:var(--theme-border) !important; }
body.dark-theme .cr-root { --cr-bg:var(--theme-bg); }
body.dark-theme .cr-config, body.dark-theme .cr-preview-wrap { background:var(--theme-surface); }
body.dark-theme .cr-preview { background:var(--theme-card-bg); border-color:var(--theme-border); }
body.dark-theme .cr-cselect-trigger, body.dark-theme .cr-cselect-panel { background:var(--theme-card-bg) !important; border-color:var(--theme-border) !important; color:var(--theme-text); }
body.dark-theme .cr-cselect-opt { color:var(--theme-text); }
body.dark-theme .cr-cselect-opt:hover, body.dark-theme .cr-cselect-opt.selected { background:var(--theme-hover); }
body.dark-theme .cr-preview-wrap, body.dark-theme .cr-builder-topbar, body.dark-theme .cr-preview-toolbar { background:var(--theme-surface); }
body.dark-theme .cr-page-title, body.dark-theme .cr-card-title, body.dark-theme .cr-builder-name-input { color:var(--theme-text); }
body.dark-theme .cr-table thead th { background:var(--theme-table-header); color:var(--theme-text); }
body.dark-theme .cr-table tbody td { border-color:var(--theme-border-light); }
body.dark-theme .cr-table tbody tr:not(.cr-group-head):not(.cr-subtotal):nth-child(even) td { background:rgba(255,255,255,.025); }
body.dark-theme .cr-group-head td { background:var(--theme-surface-alt); color:var(--theme-text); }
body.dark-theme .cr-subtotal td { background:var(--theme-surface); color:var(--theme-text-secondary); }
body.dark-theme .cr-filter-row { background:var(--theme-surface); }
body.dark-theme .cr-cfg-head { background:var(--theme-surface-alt); color:var(--theme-text); }
body.dark-theme .cr-table.cr-clickable tbody tr:not(.cr-group-head):not(.cr-subtotal):hover,
body.dark-theme .cr-loc-item:hover, body.dark-theme .cr-card-act:hover, body.dark-theme .cr-export-menu button:hover { background:var(--theme-hover); }
