/* Site-wide UI tweaks: pill-shaped badges and buttons. --------------------------------------------------------------------------- Both .badge and .btn size their border-radius via a CSS custom property declared directly on their own base class (--bs-badge-border-radius on .badge, --bs-btn-border-radius on .btn, then re-declared again per size variant: .btn-sm/.btn-lg/.btn-xs/.btn-group-*). Overriding the custom property at a distance (e.g. on :root or [data-bs-theme]) would get shadowed by those component-level (re)declarations — same class of bug already hit once in dark-mode.css. Setting the actual border-radius property directly here, at a specificity equal to .btn/.badge's own base rule but loaded after every vendor CSS (so it wins by source order), sidesteps that entirely and applies uniformly across every size variant without needing to chase each one down individually. */ .badge { border-radius: 50rem; } .btn { border-radius: 50rem; } /* .btn-icon is a perfect square (equal block-size/inline-size, confirmed in core.css) — a 50rem radius on a square renders as a circle, which is the correct, intentional look for icon-only buttons (kebab menus, edit/delete row actions), not an accident of this rule. */ /* Activity Timeline (dot + connector line per entry) — first user of this shape in the project. core.css ships no .timeline component of its own (confirmed by grep before adding this), so this is hand-built from plain flexbox rather than an existing Sneat class. Prefixed hr- deliberately, so a future Sneat theme update that adds its own .timeline classes can never collide with this. */ .hr-timeline-item { position: relative; padding-left: 2.5rem; padding-bottom: 1.5rem; } .hr-timeline-item:last-child { padding-bottom: 0; } .hr-timeline-item::before { /* connector line, drawn from this dot down to the next */ content: ''; position: absolute; left: 0.5rem; top: 1.25rem; bottom: 0; width: 2px; background-color: var(--bs-border-color); } .hr-timeline-item:last-child::before { display: none; } .hr-timeline-dot { position: absolute; left: 0; top: 0.25rem; width: 1.125rem; height: 1.125rem; border-radius: 50%; border: 2px solid var(--bs-paper-bg); } /* The badge above each entry (record type + icon) has its own inline padding (.badge's own --bs-badge-padding-x, core.css: 0.77em) between its pill edge and its icon/text — the plain date-range/reason lines below it have none, so without this they start further left than the badge's icon does. Mirrors that same 0.77em so both lines of text share one left edge. */ .hr-timeline-detail { padding-left: 0.77em; } /* SweetAlert2's own z-index (1060, sweetalert2.min.css) sits below Sneat's sidebar/navbar z-index (1075/1080, core.css) as long as lacks .modal-open — a class only Bootstrap's own Modal.js ever adds, never SweetAlert2. Without this, every Swal.fire() call (approve/reject confirmations, delete confirmations, etc.) leaves the sidebar and navbar undimmed and stacked visually on top of the confirmation dialog instead of behind it. */ .swal2-container { z-index: 1200 !important; }