/* ── Focus ring overrides ───────────────────────────────────────────────── */ /* */ /* Bootstrap's default focus ring (box-shadow: 0 0 0 0.25rem ...) shows on */ /* every focusable element — buttons, accordion headers, links, list items. */ /* Remove it from non-input interactive elements so mouse clicks don't */ /* leave a lingering blue glow. Keep a thinner, subtler ring on form */ /* controls (text inputs, selects, textareas) for keyboard accessibility. */ button:focus, .btn:focus, .accordion-button:focus, .list-group-item:focus, a:focus, .nav-link:focus, .page-link:focus, .btn-close:focus, .form-check-input:focus { box-shadow: none !important; outline: none; } .form-control:focus, .form-select:focus { box-shadow: 0 0 0 0.15rem rgba(var(--bs-primary-rgb), 0.25) !important; } /* ── Theme toggle switch ────────────────────────────────────────────────── */ /* */ /* Pill-shaped day/night slider. Both icons sit at fixed positions on the */ /* track. The knob (a solid circle) slides left to cover the sun in light */ /* mode and slides right to cover the moon in dark mode. */ /* */ /* Uses explicit colours via CSS custom properties — does NOT use */ /* currentColor, so it works correctly in any navbar context regardless of */ /* whether the navbar has its own forced colour scheme. */ /* */ /* The knob slide is driven by [data-bs-theme] on . */ /* ── Default (light page) colours ──────────────────────────────────────── */ .theme-toggle { --toggle-color: #343a40; /* track border, icons, knob fill */ --toggle-knob-bg: #343a40; /* knob background = same as border */ display: inline-flex; align-items: center; cursor: pointer; background: none; border: none; padding: 0; } /* ── Dark page colours ──────────────────────────────────────────────────── */ [data-bs-theme="dark"] .theme-toggle { --toggle-color: rgba(255, 255, 255, 0.85); --toggle-knob-bg: rgba(255, 255, 255, 0.85); } /* ── Dark-navbar override (admin) ───────────────────────────────────────── */ /* The admin navbar is always dark (bg-dark + navbar-dark) regardless of */ /* the page theme, so the toggle must always use light colours inside it. */ .navbar-dark .theme-toggle { --toggle-color: rgba(255, 255, 255, 0.85); --toggle-knob-bg: rgba(255, 255, 255, 0.85); } /* The outer pill track */ .theme-toggle__track { position: relative; width: 56px; height: 28px; border-radius: 14px; border: 2px solid var(--toggle-color); background-color: transparent; transition: border-color 0.25s ease; flex-shrink: 0; box-sizing: border-box; } /* Sun icon — pinned to the left side of the track */ .theme-toggle__sun { position: absolute; top: 50%; left: 5px; transform: translateY(-50%); font-size: 13px; line-height: 1; display: flex; align-items: center; justify-content: center; color: var(--toggle-color); pointer-events: none; } /* Moon icon — pinned to the right side of the track */ .theme-toggle__moon { position: absolute; top: 50%; right: 5px; transform: translateY(-50%); font-size: 13px; line-height: 1; display: flex; align-items: center; justify-content: center; color: var(--toggle-color); pointer-events: none; } /* The sliding knob — a solid filled circle that covers the active icon */ .theme-toggle__knob { position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%; background-color: var(--toggle-knob-bg); transition: transform 0.25s ease; pointer-events: none; } /* ── Dark mode: knob slides right to cover the moon ─────────────────────── */ [data-bs-theme="dark"] .theme-toggle__knob { transform: translateX(28px); } /* ── Tab-content minimum height ─────────────────────────────────────────── */ /* */ /* Prevents the tab panel area from collapsing to a tiny sliver when a tab */ /* has only a small amount of content (e.g. empty notes, loading spinner). */ /* Applies to all .tab-content panels across the app. */ .tab-content { min-height: 500px; } /* ── Nav-tabs active tab punch-through ──────────────────────────────────── */ /* */ /* Bootstrap's .nav-tabs draws a border-bottom on the ul. The active */ /* .nav-link gets margin-bottom:-1px so it overlaps the ul border by 1px, */ /* and a border-bottom matching the page background to "erase" that pixel. */ /* When .tab-content uses .border.border-top-0 the content box top border */ /* sits on the same pixel — the active tab only erases the ul border, not */ /* the content border. This rule extends the active tab 1px further so it */ /* covers both the ul border and the content box top border. */ .nav-tabs .nav-link.active { margin-bottom: -2px; padding-bottom: calc(0.5rem + 1px); } /* ── Legal page sticky TOC sidebar ─────────────────────────────────────── */ /* */ /* Two-column layout on lg+: narrow sticky TOC on the left, content on the */ /* right. On smaller screens the sidebar is hidden — the section anchors */ /* still work via direct URL fragment links. */ /* */ /* top: 72px accounts for the ~57px public navbar + 1rem breathing room. */ /* max-height + overflow-y allow the TOC to scroll independently if it is */ /* taller than the viewport. */ .legal-toc { position: sticky; top: 72px; max-height: calc(100vh - 88px); overflow-y: auto; } .legal-toc ul { list-style: none; padding-left: 0; margin-bottom: 0; } .legal-toc ul li { margin-bottom: 0.25rem; } .legal-toc a { color: var(--bs-secondary-color); text-decoration: none; font-size: 0.8125rem; line-height: 1.4; display: block; } .legal-toc a:hover { color: var(--bs-body-color); text-decoration: underline; } /* ── Sticky footer (public layout) ─────────────────────────────────────── */ /* */ /* Forces the footer to sit at the bottom of the viewport on short pages. */ /* body stretches to full viewport height as a flex column; .public-main */ /* (the block content wrapper) grows to fill remaining space. */ body.public-body { min-height: 100vh; display: flex; flex-direction: column; } .public-main { flex: 1; } /* ── Badge cursor ───────────────────────────────────────────────────────── */ /* */ /* Bootstrap badges are non-interactive by default but browsers render the */ /* text-insertion caret on hover because badges contain text. Force the */ /* default arrow pointer universally so hovering a badge (e.g. task-type */ /* badges with title tooltips on the claim list) feels intentional. */ .badge { cursor: default; } /* ── Actionable list items ──────────────────────────────────────────────── */ /* */ /* Bootstrap's .list-group-item-action sets cursor:pointer but leaves text */ /* selectable. Disable text selection so typeahead suggestion rows, search */ /* results, and other click-only list items feel like buttons, not text. */ /* .searchable-select-item covers the custom combobox dropdown items built */ /* by searchable-select.js. */ .list-group-item-action, .searchable-select-item { cursor: pointer; user-select: none; -webkit-user-select: none; } /* ── DNU reveal ─────────────────────────────────────────────────────────── */ /* */ /* DNU note text is hidden until the user clicks the DNU badge. Clicking */ /* the badge reveals the text via the .revealed class on the badge, which */ /* makes the adjacent .dnu-hidden-text visible. */ .dnu-hidden-text { display: none; } .dnu-reveal-badge.revealed + .dnu-hidden-text, .dnu-reveal-badge.revealed ~ .dnu-hidden-text { display: inline; } .dnu-reveal-badge.revealed { cursor: default; opacity: 0.65; } /* ── Notification preference toggle buttons ─────────────────────────────── */ /* */ /* btn-check + btn-outline-secondary gives a grey outline when off. */ /* When checked, Bootstrap adds .active to the label — override that to */ /* success green so enabled preferences are visually distinct from disabled. */ input.btn-check:checked + label.btn-outline-secondary { background-color: var(--bs-success); border-color: var(--bs-success); color: #fff; } input.btn-check:checked:focus + label.btn-outline-secondary { box-shadow: 0 0 0 0.25rem rgba(var(--bs-success-rgb), 0.25); } /* ── File drop zone active drag state ───────────────────────────────────── */ /* */ /* Applied by file-drop.js when the user drags a file over the drop area. */ /* Highlights the dashed border and applies a subtle primary tint to signal */ /* that dropping here will trigger an upload. */ .file-drop-zone.file-drop-active .file-drop-area { border-color: var(--bs-primary) !important; background-color: var(--bs-primary-bg-subtle); } /* ── Insights sidebar ───────────────────────────────────────────────────── */ /* */ /* Fixed-width collapsible sidebar for the Claim Insights report picker. */ /* Desktop (lg+): 240px fixed sidebar + flex:1 content area. The sidebar */ /* collapses to 0px with a CSS transition on width; overflow is hidden so */ /* content doesn't leak out during the animation. Collapse button lives */ /* inside the card header; expand button is a round circle that appears */ /* when collapsed. */ /* Mobile (