/* ------------------------------------------------------------------
* Filtering-page polish.
*
* Scoped to ``.signal-filtering-page`` so the rest of the webapp's
* styling is untouched. Loaded automatically by Dash because the
* file lives in the ``assets/`` directory.
* ------------------------------------------------------------------ */
.signal-filtering-page .card {
border-radius: 12px;
}
.signal-filtering-page .accordion-item {
border-radius: 12px !important;
overflow: hidden;
}
.signal-filtering-page .accordion-button {
background: #ffffff;
font-weight: 500;
padding: 0.65rem 1rem;
}
.signal-filtering-page .accordion-button:not(.collapsed) {
color: #0d6efd;
background: #f8f9fa;
box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.04);
}
.signal-filtering-page .accordion-button:focus {
box-shadow: none;
}
.signal-filtering-page .form-label.section-label {
font-size: 0.7rem;
letter-spacing: 0.04em;
font-weight: 600;
color: #6c757d;
text-transform: uppercase;
}
.signal-filtering-page .btn {
border-radius: 8px;
}
.signal-filtering-page .btn-group .btn:not(:last-child) {
border-right-width: 0;
}
/* Pill-style toggle for the filter-family chooser.
*
* ``dbc.RadioItems`` renders each option as
*
*
*
*
*
* Bootstrap's ``btn-check`` is supposed to hide the input, but
* ``form-check-input`` re-asserts width/visibility and pushes the
* label sideways with default form-check padding. Strip both. */
.signal-filtering-page .filter-family-pills .form-check {
padding-left: 0;
margin-right: 0;
}
.signal-filtering-page .filter-family-pills .form-check-input {
position: absolute;
width: 0;
height: 0;
opacity: 0;
pointer-events: none;
margin: 0;
}
.signal-filtering-page .filter-family-pills label.btn {
padding: 0.3rem 0.75rem;
font-size: 0.825rem;
border-radius: 999px;
margin: 0 0.2rem 0.2rem 0;
border: 1px solid #dee2e6;
color: #495057;
background: #fff;
transition: all 0.15s ease;
cursor: pointer;
}
.signal-filtering-page .filter-family-pills label.btn:hover {
background: #f1f3f5;
border-color: #adb5bd;
}
.signal-filtering-page .filter-family-pills input[type="radio"]:checked + label.btn,
.signal-filtering-page .filter-family-pills label.btn.active {
background: #0d6efd;
color: #fff;
border-color: #0d6efd;
}
/* The primary Apply button: gradient + lift on hover. */
.signal-filtering-page .apply-btn {
background: linear-gradient(135deg, #0d6efd 0%, #084298 100%);
border: 0;
font-weight: 500;
box-shadow: 0 2px 6px rgba(13, 110, 253, 0.25);
transition: all 0.15s ease;
}
.signal-filtering-page .apply-btn:hover,
.signal-filtering-page .apply-btn:focus {
box-shadow: 0 4px 10px rgba(13, 110, 253, 0.35);
transform: translateY(-1px);
background: linear-gradient(135deg, #0d6efd 0%, #084298 100%);
}
/* -----------------------------------------------------------------
* Filter configuration card (left panel)
*
* The card holds many sub-families (Traditional / Smoothing /
* Advanced / Artifact / Neural / Ensemble) plus nested method blocks
* (Kalman / Optimization / Gradient / Convolution / Attention /
* Adaptive). Each previously used a plain ```` heading which
* made the panel visually noisy. Restyle every ``H6`` inside the
* config body as a thin uppercase divider, normalise label and
* input typography, and tighten spacing.
* ----------------------------------------------------------------- */
.signal-filtering-page .filter-config-body .config-section-title,
.signal-filtering-page .filter-config-body h6 {
font-size: 0.7rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.04em;
color: #6c757d;
margin: 0.75rem 0 0.5rem 0;
padding-bottom: 0.35rem;
border-bottom: 1px solid #e9ecef;
}
/* The very first section title sits flush with the top of the card. */
.signal-filtering-page .filter-config-body > .config-section-title:first-child,
.signal-filtering-page .filter-config-body > h6:first-child {
margin-top: 0;
}
/* Sub-section titles (Kalman / Optimization / ...) inherit the same
* style but are slightly muted further to read as second-level. */
.signal-filtering-page .filter-config-body .text-primary {
color: #6c757d !important;
}
/* Normalise ``form-label`` inside the config card to the
* section-label typography, so the field captions match the
* uppercase divider style above them. */
.signal-filtering-page .filter-config-body .form-label {
font-size: 0.7rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.04em;
color: #6c757d;
margin-bottom: 0.25rem;
}
/* Inputs and selects: slightly rounder, subtler border, calmer focus. */
.signal-filtering-page .filter-config-body .form-control,
.signal-filtering-page .filter-config-body .form-select {
border-radius: 8px;
border: 1px solid #e0e3e7;
font-size: 0.82rem;
padding: 0.35rem 0.6rem;
transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
.signal-filtering-page .filter-config-body .form-control:focus,
.signal-filtering-page .filter-config-body .form-select:focus {
border-color: #0d6efd;
box-shadow: 0 0 0 0.15rem rgba(13, 110, 253, 0.15);
}
.signal-filtering-page .filter-config-body .form-control:hover:not(:focus),
.signal-filtering-page .filter-config-body .form-select:hover:not(:focus) {
border-color: #adb5bd;
}
/* The Preprocessing checkbox sits flush — tighten its label too. */
.signal-filtering-page .filter-config-body .form-check .form-check-label {
font-size: 0.82rem;
color: #495057;
}
/* Row spacing is excessive by default with so many groups; tighten. */
.signal-filtering-page .filter-config-body .row + .row {
margin-top: 0.25rem;
}
/* Plot heights — single source of truth for the two visible plots. */
.signal-filtering-page .segment-timeline-graph {
height: 70px;
}
.signal-filtering-page .comparison-plot-graph {
height: 540px;
}
/* Status pill in the timeline header. */
.signal-filtering-page .segment-headline-pill {
display: inline-flex;
align-items: center;
gap: 0.4rem;
padding: 0.18rem 0.6rem;
border-radius: 999px;
background: #f1f3f5;
color: #495057;
font-size: 0.78rem;
font-weight: 500;
}
.signal-filtering-page .segment-headline-pill .dot {
width: 0.5rem;
height: 0.5rem;
border-radius: 50%;
background: #0d6efd;
}