{{-- Shared Litepicker theming for every page with a date-range field
     (Screenshots, Timesheet, People Summary).

     Litepicker v2 ships no separate stylesheet — it injects its base CSS from
     the JS bundle — and Tabler's overrides for it live in `_litepicker.scss`,
     compiled into the vendors bundle below. The base layout does not load that
     bundle, so each picker page pulls it in.

     The pages that include this must still load the vendors bundle themselves
     if they need the rest of it; this only carries what Litepicker needs. --}}
<style>
    /* ── Month chevrons ────────────────────────────────────────────────────
       Tabler's vendors bundle contains `.litepicker svg { fill: none !important }`,
       written for its own icons, which are stroke-drawn (Tabler Icons). But
       Litepicker paints its « » month arrows as FILLED paths and colours them
       with `fill: var(--litepicker-button-prev-month-color)`. The blanket rule
       wins on !important and erases them: the buttons are still there and still
       clickable, but nothing is painted, so nobody can tell the month can be
       changed at all.

       Fixed by specificity rather than by touching the vendored bundle — this
       selector is longer than `.litepicker svg`, so it wins even though the
       bundle may load after this. `currentColor` keeps the arrow tied to the
       button's own colour, so Litepicker's hover state still works by itself. */
    .litepicker .container__months .month-item-header .button-previous-month > svg,
    .litepicker .container__months .month-item-header .button-next-month > svg {
        fill: currentColor !important;
    }

    /* The default (--tblr-secondary, #6c7a91) is thin and low contrast at 14px.
       Body colour reads as a control rather than as decoration. */
    .litepicker {
        --litepicker-button-prev-month-color: var(--tblr-body-color);
        --litepicker-button-next-month-color: var(--tblr-body-color);
        --litepicker-button-prev-month-color-hover: var(--tblr-primary);
        --litepicker-button-next-month-color-hover: var(--tblr-primary);
    }

    /* Colour alone still leaves them looking like two glyphs in a heading.
       A hover chip and a real hit area say "button" — Litepicker's own padding
       is 3px 5px, which is smaller than anything is comfortable to click. */
    .litepicker .container__months .month-item-header .button-previous-month,
    .litepicker .container__months .month-item-header .button-next-month {
        padding: .25rem .4rem !important;
        border-radius: var(--tblr-border-radius, 4px);
        transition: background-color .15s ease, color .15s ease;
    }
    .litepicker .container__months .month-item-header .button-previous-month:hover,
    .litepicker .container__months .month-item-header .button-next-month:hover {
        background-color: var(--tblr-bg-surface-secondary, rgba(0, 0, 0, .05));
    }

    /* Keyboard users get the same affordance as the mouse. */
    .litepicker .container__months .month-item-header .button-previous-month:focus-visible,
    .litepicker .container__months .month-item-header .button-next-month:focus-visible {
        outline: 2px solid var(--tblr-primary);
        outline-offset: 1px;
    }

    .litepicker { font-size: .875rem; }
</style>