/* ============================================================================
   Bottom bar for the search module.

   NOTE: `.footer-button` is NOT global. Every module scopes its own copy
   (.network-graph-footer .footer-button, .sankey-diagram-footer .footer-button,
   .match-density-heatmap-footer .footer-button …). A new footer therefore
   inherits nothing and renders as a bare browser button — which is exactly
   what happened here. The button styling below is the same rule those modules
   use, so search matches them.
   ============================================================================ */

.search-page-footer {
    position: fixed;
    bottom: 0;
    inset-inline: 0;
    width: 100%;
    height: var(--footer-height);
    z-index: var(--z-nav);
    background: var(--color-sand-footer);
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.1);
    border-top: 2px solid var(--color-primary);
}

/* ---- buttons: identical rule to the visualization footers ---- */

.search-page-footer .footer-button {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: var(--color-primary);
    color: var(--color-white);
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: var(--font-weight-medium);
    font-family: var(--font-primary);
    transition: var(--transition-bg);
}

.search-page-footer .footer-button:hover {
    background: var(--color-primary-dark);
}

/* The filter control is the shared FilterButton component, which brings its
   own `.filter-button-footer` styling and its floating `.filter-badge`.
   Nothing is overridden here on purpose: an earlier `.search-page-footer
   .filter-badge` rule flattened that badge into an inline pill and broke the
   match with the other modules. */

/* ----------------------------------------------------------------------------
   «حفظ» group.

   Sits in .footer-right beside each module's own actions (تنزيل and friends),
   reusing that module's .footer-button rule rather than introducing a second
   button style.
   ---------------------------------------------------------------------------- */

.footer-save-group {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Same flex layout and gap as the matches footer (.footer-right), so the
   filter + save pair sits identically in both. */
.search-page-footer .footer-right {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

/* Brief confirmation after a successful save. Darkens rather than changing
   shape, so the bar does not reflow while the label reads «حُفظ ✓». */
.search-page-footer .footer-button.saved,
.network-graph-footer .footer-button.saved,
.sankey-diagram-footer .footer-button.saved,
.match-density-heatmap-footer .footer-button.saved,
.match-viewer-footer .footer-button.saved {
    background: var(--color-primary-darker, #6B3410);
}

/* The reader's footer is a navigation strip rather than the three-column
   control layout, so its slots need their own spacing. */
.footer-nav-save,
.footer-nav-go,
.footer-nav-length {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Match-length bounds: two narrow number fields. Sized to fit four digits —
   wide enough for any realistic match length, narrow enough not to crowd a
   bar that already carries ten controls. */
.footer-len-input {
    width: 58px;
    padding: 4px 6px;
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-sm);
    background: var(--color-surface-secondary);
    color: var(--color-text-primary);
    font-size: var(--font-size-sm);
    text-align: center;
}

.footer-len-input::placeholder {
    color: var(--color-text-muted);
}

/* Strip the spinner arrows: at this width they eat half the field, and the
   values are typed rather than nudged. */
.footer-len-input::-webkit-outer-spin-button,
.footer-len-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.footer-len-input {
    -moz-appearance: textfield;
    appearance: textfield;
}

.footer-go-btn {
    padding: 5px 14px;
    border: 1px solid var(--color-primary);
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--color-primary);
    font-family: var(--font-primary);
    font-size: var(--font-size-sm);
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.footer-go-btn:hover {
    background: var(--color-primary);
    color: var(--color-text-inverse);
}