/* ==========================================================================
   Date RANGE field — the one control that replaces a «من تاريخ / إلى تاريخ»
   pair, and the theming + RTL layer over the vendored flatpickr.
   Driven by common/date-range-field.js. See plans/date-range-filter-plan.md.

   Two things here are not optional:

   1. flatpickr 4.6.13 has NO RTL support — not an option, not a locale flag,
      and its stylesheet hardcodes `direction: ltr` on the calendar. Every
      mirrored rule below is ours, and deleting one leaves the Arabic panel
      with its arrows and its range sweep pointing the wrong way.
   2. flatpickr ships its own palette (#569ff7 selected, #e6e6e6 range, #fff
      ground). Those follow no theme at all, so on a dark card the panel would
      stay white — the same failure the project documents for --bs-* classes.
      Every colour is remapped to a project token, which is what makes it
      follow data-theme with no dark-mode block of its own.
   ========================================================================== */

/* ── the field ─────────────────────────────────────────────────────────── */

.date-range {
    position: relative;
    display: block;
}

/* The two native inputs, kept as the ISO value holders.

   Visually hidden but NOT display:none, NOT disabled and NOT readonly — any of
   those would bar them from constraint validation, which would silently turn a
   mandatory range (the ledger, both profit reports, the trial balance, the due
   schedule) into an optional one. Same bargain as .multi-select-native. */
.date-range-holder {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    border: 0;
}

/* Room for the calendar icon and the clear button so a long range never runs under them. */
.date-range-box {
    width: 100%;
    padding-inline-start: 2.25rem;
    padding-inline-end: 2rem;
    cursor: pointer;
}

/* flatpickr makes that box `readonly` — the panel IS its input method — and
   `_forms.css` paints every [readonly] control as a switched-off field:
   `--bg-secondary` behind it, `--text-secondary` on it, `--border` instead of
   `--border-strong`, and `cursor: not-allowed`. This one is fully interactive,
   so it read as disabled while sitting beside live filters, and the
   `cursor: pointer` three lines up never applied — `.form-control[readonly]`
   is (0,2,0) and `.date-range-box` alone is (0,1,0).

   (0,3,0) here beats that and still loses to the (0,4,0) invalid ring below,
   which is the order that matters: this must never repaint a red border. */
.date-range .date-range-box[readonly] {
    background-color: var(--card);
    border-color: var(--border-strong);
    color: var(--text);
    cursor: pointer;
}

.date-range-icon {
    position: absolute;
    inset-block-start: 50%;
    inset-inline-start: 0.75rem;
    transform: translateY(-50%);
    color: var(--text-muted);
    font-size: 0.875rem;
    pointer-events: none;
}

.date-range-clear {
    position: absolute;
    inset-block-start: 50%;
    inset-inline-end: 0.4rem;
    transform: translateY(-50%);
    display: none;
    padding: 0.15rem 0.35rem;
    border: 0;
    background: transparent;
    color: var(--text-muted);
    font-size: 0.8rem;
    line-height: 1;
    cursor: pointer;
}

.date-range-clear:hover {
    color: var(--danger-text);
}

/* Nothing to clear on an empty field, so the button is not there to mislead. */
.date-range.has-value .date-range-clear {
    display: block;
}

/* TWO grid tracks, because this control replaced TWO filters.

   A filter row in this app is not Bootstrap's twelfths: `_admin.css` turns
   `.row.g-2.align-items-end` into `repeat(auto-fit, minmax(min(190px, 100%),
   1fr))` and explicitly neutralises `col-*` on its children, so every filter
   gets an equal ~190px track no matter what column class it carries — a
   `col-md-4` on this field measured exactly the same 202px as the `col-md-2`
   next to it. One track cannot hold «01/08/2026 - 31/08/2026» plus the calendar
   icon and the clear button: the text wants 156px and the padding 68px against 132px of
   content box, so the start of the range was clipped.

   Spanning two restores precisely the width the «من تاريخ» + «إلى تاريخ» pair
   used to occupy, so the rest of the row lays out exactly as it did before.

   Guarded by a media query because `span 2` in a ONE-column grid manufactures an
   implicit second column and breaks the phone layout; below 768px the row is a
   single column and the field is already full width. */
@media (min-width: 768px) {
    .row.g-2.align-items-end > [class*="col-"]:has(> [data-date-range]) {
        grid-column: span 2;
    }
}

/* ── validation ────────────────────────────────────────────────────────── */
/* The ring is driven by the HOLDER's :invalid, not the box's. flatpickr makes
   the visible box readonly, and a readonly input is barred from constraint
   validation — it matches neither :valid nor :invalid — so it can never paint
   itself, and (usefully) Bootstrap's green :valid tick never lands on it
   either. The holder is the real required control; `~` reaches forward to the
   box, which is why the JS appends the holders FIRST. */

.was-validated .date-range-holder:invalid ~ .date-range-box {
    border-color: var(--danger);
}

.was-validated .date-range-holder:invalid ~ .date-range-box:focus {
    box-shadow: 0 0 0 3px rgba(var(--danger-rgb), 0.15);
}

/* ── the panel ─────────────────────────────────────────────────────────── */

/* GRID, not flex — and that is the whole point of this rule.

   flatpickr's calendar has THREE children once the presets are inserted:
   the column, .flatpickr-months (the header) and .flatpickr-innerContainer
   (the days). A flex row lays all three side by side, which turns the month
   header into a squeezed third column and drops «2026-5» sideways under the
   calendar. The header and the days have to share ONE column beside the
   presets, so the areas are named explicitly.

   `width: auto` overrides an INLINE width flatpickr writes from JS for the
   multi-month layout; without !important the preset column would squeeze the
   calendar into that fixed width. Scoped to .open because the base rule is
   `display: none` — making this `display: grid` unconditionally would leave a
   closed panel painted on the page. */
.flatpickr-calendar.date-range-calendar.open {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas:
        "presets months"
        "presets days";
    align-items: start;
    width: auto !important;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    color: var(--text);
    padding: 0.35rem;
    gap: 0.35rem;
    /* Opaque, and mixed against the panel's own ground so it reads exactly like
       a 14% wash of --primary in either theme. See .flatpickr-day.inRange. */
    --date-range-fill: color-mix(in srgb, var(--primary) 14%, var(--card));
}

/* flatpickr draws its border with a four-way box-shadow and an arrow through
   ::before/::after. We have a real border and a real shadow above, so both
   would double up. */
.flatpickr-calendar.date-range-calendar::before,
.flatpickr-calendar.date-range-calendar::after {
    display: none;
}

.date-range-presets {
    grid-area: presets;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 8.5rem;
    padding-inline-end: 0.35rem;
    border-inline-end: 1px solid var(--border);
}

.date-range-preset {
    border: 0;
    background: transparent;
    color: var(--text-secondary);
    text-align: start;
    font-size: 0.8125rem;
    padding: 0.4rem 0.6rem;
    border-radius: var(--radius-sm);
    white-space: nowrap;
    cursor: pointer;
}

.date-range-preset:hover {
    background: rgba(var(--primary-rgb), 0.1);
    color: var(--text);
}

.date-range-preset.is-active {
    background: rgba(var(--primary-rgb), 0.16);
    color: var(--primary);
    font-weight: 600;
}

.date-range-calendar .flatpickr-months {
    grid-area: months;
    /* The prev/next arrows are position:absolute and flatpickr never gives
       .flatpickr-months a position, so they anchor to .flatpickr-calendar —
       which now includes the preset column, leaving «السابق» floating on top of
       «اليوم». Containing block goes here, where the arrows belong. */
    position: relative;
}

.date-range-calendar .flatpickr-innerContainer {
    grid-area: days;
}

/* flatpickr writes an INLINE width on .flatpickr-days for the multi-month
   layout and never recomputes it when showMonths changes after init. A panel
   built at desktop width and then opened on a phone kept the two-month width
   (618px) while rendering one 308px month, so .flatpickr-weekdays — which is
   width:100% of that box — ran 310px wider than the grid it labels and pushed
   «خميس» and «جمعة» outside the panel entirely.

   Letting the flex row size itself from its month columns fixes it in both
   directions, and survives any later change to showMonths. */
.date-range-calendar .flatpickr-days {
    width: auto !important;
}

/* ── theming flatpickr onto the project tokens ─────────────────────────── */

.date-range-calendar .flatpickr-months .flatpickr-month,
.date-range-calendar .flatpickr-current-month,
.date-range-calendar .flatpickr-months .flatpickr-prev-month,
.date-range-calendar .flatpickr-months .flatpickr-next-month {
    color: var(--text);
    fill: var(--text);
}

.date-range-calendar .flatpickr-months .flatpickr-prev-month:hover svg,
.date-range-calendar .flatpickr-months .flatpickr-next-month:hover svg {
    fill: var(--primary);
}

.date-range-calendar .flatpickr-current-month .flatpickr-monthDropdown-months,
.date-range-calendar .flatpickr-current-month input.cur-year {
    color: var(--text);
    font-weight: 600;
}

/* A native <select> inside a themed panel keeps the OS list colours otherwise. */
.date-range-calendar .flatpickr-monthDropdown-months .flatpickr-monthDropdown-month {
    background: var(--card);
    color: var(--text);
}

.date-range-calendar span.flatpickr-weekday {
    color: var(--text-muted);
    font-weight: 600;
}

.date-range-calendar .flatpickr-day {
    color: var(--text);
}

/* A CLASS-NAME COLLISION, and it silently breaks the whole grid.

   In multi-month mode flatpickr marks each leading/trailing filler day
   `.flatpickr-day.hidden` and relies on `visibility: hidden` — the cell has to
   keep OCCUPYING its column, or every date shifts left and the numbers stop
   lining up under their weekday. This app's own `.hidden` utility
   (_utilities.css) is `display: none !important`, which removes the box: on the
   first render September started on Saturday instead of Tuesday and the last
   row spread three dates across seven columns.

   `!important` is required to answer `!important`; the display value restates
   what flatpickr gives .flatpickr-day. */
.date-range-calendar .flatpickr-day.hidden {
    display: inline-block !important;
    visibility: hidden;
}

.date-range-calendar .flatpickr-day.flatpickr-disabled,
.date-range-calendar .flatpickr-day.prevMonthDay,
.date-range-calendar .flatpickr-day.nextMonthDay,
.date-range-calendar .flatpickr-day.notAllowed {
    color: var(--text-muted);
    opacity: 0.55;
}

.date-range-calendar .flatpickr-day:hover,
.date-range-calendar .flatpickr-day:focus {
    background: rgba(var(--primary-rgb), 0.12);
    border-color: transparent;
}

.date-range-calendar .flatpickr-day.today {
    border-color: var(--primary);
}

.date-range-calendar .flatpickr-day.selected,
.date-range-calendar .flatpickr-day.startRange,
.date-range-calendar .flatpickr-day.endRange,
.date-range-calendar .flatpickr-day.selected:hover,
.date-range-calendar .flatpickr-day.startRange:hover,
.date-range-calendar .flatpickr-day.endRange:hover {
    background: var(--primary);
    border-color: var(--primary);
    color: var(--on-primary);
}

/* The range fill must be OPAQUE, and that is not a style preference.

   The day cells are 39px in a 44px column, so there is a 5px gap between
   neighbours; flatpickr bridges it by having every inRange cell paint ±5px of
   box-shadow. Both neighbours therefore paint the SAME gap, and with a
   translucent colour the two layers stack — 0.14 over 0.14 reads as 0.26 — so a
   filled range showed a darker vertical seam between every pair of days.
   color-mix gives the identical tint as a solid colour, and two identical
   opaque layers are indistinguishable from one. */
.date-range-calendar .flatpickr-day.inRange {
    background: var(--date-range-fill);
    border-color: transparent;
    box-shadow: -5px 0 0 var(--date-range-fill),
                 5px 0 0 var(--date-range-fill);
}

/* Closes the gap between the two cells of a two-day range. */
.date-range-calendar .flatpickr-day.startRange + .endRange:not(:nth-child(7n+1)) {
    box-shadow: -10px 0 0 var(--primary);
}

/* The divider flatpickr draws between the two months. */
.date-range-calendar .dayContainer + .dayContainer {
    box-shadow: -1px 0 0 var(--border);
}

/* ── RTL ───────────────────────────────────────────────────────────────── */
/* All of it ours: the vendored stylesheet pins `direction: ltr` on the
   calendar, so the two-month order, the arrows and the range sweep all point
   the wrong way in Arabic until these fire. Two class names deep to beat the
   library's own single-class rules regardless of link order. */

.flatpickr-calendar.date-range-calendar-rtl {
    direction: rtl;
}

.date-range-calendar-rtl .dayContainer {
    text-align: right;
}

/* left/right on the arrows are PHYSICAL, so `direction: rtl` does not move
   them — «السابق» has to be sent to the right edge by hand, and its chevron
   flipped to match. */
.date-range-calendar-rtl .flatpickr-months .flatpickr-prev-month {
    left: auto;
    right: 0;
}

.date-range-calendar-rtl .flatpickr-months .flatpickr-next-month {
    right: auto;
    left: 0;
}

.date-range-calendar-rtl .flatpickr-months .flatpickr-prev-month svg,
.date-range-calendar-rtl .flatpickr-months .flatpickr-next-month svg {
    transform: scaleX(-1);
}

/* The year spinner parks its arrows on the physical right. */
.date-range-calendar-rtl .numInputWrapper span {
    right: auto;
    left: 0;
}

/* THE ENDPOINT CAPS. flatpickr rounds the range's start on its left and its end
   on its right, which is correct only left-to-right: in Arabic the range starts
   at the RIGHT edge, so the caps have to swap or the pill opens outward at both
   ends — the first day looked bitten off on the wrong side and the last one
   bulged into the empty cells after it. `border-radius` is physical, so
   `direction: rtl` does nothing for it. */
.date-range-calendar-rtl .flatpickr-day.startRange,
.date-range-calendar-rtl .flatpickr-day.selected.startRange,
.date-range-calendar-rtl .flatpickr-day.endRange.startRange {
    border-radius: 0 50px 50px 0;
}

.date-range-calendar-rtl .flatpickr-day.endRange,
.date-range-calendar-rtl .flatpickr-day.selected.endRange,
.date-range-calendar-rtl .flatpickr-day.startRange.endRange {
    border-radius: 50px 0 0 50px;
}

/* A one-day range is both ends at once and stays a full circle. */
.date-range-calendar-rtl .flatpickr-day.startRange.endRange,
.date-range-calendar-rtl .flatpickr-day.selected.startRange.endRange {
    border-radius: 50px;
}

/* The two-cell bridge and the month divider are both directional offsets. */
.date-range-calendar-rtl .flatpickr-day.startRange + .endRange:not(:nth-child(7n+1)) {
    box-shadow: 10px 0 0 var(--primary);
}

.date-range-calendar-rtl .dayContainer + .dayContainer {
    box-shadow: 1px 0 0 var(--border);
}

/* ── narrow screens ────────────────────────────────────────────────────── */
/* Where the PRESET column stops fitting beside the month and moves to a row
   above it, so the panel stays inside a phone viewport instead of scrolling
   sideways.

   This is NOT where the month count drops. That happens at 900px, in the JS
   (`TWO_MONTHS`), because two months want 770px of panel while one month plus a
   side preset column wants only ~470px. The two were one number until
   2026-09-11, and the 576-900px band in between opened a two-month grid inside
   a panel with no room for it. */

@media (max-width: 575.98px) {
    .flatpickr-calendar.date-range-calendar.open {
        grid-template-columns: 1fr;
        grid-template-areas:
            "presets"
            "months"
            "days";
        max-width: calc(100vw - 1.5rem);
    }

    /* The wrapped preset row is what sets the panel's width here, and it is far
       wider than one 308px month. Left to stretch, the day grid sits on the
       start edge and leaves a dead half-panel beside it — on the right in
       English, on the left in Arabic. Centre it under the presets instead. */
    .date-range-calendar .flatpickr-innerContainer {
        justify-content: center;
    }

    .date-range-presets {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        min-width: 0;
        padding-inline-end: 0;
        padding-block-end: 0.35rem;
        border-inline-end: 0;
        border-block-end: 1px solid var(--border);
    }
}