/* ═══════════════════════════════════════════════════════════════════════
   Monthly Report editor
   Left: edit canvas (drag, drop, type). Right: Word view (refreshed with Sync).
   Bottom: save status bar.
   ═══════════════════════════════════════════════════════════════════════ */

#reportsSection {
  --ink: #0f172a; --ink-2: #334155; --muted: #64748b; --faint: #94a3b8;
  --line: #e2e8f0; --line-2: #cbd5e1; --bg: #f8fafc; --panel: #fff;
  --brand: #ea580c; --brand-dark: #c2410c; --brand-tint: #fff7ed;
  --sel: #6d5bd0; --ok: #15803d; --warn: #b45309; --err: #b91c1c;
  --ui: 'IBM Plex Sans', 'Segoe UI', system-ui, -apple-system, Arial, sans-serif;
  --doc: Calibri, Carlito, 'Segoe UI', Arial, sans-serif;
}

/* ── Icons ── */
#reportsSection .ic, #rptUnitBar .ic { width: 16px; height: 16px; flex: none; stroke: currentColor; fill: none; vertical-align: -3px; }
#reportsSection .ic.big { width: 30px; height: 30px; stroke-width: 1.4; color: var(--faint); }
#reportsSection .ic.lib { width: 22px; height: 22px; color: var(--ink-2); }

/* ── Shared typography for editor chrome ── */
#reportsSection #rptToolbar, #reportsSection #rptToolbar *,
#reportsSection .rpt-pane-head, #reportsSection .rpt-pane-head *,
#reportsSection .rpt-tools, #reportsSection .rpt-tools *,
#reportsSection .rpt-statusbar, #reportsSection .rpt-statusbar *,
#reportsSection .rpt-zoombar, #reportsSection .rpt-zoombar *,
#reportsSection .rpt-word-empty, #reportsSection .rpt-word-empty *,
#rptUnitBar, #rptUnitBar * { font-family: var(--ui); }

/* ── Buttons (also inside the toolbar, which sits in the top bar) ── */
#reportsSection .rpt-btn, #rptToolbar .rpt-btn, #rptModal .rpt-btn {
  display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 12px;
  border: 1px solid var(--line-2); border-radius: 7px; background: var(--panel); color: var(--ink-2);
  font-size: 13px; font-weight: 500; line-height: 1; cursor: pointer; white-space: nowrap;
  transition: background .12s, border-color .12s, color .12s, box-shadow .12s;
}
#reportsSection .rpt-btn:hover { background: var(--bg); border-color: var(--faint); color: var(--ink); }
#reportsSection .rpt-btn.icon { width: 32px; padding: 0; justify-content: center; }
#reportsSection .rpt-btn.primary { background: var(--brand); border-color: var(--brand); color: #fff; }
#reportsSection .rpt-btn.primary:hover { background: var(--brand-dark); border-color: var(--brand-dark); color: #fff; }
#reportsSection .rpt-btn.active { background: var(--brand-tint); border-color: var(--brand); color: var(--brand-dark); }
#reportsSection .rpt-btn:disabled, #rptToolbar .rpt-btn:disabled { opacity: .55; cursor: default; }
#reportsSection .rpt-btn.danger, #rptModal .rpt-btn.danger { color: #b91c1c; }
#reportsSection .rpt-btn.danger:hover { background: #fef2f2; border-color: #fecaca; }
#reportsSection .rpt-btn.primary.danger, #rptModal .rpt-btn.primary.danger { background: #b91c1c; border-color: #b91c1c; color: #fff; }
#reportsSection .rpt-btn.lg { height: 38px; padding: 0 16px; font-size: 14px; }
#reportsSection .rpt-btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
#reportsSection .rpt-btn.needs-sync { box-shadow: 0 0 0 3px rgba(234, 88, 12, .25); }
#reportsSection .rpt-btn.busy .ic { animation: rpt-spin 1s linear infinite; }
@keyframes rpt-spin { to { transform: rotate(360deg); } }

/* ── Toolbar (lives in the top bar, next to the page title) ── */
#reportsSection #rptToolbar.rpt-toolbar, #rptToolbar.rpt-toolbar {
  display: flex; flex-wrap: nowrap; align-items: center; gap: 8px; min-width: 0; margin: 0; padding: 0; border: 0; background: transparent; box-shadow: none;
}
#rptToolbar.in-topbar { flex: 1; margin-left: 18px; overflow: hidden; }
#rptToolbar, #rptToolbar * { font-family: var(--ui, 'IBM Plex Sans', 'Segoe UI', Arial, sans-serif); }
#rptToolbar select {
  height: 32px; padding: 0 26px 0 10px; border: 1px solid #cbd5e1; border-radius: 7px; background-color: #fff;
  color: #0f172a; font-size: 13px; font-weight: 500; cursor: pointer;
}
#rptToolbar select:focus-visible, #rptToolbar .rpt-docname:focus-visible { outline: 2px solid #ea580c; outline-offset: 2px; }
#rptToolbar .rpt-docname { width: 210px; min-width: 120px; height: 32px; padding: 0 10px; border: 1px solid transparent; border-radius: 7px; background: transparent; color: #0f172a; font-size: 14px; font-weight: 600; text-overflow: ellipsis; }
#rptToolbar .rpt-docname:hover { border-color: #cbd5e1; background: #fff; }
#rptToolbar .rpt-docname:focus { border-color: #ea580c; background: #fff; outline: none; }
#rptToolbar .rpt-tb-sep { width: 1px; align-self: stretch; margin: 6px 2px; background: #e2e8f0; flex: none; }
#rptToolbar .rpt-tb-spacer { flex: 1; min-width: 8px; }
#rptToolbar .rpt-btn { flex: none; }
#rptToolbar .rpt-savestate { display: inline-flex; align-items: center; gap: 7px; flex: none; font-size: 12.5px; color: #475569; white-space: nowrap; }
#rptToolbar .rpt-dot { width: 8px; height: 8px; flex: none; border-radius: 50%; background: #15803d; }
#rptToolbar .rpt-savestate[data-state="dirty"] { color: #b45309; font-weight: 500; }
#rptToolbar .rpt-savestate[data-state="dirty"] .rpt-dot { background: #f59e0b; box-shadow: 0 0 0 3px rgba(245, 158, 11, .22); }
#rptToolbar .rpt-savestate[data-state="saving"] .rpt-dot { background: #6d5bd0; animation: rpt-pulse 1s ease-in-out infinite; }
#rptToolbar .rpt-savestate[data-state="error"] { color: #b91c1c; }
#rptToolbar .rpt-savestate[data-state="error"] .rpt-dot { background: #b91c1c; }
@keyframes rpt-pulse { 50% { opacity: .35; } }
@media (max-width: 1700px) { #rptToolbar .rpt-btn:not(.primary):not(.icon) span { display: none; } #rptToolbar #rptBackBtn span { display: inline; } #rptToolbar .rpt-btn:not(.primary):not(.icon) { padding: 0 9px; } }
@media (max-width: 1400px) { #rptToolbar .rpt-docname { width: 150px; } #rptToolbar #rptBackBtn span, #rptToolbar .rpt-savestate #rptStickyText { display: none; } }

/* ── Split ── */
#reportsSection .rpt-split {
  display: flex; align-items: stretch; height: 720px; min-height: 480px; contain: inline-size; width: 100%; box-sizing: border-box;
  border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: #dfe3e8;
}
#reportsSection .rpt-left { flex: 0 0 55%; min-width: 380px; display: flex; flex-direction: column; background: var(--bg); }
#reportsSection .rpt-divider { width: 5px; flex: 0 0 5px; cursor: col-resize; background: var(--line-2); transition: background .15s; }
#reportsSection .rpt-divider:hover, #reportsSection .rpt-divider.dragging { background: var(--brand); }
#reportsSection .rpt-right { flex: 1 1 0; min-width: 320px; position: relative; display: flex; flex-direction: column; background: #dfe3e8; }
#reportsSection.rpt-split-dragging { user-select: none; }

#reportsSection .rpt-pane-head { display: flex; align-items: center; gap: 10px; min-height: 46px; padding: 7px 12px; box-sizing: border-box; background: var(--panel); border-bottom: 1px solid var(--line); }
#reportsSection .rpt-pane-title { font-size: 13px; font-weight: 600; color: var(--ink); }
#reportsSection .rpt-pane-sub { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#reportsSection .rpt-pane-sub[data-state="stale"] { color: var(--warn); font-weight: 500; }
#reportsSection .rpt-pane-sub[data-state="ok"] { color: var(--ok); }
#reportsSection .rpt-pane-sub[data-state="error"] { color: var(--err); font-weight: 500; }
#reportsSection .rpt-pane-sub[data-state="busy"] { color: var(--sel); }

#reportsSection .rpt-left-body { flex: 1; display: flex; min-height: 0; }
#reportsSection .rpt-tools { width: 264px; flex: 0 0 264px; display: flex; flex-direction: column; min-height: 0; background: var(--panel); border-right: 1px solid var(--line); }
#reportsSection .rpt-left.rpt-drawer-closed .rpt-tools { display: none; }
#reportsSection .rpt-canvas { flex: 1; min-width: 0; position: relative; display: flex; flex-direction: column; }
#reportsSection .rpt-stage { flex: 1; overflow: auto; padding: 24px; background: #eef1f5; }

/* ── Word view ── */
#reportsSection .rpt-word-body { position: absolute; top: 46px; left: 0; right: 0; bottom: 0; overflow: auto; }
#reportsSection .rpt-word-empty { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 24px; text-align: center; color: var(--muted); font-size: 13px; }
#reportsSection .rpt-word-empty b { color: var(--ink-2); font-weight: 600; font-size: 14px; }
#reportsSection .rpt-word-empty.hidden { display: none; }
#reportsSection .rpt-word-view .docx-wrapper { background: transparent !important; padding: 14px 0 !important; }
#reportsSection .rpt-word-view .docx-wrapper > section.docx { margin: 0 auto 14px !important; box-shadow: 0 1px 8px rgba(15, 23, 42, .22) !important; }
#reportsSection .rpt-word-view p { cursor: default; }

/* ── Zoom ── */
#reportsSection .rpt-zoombar { position: absolute; right: 18px; bottom: 14px; z-index: 30; display: flex; align-items: center; gap: 2px; padding: 3px; background: var(--ink); color: #fff; border-radius: 8px; box-shadow: 0 4px 14px rgba(15, 23, 42, .25); font-size: 12px; }
#reportsSection .rpt-zoombar button { height: 26px; min-width: 26px; padding: 0 6px; border: 0; border-radius: 5px; background: transparent; color: #fff; font-size: 14px; cursor: pointer; }
#reportsSection .rpt-zoombar button:hover { background: rgba(255, 255, 255, .16); }
#reportsSection .rpt-zoombar button#rptZoomFit { font-size: 12px; }
#reportsSection .rpt-zoombar span { min-width: 40px; text-align: center; }

/* ── Tool drawer ── */
#reportsSection .rpt-tabs { display: flex; border-bottom: 1px solid var(--line); background: var(--bg); }
#reportsSection .rpt-tab { flex: 1 1 auto; padding: 11px 6px; border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--muted); font-size: 12.5px; font-weight: 500; cursor: pointer; }
#reportsSection .rpt-tab:hover { color: var(--ink); }
#reportsSection .rpt-tab.active { color: var(--brand-dark); border-bottom-color: var(--brand); background: var(--panel); }
#reportsSection .rpt-panes { flex: 1; overflow-y: auto; }
#reportsSection .rpt-pane { display: none; padding: 14px; }
#reportsSection .rpt-pane.active { display: block; }
#reportsSection .rpt-pane-h { margin: 16px 0 8px; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); }
#reportsSection .rpt-pane-h:first-child { margin-top: 0; }
#reportsSection .rpt-empty { padding: 6px 2px; font-size: 12px; line-height: 1.5; color: var(--faint); }

/* Block library */
#reportsSection .rpt-lib { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
#reportsSection .rpt-lib-item {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 76px; padding: 10px 6px;
  border: 1px solid var(--line); border-radius: 8px; background: var(--panel); color: var(--ink-2);
  font-size: 12px; font-weight: 500; text-align: center; cursor: grab; user-select: none; transition: border-color .12s, background .12s;
}
#reportsSection .rpt-lib-item:hover { border-color: var(--brand); background: var(--brand-tint); }
#reportsSection .rpt-lib-item small { font-size: 10.5px; font-weight: 400; color: var(--faint); }

/* Outline */
#reportsSection .rpt-ol { margin: 0; padding: 0; list-style: none; }
#reportsSection .rpt-ol li { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; padding: 7px 8px; border: 1px solid var(--line); border-radius: 7px; background: var(--panel); color: var(--ink-2); font-size: 13px; font-weight: 500; cursor: pointer; }
#reportsSection .rpt-ol li:hover { background: var(--bg); border-color: var(--line-2); }
#reportsSection .rpt-ol li.sel { border-color: var(--sel); background: #f4f2fd; }
#reportsSection .rpt-ol li .grip { display: flex; color: var(--faint); cursor: grab; }
#reportsSection .rpt-ol li .nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#reportsSection .rpt-ol li .meta { font-size: 11px; font-weight: 400; color: var(--faint); }
#reportsSection .rpt-ol li button { display: flex; padding: 3px; border: 0; border-radius: 4px; background: transparent; color: var(--faint); cursor: pointer; }
#reportsSection .rpt-ol li button:hover { background: var(--line); color: var(--ink); }
#reportsSection .rpt-ol li.hidden-sec .nm { opacity: .5; text-decoration: line-through; }

/* Properties */
#reportsSection .rpt-crumb { margin-bottom: 2px; font-size: 11.5px; color: var(--faint); }
#reportsSection .rpt-ptitle { margin-bottom: 12px; font-size: 15px; font-weight: 600; color: var(--ink); }
#reportsSection .rpt-field { margin-bottom: 12px; }
#reportsSection .rpt-field > label { display: block; margin-bottom: 4px; font-size: 12px; font-weight: 500; color: var(--muted); }
#reportsSection .rpt-field input[type="text"], #reportsSection .rpt-field input[type="number"], #reportsSection .rpt-field select { width: 100%; box-sizing: border-box; padding: 6px 9px; border: 1px solid var(--line-2); border-radius: 7px; background: var(--panel); color: var(--ink); font: 13px var(--ui); }
#reportsSection .rpt-field input[type="range"] { width: 100%; accent-color: var(--brand); }
#reportsSection .rpt-field input[type="color"] { width: 40px; height: 30px; padding: 2px; border: 1px solid var(--line-2); border-radius: 6px; background: var(--panel); cursor: pointer; }
#reportsSection .rpt-field output { font-size: 12px; color: var(--muted); }
#reportsSection .rpt-seg { display: flex; border: 1px solid var(--line-2); border-radius: 7px; overflow: hidden; }
#reportsSection .rpt-seg button { flex: 1; padding: 6px 4px; border: 0; border-right: 1px solid var(--line); background: var(--panel); color: var(--ink-2); font: 500 12px var(--ui); cursor: pointer; }
#reportsSection .rpt-seg button:last-child { border-right: 0; }
#reportsSection .rpt-seg button.on { background: var(--brand-tint); color: var(--brand-dark); font-weight: 600; }
#reportsSection .rpt-btn-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
#reportsSection .rpt-pbtn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border: 1px solid var(--line-2); border-radius: 7px; background: var(--panel); color: var(--ink-2); font: 500 12.5px var(--ui); cursor: pointer; }
#reportsSection .rpt-pbtn:hover { background: var(--bg); border-color: var(--faint); }
#reportsSection .rpt-pbtn.danger { color: var(--err); border-color: #fecaca; }
#reportsSection .rpt-pbtn.danger:hover { background: #fef2f2; }

/* Settings tab */
#reportsSection .rpt-set-group { margin-bottom: 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); }
#reportsSection .rpt-set-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 8px; font-size: 13px; font-weight: 600; color: var(--ink); }
#reportsSection .rpt-set-head small { font-size: 11px; font-weight: 400; color: var(--muted); }
#reportsSection #rptStatusList { display: grid; grid-template-columns: 1fr; gap: 6px; }

/* ═══ The page (always at export geometry, so what you see is what exports) ═══ */
#reportsSection #rptPage.rpt-page { width: 719px; max-width: none; margin: 0 auto; padding: 32px 28px; box-sizing: border-box; min-height: 400px; border-radius: 2px; box-shadow: 0 1px 8px rgba(15, 23, 42, .18); }

#reportsSection .rpt-sec { position: relative; border-radius: 6px; outline: 1px dashed transparent; outline-offset: 4px; }
#reportsSection .rpt-sec > .rpt-sec-grip { position: absolute; left: -22px; top: 0; z-index: 20; display: flex; align-items: center; justify-content: center; width: 18px; height: 22px; padding: 0; border: 0; border-radius: 5px; background: var(--line); color: var(--muted); cursor: grab; opacity: 0; }
#reportsSection .rpt-sec:hover > .rpt-sec-grip, #reportsSection .rpt-sec.rpt-selected > .rpt-sec-grip { opacity: 1; }
#reportsSection .rpt-sec.rpt-selected { outline-color: var(--sel); }
#reportsSection .rpt-sec.rpt-sec-hidden { display: none; }
#reportsSection .rpt-sec-body { min-height: 24px; }
#reportsSection .rpt-unit { position: relative; }
#reportsSection .rpt-unit:hover { outline: 1px dashed var(--line-2); outline-offset: 2px; }
#reportsSection .rpt-unit.rpt-selected { outline: 2px solid var(--sel); outline-offset: 2px; }

/* Floating block bar */
#rptUnitBar { position: absolute; top: -27px; right: 0; z-index: 40; display: flex; align-items: center; gap: 1px; padding: 2px 3px; border-radius: 6px; background: var(--sel); box-shadow: 0 2px 8px rgba(30, 20, 90, .3); }
#rptUnitBar button { display: flex; align-items: center; justify-content: center; min-width: 24px; height: 22px; padding: 0 3px; border: 0; border-radius: 4px; background: transparent; color: #fff; cursor: pointer; }
#rptUnitBar button:hover { background: rgba(255, 255, 255, .22); }
#rptUnitBar .grip { cursor: grab; }
#rptUnitBar .lbl { padding: 0 6px; color: #fff; font-size: 11px; font-weight: 500; white-space: nowrap; }

/* Drop zones + drag feedback */
#reportsSection .rpt-sec-body:empty::after { content: 'Drop blocks here'; display: block; padding: 14px; border: 1px dashed var(--line-2); border-radius: 8px; text-align: center; font: 12px var(--ui); color: var(--faint); }
#reportsSection .rpt-sortable-ghost { opacity: .35; background: #ede9fe !important; outline: 2px dashed var(--sel) !important; }
#reportsSection .rpt-sortable-chosen { cursor: grabbing; }
#reportsSection.rpt-dragging-lib .rpt-sec-body, #reportsSection.rpt-dragging-lib .rpt-col { outline: 1px dashed #c4b5fd; outline-offset: -1px; }
#reportsSection .rpt-page.rpt-file-over { outline: 3px dashed var(--brand); outline-offset: -6px; }

/* Two-way link highlight */
#reportsSection .rpt-link-flash { background: rgba(250, 204, 21, .5) !important; outline: 2px solid #f59e0b !important; outline-offset: 2px; border-radius: 3px; animation: rpt-flash 1.8s ease-out forwards; }
@keyframes rpt-flash { 0%, 60% { background-color: rgba(250, 204, 21, .55); } 100% { background-color: rgba(250, 204, 21, 0); } }

/* ═══ Custom blocks ═══ */
#reportsSection .rpt-b { margin: 0 0 12px; }
#reportsSection .rpt-b-heading { margin: 14px 0 8px; font-weight: 700; color: var(--ink); outline: none; }
#reportsSection .rpt-b-text { min-height: 1.6em; line-height: 1.55; color: var(--ink-2); outline: none; }
#reportsSection .rpt-b-text:empty::before, #reportsSection .rpt-b-heading:empty::before { content: attr(data-ph); color: var(--faint); }
#reportsSection .rpt-b-img { display: block; }
#reportsSection .rpt-b-img img { display: block; width: 100%; height: auto; border-radius: 4px; }
#reportsSection .rpt-b-img.has-h img { width: 100%; height: 100%; object-fit: contain; }
#reportsSection .rpt-b-img-drop { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-height: 120px; padding: 14px; border: 1.5px dashed var(--line-2); border-radius: 8px; background: var(--bg); color: var(--muted); font: 13px var(--ui); text-align: center; cursor: pointer; }
#reportsSection .rpt-b-img-drop:hover { border-color: var(--brand); color: var(--brand-dark); }
#reportsSection .rpt-b-metric { display: block; width: fit-content; max-width: 100%; box-sizing: border-box; min-width: 140px; padding: 14px 18px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
#reportsSection .rpt-b-metric .v { font-size: 28px; font-weight: 600; line-height: 1.1; color: var(--ink); outline: none; }
#reportsSection .rpt-b-metric .l { margin-top: 4px; font-size: 12px; color: var(--muted); outline: none; }
#reportsSection .rpt-b-takeaway { min-height: 1.6em; margin: 12px 0; padding: 12px 14px; border-left: 4px solid #f59e0b; border-radius: 4px; background: #fffbeb; line-height: 1.55; color: #78350f; outline: none; }
#reportsSection .rpt-b-divider { margin: 14px 0; border: 0; border-top: 1.5px solid var(--line-2); }
#reportsSection .rpt-b-spacer { height: 48px; background: repeating-linear-gradient(45deg, transparent 0 8px, rgba(148, 163, 184, .1) 8px 16px); }
#reportsSection .rpt-b-pagebreak { position: relative; height: 28px; margin: 10px 0; border-top: 2px dashed var(--faint); }
#reportsSection .rpt-b-pagebreak::after { content: 'PAGE BREAK'; position: absolute; top: 6px; left: 50%; transform: translateX(-50%); font: 600 9px var(--ui); letter-spacing: .1em; color: var(--faint); }
#reportsSection .rpt-page .rpt-row.rpt-cols { display: flex; flex-wrap: nowrap; gap: 16px; margin-bottom: 12px; align-items: stretch; }
#reportsSection .rpt-page .rpt-row.rpt-cols.rpt-cols-3 { gap: 12px; }
#reportsSection .rpt-page .rpt-row.rpt-cols > .rpt-col { flex: 1 1 0; min-width: 0; min-height: 56px; box-sizing: border-box; border-radius: 6px; }
#reportsSection .rpt-page .rpt-row.rpt-cols > .rpt-col:empty::after { content: 'Drop here'; display: flex; align-items: center; justify-content: center; height: 100%; min-height: 56px; border: 1px dashed var(--line-2); border-radius: 8px; font: 11px var(--ui); color: var(--faint); }

/* ═══ Report typography: Calibri (Carlito fallback), the same face as the Word file ═══ */
#reportsSection #rptPage, #reportsSection #rptPage *:not(svg):not(svg *) { font-family: var(--doc); }
#reportsSection #rptPage { font-size: 15px; letter-spacing: 0; }
#reportsSection #rptPage .rpt-b-text, #reportsSection #rptPage .rpt-b-takeaway { font-size: 14px; }
#reportsSection #rptPage .rpt-b-heading { font-size: 20px; }
#reportsSection #rptPage .rpt-takeaway-tools .ic { width: 13px; height: 13px; }
#reportsSection .rpt-word-view, #reportsSection .rpt-word-view * { font-family: inherit; }

/* ═══ Export / page preview: strip all editor chrome ═══ */
#reportsSection.rpt-exporting #rptUnitBar,
#reportsSection.rpt-exporting .rpt-sec-grip,
#reportsSection.rpt-exporting .rpt-zoombar { display: none !important; }
#reportsSection.rpt-exporting .rpt-unit, #reportsSection.rpt-exporting .rpt-sec { outline: none !important; }
#reportsSection.rpt-exporting .rpt-b-spacer { background: none; }
#reportsSection.rpt-exporting .rpt-b-pagebreak { border-top-color: transparent; }
#reportsSection.rpt-exporting .rpt-b-pagebreak::after { display: none; }
#reportsSection.rpt-exporting .rpt-sec-body:empty::after, #reportsSection.rpt-exporting .rpt-page .rpt-row.rpt-cols > .rpt-col:empty::after { display: none; }
#reportsSection.rpt-exporting #rptPage.rpt-page { zoom: 1 !important; box-shadow: none; }
#reportsSection.rpt-exporting .rpt-stage { padding: 0; }

@media (max-width: 1000px) {
  #reportsSection .rpt-split { flex-direction: column; height: auto !important; }
  #reportsSection .rpt-left { flex: none; width: 100% !important; height: 70vh; }
  #reportsSection .rpt-right { flex: none; height: 70vh; }
  #reportsSection .rpt-divider { display: none; }
}

/* Page Break block is a real page break in the browser's PDF print */
@media print {
  html body.rpt-printing #reportsSection #rptSplit,
  html body.rpt-printing #reportsSection .rpt-left,
  html body.rpt-printing #reportsSection .rpt-left-body,
  html body.rpt-printing #reportsSection .rpt-canvas,
  html body.rpt-printing #reportsSection .rpt-stage {
    display: block !important; position: static !important; width: auto !important; min-width: 0 !important; height: auto !important; min-height: 0 !important; max-height: none !important;
    margin: 0 !important; padding: 0 !important; border: 0 !important; overflow: visible !important; background: #fff !important; flex: none !important;
  }
  html body.rpt-printing #reportsSection .rpt-right,
  html body.rpt-printing #reportsSection .rpt-pane-head,
  html body.rpt-printing #reportsSection .rpt-tools,
  html body.rpt-printing #reportsSection .rpt-divider,
  html body.rpt-printing #reportsSection .rpt-zoombar,
  html body.rpt-printing #reportsSection .rpt-statusbar,
  html body.rpt-printing #rptUnitBar,
  html body.rpt-printing #rptPage .rpt-sec-grip,
    html body.rpt-printing #rptPage .rpt-b-img-drop,
  html body.rpt-printing #rptPage .rpt-sec-hidden { display: none !important; }
  html body.rpt-printing #rptPage .rpt-b-pagebreak { height: 0 !important; margin: 0 !important; border: 0 !important; break-before: page; page-break-before: always; }
  html body.rpt-printing #rptPage .rpt-b-pagebreak::after { display: none; }
  html body.rpt-printing #rptPage .rpt-b-spacer { background: none !important; }
  html body.rpt-printing #rptPage { zoom: 1 !important; }
  html body.rpt-printing #rptPage .rpt-row.rpt-cols { display: flex !important; flex-wrap: nowrap !important; }
  html body.rpt-printing #rptPage .rpt-row.rpt-cols > .rpt-col { flex: 1 1 0 !important; max-width: none !important; }
}

/* Buttons in the top bar and dialog need the same colours (CSS variables live on #reportsSection) */
#rptToolbar, #rptModal { --ink: #0f172a; --ink-2: #334155; --muted: #64748b; --faint: #94a3b8; --line: #e2e8f0; --line-2: #cbd5e1; --bg: #f8fafc; --panel: #fff; --brand: #ea580c; --brand-dark: #c2410c; --brand-tint: #fff7ed; --ui: 'IBM Plex Sans', 'Segoe UI', system-ui, Arial, sans-serif; }
#rptToolbar .rpt-btn:hover, #rptModal .rpt-btn:hover { background: var(--bg); border-color: var(--faint); color: var(--ink); }
#rptToolbar .rpt-btn.icon, #rptModal .rpt-btn.icon { width: 32px; padding: 0; justify-content: center; }
#rptToolbar .rpt-btn.primary, #rptModal .rpt-btn.primary { background: var(--brand); border-color: var(--brand); color: #fff; }
#rptToolbar .rpt-btn.primary:hover, #rptModal .rpt-btn.primary:hover { background: var(--brand-dark); border-color: var(--brand-dark); }
#rptToolbar .rpt-btn.active { background: var(--brand-tint); border-color: var(--brand); color: var(--brand-dark); }
#rptToolbar .ic, #rptModal .ic { width: 16px; height: 16px; flex: none; stroke: currentColor; fill: none; vertical-align: -3px; }

/* ═══ Report library (project-list style) ═══ */
#reportsSection .rpt-library { max-width: 1280px; margin: 0 auto; padding: 8px 4px 40px; font-family: var(--ui); color: var(--ink); }
#reportsSection .rpt-lib-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin: 6px 0 18px; }
#reportsSection .rpt-lib-head h2 { margin: 0 0 4px; font: 600 24px var(--ui); color: var(--ink); }
#reportsSection .rpt-lib-head p { margin: 0; font-size: 14px; color: var(--muted); }
#reportsSection .rpt-lib-tools { margin-bottom: 12px; }
#reportsSection .rpt-search { display: flex; align-items: center; gap: 8px; max-width: 520px; height: 38px; padding: 0 12px; border: 1px solid var(--line-2); border-radius: 8px; background: #fff; color: var(--faint); }
#reportsSection .rpt-search:focus-within { border-color: var(--brand); color: var(--brand); }
#reportsSection .rpt-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: 14px var(--ui); color: var(--ink); }
#reportsSection .rpt-table { border: 1px solid var(--line); border-radius: 10px; background: #fff; overflow: hidden; }
#reportsSection .rpt-trow { display: grid; grid-template-columns: minmax(220px, 1fr) 170px 190px 132px; align-items: center; gap: 12px; padding: 0 16px; min-height: 52px; border-bottom: 1px solid var(--line); }
#reportsSection .rpt-trow:last-child { border-bottom: 0; }
#reportsSection .rpt-trow.thead { min-height: 42px; background: var(--bg); }
#reportsSection .rpt-th { display: flex; align-items: center; gap: 6px; padding: 0; border: 0; background: transparent; font: 600 12.5px var(--ui); color: var(--muted); text-align: left; cursor: pointer; }
#reportsSection .rpt-th:hover, #reportsSection .rpt-th.sorted { color: var(--ink); }
#reportsSection .rpt-th[data-dir="asc"]::after { content: '\2191'; }
#reportsSection .rpt-th[data-dir="desc"]::after { content: '\2193'; }
#reportsSection .rpt-trow[data-id] { cursor: pointer; }
#reportsSection .rpt-trow[data-id]:hover, #reportsSection .rpt-trow[data-id]:focus-visible { background: #fff7ed; outline: none; }
#reportsSection .rpt-cell { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; color: var(--ink-2); }
#reportsSection .rpt-cell.muted { color: var(--muted); }
#reportsSection .rpt-cell.title { display: flex; align-items: center; gap: 10px; font-weight: 500; color: var(--ink); }
#reportsSection .rpt-cell.title .ic { color: var(--brand); }
#reportsSection .rpt-cell.title .nm { overflow: hidden; text-overflow: ellipsis; }
#reportsSection .rpt-cell.actions { display: flex; justify-content: flex-end; gap: 4px; opacity: 0; transition: opacity .12s; }
#reportsSection .rpt-trow:hover .actions, #reportsSection .rpt-trow:focus-within .actions { opacity: 1; }
#reportsSection .rpt-cell.actions .rpt-btn { height: 30px; width: 30px; border-color: transparent; background: transparent; color: var(--muted); }
#reportsSection .rpt-cell.actions .rpt-btn:hover { background: #fff; border-color: var(--line-2); color: var(--ink); }
#reportsSection .rpt-cell.actions .rpt-btn.danger:hover { color: #b91c1c; }
#reportsSection .rpt-empty-row { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 36px 16px; font-size: 14px; color: var(--muted); }
#reportsSection .rpt-empty-row.err { color: #b91c1c; }
#reportsSection .rpt-empty-state { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 56px 24px; text-align: center; color: var(--muted); font-size: 14px; }
#reportsSection .rpt-empty-state b { font-size: 16px; color: var(--ink); }
#reportsSection .rpt-empty-state span { max-width: 420px; line-height: 1.5; }
#reportsSection .rpt-empty-state .rpt-btn { margin-top: 10px; }
@media (max-width: 800px) { #reportsSection .rpt-trow { grid-template-columns: 1fr 110px; } #reportsSection .rpt-trow > :nth-child(3), #reportsSection .rpt-th[data-sort="updated"] { display: none; } #reportsSection .rpt-cell.actions { opacity: 1; } }

/* ═══ Dialog ═══ */
#rptModal.rpt-modal { position: fixed; inset: 0; z-index: 10000; align-items: center; justify-content: center; padding: 20px; background: rgba(15, 23, 42, .45); font-family: var(--ui); }
#rptModal .rpt-modal-card { width: 480px; max-width: 100%; border-radius: 12px; background: #fff; box-shadow: 0 20px 50px rgba(15, 23, 42, .3); }
#rptModal .rpt-modal-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px 8px; }
#rptModal .rpt-modal-head h3 { margin: 0; font: 600 17px var(--ui); color: var(--ink); }
#rptModal .rpt-modal-head .rpt-btn { border-color: transparent; background: transparent; }
#rptModal .rpt-modal-body { padding: 8px 18px 6px; }
#rptModal .rpt-modal-text { margin: 4px 0 8px; font-size: 14px; line-height: 1.55; color: var(--ink-2); }
#rptModal .rpt-modal-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 14px 18px 18px; }
#rptModal .rpt-fld { display: block; margin-bottom: 14px; }
#rptModal .rpt-fld > span { display: block; margin-bottom: 5px; font-size: 13px; font-weight: 500; color: var(--ink-2); }
#rptModal .rpt-fld small { display: block; margin-top: 5px; font-size: 12px; line-height: 1.45; color: var(--muted); }
#rptModal .rpt-fld input, #rptModal .rpt-fld select { width: 100%; box-sizing: border-box; height: 38px; padding: 0 10px; border: 1px solid var(--line-2); border-radius: 8px; background: #fff; font: 14px var(--ui); color: var(--ink); }
#rptModal .rpt-fld input:focus, #rptModal .rpt-fld select:focus { outline: 2px solid var(--brand); outline-offset: 1px; border-color: var(--brand); }
#rptModal .rpt-fld-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* ═══ Resize frame, card image button, picture-over-chart ═══ */
#rptHandles { position: absolute; inset: 0; z-index: 35; pointer-events: none; }
#rptHandles .rpt-rz { position: absolute; width: 10px; height: 10px; box-sizing: border-box; border: 2px solid #6d5bd0; border-radius: 2px; background: #fff; pointer-events: auto; }
#rptHandles .rpt-rz.n, #rptHandles .rpt-rz.s { left: 50%; margin-left: -5px; width: 22px; margin-left: -11px; cursor: ns-resize; }
#rptHandles .rpt-rz.e, #rptHandles .rpt-rz.w { top: 50%; margin-top: -11px; height: 22px; cursor: ew-resize; }
#rptHandles .rpt-rz.n { top: -5px; } #rptHandles .rpt-rz.s { bottom: -5px; }
#rptHandles .rpt-rz.e { right: -5px; } #rptHandles .rpt-rz.w { left: -5px; }
#rptHandles .rpt-rz.nw { top: -5px; left: -5px; cursor: nwse-resize; } #rptHandles .rpt-rz.se { bottom: -5px; right: -5px; cursor: nwse-resize; }
#rptHandles .rpt-rz.ne { top: -5px; right: -5px; cursor: nesw-resize; } #rptHandles .rpt-rz.sw { bottom: -5px; left: -5px; cursor: nesw-resize; }
#rptHandles .rpt-rz:hover { background: #6d5bd0; }

#reportsSection .rpt-slot { position: relative; }
#reportsSection .rpt-slot > .rpt-slot-add { position: absolute; top: 6px; right: 6px; z-index: 15; display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 9px; border: 1px solid var(--line-2); border-radius: 6px; background: #fff; color: var(--ink-2); font: 500 12px var(--ui); cursor: pointer; opacity: 0; transition: opacity .12s; box-shadow: 0 1px 3px rgba(15, 23, 42, .12); }
#reportsSection .rpt-slot > .rpt-slot-add .ic { width: 14px; height: 14px; }
#reportsSection .rpt-slot:hover > .rpt-slot-add, #reportsSection .rpt-slot > .rpt-slot-add:focus-visible { opacity: 1; }
#reportsSection .rpt-slot > .rpt-slot-add:hover { border-color: var(--brand); color: var(--brand-dark); background: var(--brand-tint); }
#reportsSection .rpt-slot.rpt-nochart .rpt-chart, #reportsSection .rpt-slot.rpt-nochart .rpt-chart-legend, #reportsSection .rpt-slot.rpt-nochart .rpt-chart-footer { display: none !important; }
#reportsSection .rpt-slot .rpt-b-img { margin-bottom: 6px; }
#reportsSection .rpt-check { display: flex; align-items: center; gap: 8px; margin: 2px 0 12px; font-size: 12.5px; color: var(--ink-2); cursor: pointer; }
#reportsSection .rpt-check input { accent-color: var(--brand); }
#reportsSection.rpt-exporting #rptHandles, #reportsSection.rpt-exporting .rpt-slot-add { display: none !important; }
@media print { html body.rpt-printing #rptHandles, html body.rpt-printing #rptPage .rpt-slot-add { display: none !important; } html body.rpt-printing #rptPage .rpt-slot.rpt-nochart .rpt-chart, html body.rpt-printing #rptPage .rpt-slot.rpt-nochart .rpt-chart-legend, html body.rpt-printing #rptPage .rpt-slot.rpt-nochart .rpt-chart-footer { display: none !important; } }