/* ============================================================================
   FOOTER NAVIGATION — E-Reader Style
   ============================================================================

   Fixed bottom bar with prev/next buttons, inline volume/page/hadith
   navigation, match controls, and filter button.

   RTL layout:
   [→ السابق] | ج[▾3] · ص[42] · ح[1234] | [◉ 18+] | [فلاتر] | [التالي ←]

   ============================================================================ */


/* ============================================================================
   MAIN CONTAINER
   ============================================================================ */

.footer-navigation {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-2) var(--space-4);
    background: var(--color-sand-footer);
    border-top: 2px solid var(--color-primary);
    gap: var(--space-3);
    max-width: var(--content-max-width);
    margin: 0 auto;
    direction: rtl;
    height: 100%;
}


/* ============================================================================
   PREV / NEXT BUTTONS
   ============================================================================ */

.footer-nav-prev,
.footer-nav-next {
    flex-shrink: 0;
}

/* حفظ is included here so it reads as a primary action like التالي, rather
   than borrowing the quieter .footer-button style the visualization bars use.
   The two-class selector outranks the bare .footer-button rule regardless of
   stylesheet order. */
.footer-nav-prev button,
.footer-nav-next button,
.footer-nav-save .footer-button {
    padding: var(--space-2) var(--space-4);
    background: var(--color-primary);
    color: var(--color-white);
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-weight: var(--font-weight-medium);
    font-family: var(--font-primary);
    font-size: var(--font-size-sm);
    white-space: nowrap;
    transition: background var(--duration-fast) var(--ease-out);
}

.footer-nav-prev button:hover:not(:disabled),
.footer-nav-next button:hover:not(:disabled),
.footer-nav-save .footer-button:hover {
    background: var(--color-primary-dark);
}

/* Saved confirmation still reads as "done" against the filled button. */
.footer-nav-save .footer-button.saved {
    background: var(--color-primary-darker, #6B3410);
}

.footer-nav-prev button:disabled,
.footer-nav-next button:disabled {
    background: var(--color-gray-medium);
    cursor: not-allowed;
    opacity: 0.5;
}

.footer-nav-prev button:focus-visible,
.footer-nav-next button:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}


/* ============================================================================
   LOCATION CONTROLS — Inline volume / page / hadith
   ============================================================================ */

.footer-nav-location {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    flex-shrink: 0;
}

.footer-loc-label {
    font-family: var(--font-ui);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-secondary);
    user-select: none;
}

.footer-loc-sep {
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
    margin: 0 var(--space-1);
    user-select: none;
}

.footer-loc-select {
    padding: 2px var(--space-2);
    border: 1px solid var(--color-border-secondary);
    border-radius: var(--radius-sm);
    font-family: var(--font-ui);
    font-size: var(--font-size-sm);
    background: var(--color-white);
    color: var(--color-text-primary);
    min-width: 44px;
    text-align: center;
    direction: ltr;
    cursor: pointer;
}

.footer-loc-select:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 2px rgba(139, 69, 19, 0.15);
}

.footer-loc-input {
    padding: 2px var(--space-2);
    border: 1px solid var(--color-border-secondary);
    border-radius: var(--radius-sm);
    font-family: var(--font-ui);
    font-size: var(--font-size-sm);
    background: var(--color-white);
    color: var(--color-text-primary);
    width: 52px;
    text-align: center;
    direction: ltr;
    -moz-appearance: textfield;
}

.footer-loc-input::-webkit-inner-spin-button,
.footer-loc-input::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.footer-loc-input:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 2px rgba(139, 69, 19, 0.15);
}

.footer-loc-hadith {
    width: 64px;
}


/* ============================================================================
   MATCH CONTROLS
   ============================================================================ */

/* The sliders are the only controls here that benefit from extra width, so
   this group absorbs whatever the fixed-width buttons leave over. Everything
   else in the bar is flex-shrink: 0, so growth comes out of dead space rather
   than out of the other controls. */
.footer-nav-matches {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex: 1 1 auto;
    min-width: 0;
    justify-content: flex-start;
}

/* Each slider group takes an equal share of that space. */
.footer-nav-matches .density-slider-group {
    flex: 1 1 0;
    min-width: 0;
    max-width: 260px;
}

/* Show/hide match highlighting — a labelled checkbox in the footer. Replaces
   the old ◉/○ icon button; same `show_matches` state, clearer affordance. */
.match-toggle {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2, 8px);
    cursor: pointer;
    font-size: 0.85rem;
    line-height: 1;
    color: var(--color-text-secondary, #666);
    white-space: nowrap;
    user-select: none;
    transition: color var(--duration-fast, 150ms) var(--ease-out, ease-out);
}

.match-toggle:hover {
    color: var(--color-text-primary);
}

.match-toggle-check {
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: var(--color-primary);
    cursor: pointer;
    flex-shrink: 0;
}

.match-toggle-check:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* Three columns shared by both rows: [label] [track] [value].
   Putting the gradient in the same grid column as the slider is what makes
   them line up — as separate centred flex rows they never could, because the
   slider is offset by its label's width and the gradient was not. */
.density-slider-group {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    column-gap: var(--space-1, 4px);
    row-gap: 3px;
}

/* Only the كثافة group carries the key; تشابه is a single row. */
.density-slider-group--keyed {
    row-gap: 3px;
}

.legend-gradient {
    /* Column-stretched, so it is exactly as wide as the slider above it
       whatever that slider's width becomes. */
    width: 100%;
    height: 7px;
    border-radius: 2px;
    /* Logarithmic density spectrum. `to right` puts the FIRST colour at the
       left edge, so red (many) sits on the left under كثير and blue (few) on
       the right under قليل — matching the RTL label order.
       This was `to left`, which put red under قليل and blue under كثير: the
       key said the opposite of what the shading means. */
    background: linear-gradient(to right,
        hsl(0, 80%, 40%),
        hsl(40, 75%, 45%),
        hsl(120, 70%, 48%),
        hsl(220, 65%, 50%)
    );
    border: 1px solid rgba(0, 0, 0, 0.15);
}

.legend-label {
    font-family: var(--font-ui, sans-serif);
    font-size: 0.5625rem;
    color: var(--color-text-muted);
    user-select: none;
    text-align: center;
    line-height: 1;
}

/* 56px was too short to position a threshold with any precision — roughly one
   pixel per step on a 1–50 range. `width: 100%` lets the slider fill its grid
   column, and the column is sized by .footer-nav-matches claiming the footer's
   spare width below. */
.density-slider {
    width: 100%;
    min-width: 120px;
    height: 4px;
    accent-color: var(--color-primary);
    cursor: pointer;
}

.density-slider-label {
    font-family: var(--font-ui, sans-serif);
    font-size: var(--font-size-xs, 11px);
    font-weight: var(--font-weight-semibold, 600);
    color: var(--color-text-secondary, #666);
    user-select: none;
}

.density-label {
    font-family: var(--font-ui, sans-serif);
    font-size: var(--font-size-xs, 11px);
    color: var(--color-text-secondary, #666);
    min-width: 24px;
}


/* ============================================================================
   FILTER SECTION
   ============================================================================ */

.footer-nav-filter {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}


/* ============================================================================
   RESPONSIVE — TABLET
   ============================================================================ */

@media (max-width: 1024px) {
    .footer-navigation {
        gap: var(--space-2);
        padding: var(--space-2) var(--space-3);
    }

    .footer-nav-prev button,
    .footer-nav-next button {
        padding: var(--space-1) var(--space-3);
        font-size: var(--font-size-xs);
    }
}


/* ============================================================================
   RESPONSIVE — MOBILE
   ============================================================================ */

@media (max-width: 768px) {
    .footer-navigation {
        flex-wrap: wrap;
        justify-content: center;
        gap: var(--space-2);
        padding: var(--space-2);
    }

    .footer-nav-location {
        order: -1;
        width: 100%;
        justify-content: center;
    }

    .footer-nav-matches {
        order: 1;
    }

    .footer-nav-filter {
        order: 2;
    }
}