/* FR-509 (د) — كسوة منتقي التاريخ <rvg-date-picker>. كانت كتلة <style> مضمَّنة في
   _components/date_picker_assets.twig تُرسَل في رأس كلّ صفحة؛ تُحمَّل من الموضع نفسه. */
    .rvg-dp { position: relative; }

    /* ═══════════ Trigger ═══════════ */

    .rvg-dp-trigger {
        width: 100%;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 7px 12px;
        min-height: 44px;
        box-sizing: border-box;
        /* FR-172 Recessed Well — date trigger matches the field system.
           Local --fld-* vars come from the :where() rule in revogen.css. */
        border: 1px solid var(--color-border-strong);
        border-radius: var(--radius-md);
        background: var(--fld-fill, var(--color-bg-alt));
        color: var(--color-text);
        box-shadow: var(--fld-inset);
        font: inherit;
        font-size: 13px;
        cursor: pointer;
        text-align: start;
        transition: box-shadow 140ms ease, border-color 140ms ease, background 140ms ease;
    }
    @media (prefers-reduced-motion: reduce) {
        .rvg-dp-trigger { transition: none; }
    }
    .rvg-dp-trigger:hover:not(.is-open) {
        background: var(--fld-fill-hover, var(--color-bg-hover));
        border-color: color-mix(in srgb, var(--color-border-strong) 65%, var(--color-text-muted));
        box-shadow: var(--fld-inset);
    }
    .rvg-dp-trigger:focus-visible,
    .rvg-dp-trigger.is-open {
        outline: 2px solid transparent;
        outline-offset: 2px;
        background: var(--color-bg);
        border-color: var(--color-accent);
        box-shadow: none;
    }
    .rvg-dp-trigger .revogen-icon { width: 15px; height: 15px; color: var(--color-accent); flex-shrink: 0; }
    .rvg-dp-trigger-label { flex: 1; font-variant-numeric: tabular-nums; }
    .rvg-dp-trigger-label.is-empty { color: var(--color-text-soft); font-style: italic; }
    .rvg-dp-trigger-chev { color: var(--color-text-muted); flex-shrink: 0; width: 12px !important; height: 12px !important; }

    /* ═══════════ Popover ═══════════ */

    .rvg-dp-pop {
        position: fixed;
        /* Must clear advanced-search modal stack. */
        z-index: 2147483642 !important;
        width: 320px;
        max-width: calc(100vw - 16px);
        background: var(--color-bg);
        border: 1px solid var(--color-border);
        border-radius: var(--radius-lg);
        box-shadow: 0 12px 32px rgba(15, 23, 42, 0.18);
        padding: 10px;
        user-select: none;
    }

    .rvg-dp-backdrop {
        position: fixed; inset: 0;
        background: var(--rvg-modal-backdrop-bg);
        backdrop-filter: var(--rvg-modal-backdrop-blur);
        z-index: 2147483641 !important;
    }
    /* Desktop never needs a backdrop — clicks outside the picker close
       it via @click.outside. The mobile-only rule keeps the modal feel
       on small screens. The element relies on `[x-cloak]` (set in the
       base layout) to stay hidden during the pre-Alpine boot window. */
    @media (min-width: 769px) { .rvg-dp-backdrop { display: none; } }

    /* FR-119 (2026-06-04) — Bottom-sheet pattern at ≤768px (tablet & phone).
       Mirrors the list-tools bottom-sheet for consistent mobile UX: the
       popover slides up from the viewport bottom, stuck flush against
       `bottom: 0`, full viewport width, rounded top corners, darker
       backdrop above.

       Cells lose their default `aspect-ratio: 1/1` here — at full tablet
       widths a square cell would be ~110px tall and force the calendar
       past the viewport. A fixed 44px row keeps the grid compact at any
       width while remaining tappable.

       Works without `!important` because `compute()` in the Alpine state
       bails out and leaves `popStyle` empty on small viewports — the
       stylesheet owns positioning here with no inline-style fight. */
    @media (max-width: 768px) {
        /* Backdrop already styled by the global rule via
           --rvg-modal-backdrop-bg / --rvg-modal-backdrop-blur — no override
           needed. The desktop `@media (min-width:769px)` rule above hides
           it; this @media block keeps it visible on tablet/phone. */
        .rvg-dp-pop {
            inset: auto 0 0 0;
            width: auto;
            max-width: 100%;
            border-radius: 14px 14px 0 0;
            border-bottom: 0;
            padding: 14px 14px calc(env(safe-area-inset-bottom, 0px) + 14px);
            box-shadow: 0 -8px 24px rgba(15, 23, 42, 0.22);
            max-height: 85vh;
            overflow-y: auto;
            animation: rvg-dp-sheet-up 0.2s ease;
        }
        .rvg-dp-cell {
            aspect-ratio: auto;
            height: 44px;
        }
        .rvg-dp-mcell,
        .rvg-dp-ycell {
            height: 44px;
        }
    }
    @keyframes rvg-dp-sheet-up {
        from { transform: translateY(100%); opacity: 0; }
        to   { transform: translateY(0);    opacity: 1; }
    }

    /* ═══════════ Header ═══════════ */

    .rvg-dp-head {
        display: flex; align-items: center; gap: 4px;
        padding-bottom: 8px;
        border-bottom: 1px solid var(--color-border);
        margin-bottom: 8px;
    }
    .rvg-dp-nav,
    .rvg-dp-title-btn {
        border: 1px solid transparent;
        border-radius: var(--radius-sm);
        background: transparent;
        color: var(--color-text);
        cursor: pointer;
        transition: all 140ms ease;
        font: inherit;
    }
    .rvg-dp-nav {
        display: inline-flex; align-items: center; justify-content: center;
        width: 30px; height: 30px;
        color: var(--color-text-muted);
        flex-shrink: 0;
    }
    .rvg-dp-nav:hover { background: var(--color-bg-alt); color: var(--color-accent); }
    .rvg-dp-nav .revogen-icon { width: 14px; height: 14px; }
    .rvg-dp-nav:disabled { opacity: 0.3; cursor: not-allowed; }

    /* Title is a button — clicking goes one zoom level up: day → month → year. */
    .rvg-dp-title-btn {
        flex: 1;
        height: 30px;
        font-size: 13px; font-weight: 600;
        font-variant-numeric: tabular-nums;
        padding: 0 8px;
    }
    .rvg-dp-title-btn:hover { background: var(--color-accent-soft); color: var(--color-accent); }

    /* ═══════════ Day grid ═══════════ */

    .rvg-dp-dow {
        display: grid; grid-template-columns: repeat(7, 1fr);
        margin-bottom: 4px;
    }
    .rvg-dp-dow span {
        font-size: 10px; font-weight: 700; color: var(--color-text-muted);
        text-align: center; padding: 4px 0;
        text-transform: uppercase; letter-spacing: 0.04em;
    }

    .rvg-dp-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
    .rvg-dp-cell {
        width: 100%; aspect-ratio: 1 / 1;
        display: inline-flex; align-items: center; justify-content: center;
        border: 1px solid transparent;
        border-radius: var(--radius-sm);
        background: transparent; color: var(--color-text);
        font-size: 12.5px;
        font-variant-numeric: tabular-nums;
        cursor: pointer;
        transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
    }
    .rvg-dp-cell:hover { background: var(--color-accent-soft); color: var(--color-accent); }
    .rvg-dp-cell.is-other { color: var(--color-text-soft); opacity: 0.45; }
    .rvg-dp-cell.is-today { border-color: var(--color-accent); color: var(--color-accent); font-weight: 700; }
    .rvg-dp-cell.is-selected { background: var(--color-accent); color: var(--color-accent-fg); font-weight: 700; }
    .rvg-dp-cell.is-selected.is-today { border-color: var(--color-accent); }
    /* FR-043 — out-of-range cells are hover-frozen and pointer-disabled. */
    .rvg-dp-cell.is-disabled,
    .rvg-dp-cell:disabled {
        color: var(--color-text-muted); opacity: 0.25;
        text-decoration: line-through;
        cursor: not-allowed;
    }
    .rvg-dp-cell.is-disabled:hover,
    .rvg-dp-cell:disabled:hover { background: transparent; color: var(--color-text-muted); }

    /* ═══════════ Month + Year grids ═══════════ */

    .rvg-dp-mgrid,
    .rvg-dp-ygrid {
        display: grid; grid-template-columns: repeat(3, 1fr);
        gap: 4px; padding: 6px 0;
    }
    .rvg-dp-mcell,
    .rvg-dp-ycell {
        padding: 14px 6px;
        display: flex; align-items: center; justify-content: center;
        border: 1px solid transparent;
        border-radius: var(--radius-md);
        background: transparent; color: var(--color-text);
        font-size: 13px; font-weight: 500;
        font-variant-numeric: tabular-nums;
        cursor: pointer;
        transition: all 140ms ease;
    }
    .rvg-dp-mcell:hover,
    .rvg-dp-ycell:hover { background: var(--color-accent-soft); color: var(--color-accent); }
    .rvg-dp-mcell.is-current,
    .rvg-dp-ycell.is-current { border-color: var(--color-accent); color: var(--color-accent); font-weight: 700; }
    .rvg-dp-mcell.is-selected,
    .rvg-dp-ycell.is-selected { background: var(--color-accent); color: var(--color-accent-fg); font-weight: 700; }
    .rvg-dp-ycell.is-other { color: var(--color-text-soft); opacity: 0.55; }

    /* ═══════════ Time block ═══════════ */

    /* ═══════════ Time picker — redesigned 2026-06-04 ═══════════ */
    .rvg-dp-time {
        padding: 16px 12px 8px;
        display: flex; flex-direction: column; align-items: center; gap: 14px;
    }
    .rvg-dp-time-label {
        font-size: 13px; font-weight: 700; color: var(--color-text);
        letter-spacing: 0.02em;
    }
    /* Time format is universally HH:MM left-to-right (digits are LTR).
       Forcing `direction: ltr` on the row keeps hour on the visual left
       and minute on the visual right regardless of page direction —
       avoids the confusing "MM : HH" flip seen in RTL flex flow. */
    .rvg-dp-time-row {
        display: flex; align-items: flex-start; gap: 10px;
        direction: ltr;
        font-variant-numeric: tabular-nums;
    }
    .rvg-dp-time-stepper {
        display: flex; flex-direction: column; align-items: center; gap: 5px;
    }
    .rvg-dp-time-arrow {
        width: 56px; height: 32px;
        display: inline-flex; align-items: center; justify-content: center;
        border: 1px solid var(--color-border);
        border-radius: var(--radius-sm);
        background: var(--color-bg);
        color: var(--color-text-muted);
        cursor: pointer;
        transition: all 120ms ease;
    }
    .rvg-dp-time-arrow:hover { background: var(--color-accent-soft); color: var(--color-accent); border-color: var(--color-accent); }
    .rvg-dp-time-arrow .revogen-icon { width: 14px; height: 14px; }
    .rvg-dp-time-input {
        width: 56px; height: 52px;
        text-align: center;
        border: 1px solid var(--color-border);
        border-radius: var(--radius-md);
        background: var(--color-bg);
        color: var(--color-text);
        font-size: 24px; font-weight: 700;
        font-variant-numeric: tabular-nums;
        font-family: inherit;
        padding: 0;
    }
    .rvg-dp-time-input:focus {
        outline: 2px solid var(--color-accent);
        outline-offset: -1px;
        border-color: var(--color-accent);
    }
    .rvg-dp-time-sub {
        font-size: 10px; font-weight: 600;
        color: var(--color-text-muted);
        letter-spacing: 0.05em;
        margin-top: 1px;
    }
    .rvg-dp-time-sep {
        font-size: 26px; font-weight: 700; color: var(--color-text-muted);
        margin: 0;
        line-height: 1;
        /* Offset to align the colon visually with the centre of the
           input boxes, NOT with the top arrows. Up-arrow (32px) +
           gap (5px) + half input (26px) = 63px from top. */
        align-self: center;
        margin-top: 22px;
    }

    /* AM/PM — full-width segmented pill, larger touch targets.
       Only shows when admin sets time_format=12h. */
    .rvg-dp-time-ampm {
        display: flex; width: 100%; max-width: 220px;
        border: 1px solid var(--color-border);
        border-radius: var(--radius-md);
        overflow: hidden;
        background: var(--color-bg-alt);
    }
    .rvg-dp-time-ampm button {
        flex: 1;
        padding: 10px 12px;
        border: 0; border-radius: 0;
        background: transparent;
        color: var(--color-text-muted);
        font-size: 13px; font-weight: 700;
        white-space: nowrap; /* «صباحاً/مساءً» لا تنكسر */
        cursor: pointer;
        transition: all 120ms ease;
    }
    .rvg-dp-time-ampm button + button {
        border-inline-start: 1px solid var(--color-border);
    }
    .rvg-dp-time-ampm button:not(.is-active):hover {
        background: var(--color-accent-soft); color: var(--color-accent);
    }
    .rvg-dp-time-ampm button.is-active {
        background: var(--color-accent); color: var(--color-accent-fg);
    }

    /* In datetime mode, time strip sits below the day grid as a compact horizontal bar. */
    .rvg-dp-pop[data-mode="datetime"] .rvg-dp-time {
        padding: 8px 0 4px;
        flex-direction: row; flex-wrap: wrap; justify-content: center;
        border-top: 1px solid var(--color-border);
        margin-top: 6px; gap: 6px;
    }
    .rvg-dp-pop[data-mode="datetime"] .rvg-dp-time-input { width: 48px; height: 40px; font-size: 18px; }
    /* أمر المالك 08-03: زرّا صباحاً/مساءً بارتفاع حقلَي الساعة والدقيقة المجاورَين */
    .rvg-dp-pop[data-mode="datetime"] .rvg-dp-time-ampm { height: 40px; align-items: stretch; }
    .rvg-dp-pop[data-mode="datetime"] .rvg-dp-time-arrow { width: 48px; height: 24px; }
    .rvg-dp-pop[data-mode="datetime"] .rvg-dp-time-arrow .revogen-icon { width: 10px; height: 10px; }
    .rvg-dp-pop[data-mode="datetime"] .rvg-dp-time-sep {
        font-size: 18px; margin-top: 18px;
    }
    .rvg-dp-pop[data-mode="datetime"] .rvg-dp-time-sub { display: none; }
    .rvg-dp-pop[data-mode="datetime"] .rvg-dp-time-ampm {
        max-width: 120px;
    }
    .rvg-dp-pop[data-mode="datetime"] .rvg-dp-time-ampm button {
        padding: 6px 10px; font-size: 11px;
    }

    /* Small-screen responsive: tighten the time stepper geometry on
       phones. (Popover width/position handled by the ≤768px bottom-sheet
       block — do NOT override it here.) */
    @media (max-width: 420px) {
        .rvg-dp-time { padding: 12px 8px 6px; gap: 10px; }
        .rvg-dp-time-input { width: 50px; height: 46px; font-size: 20px; }
        .rvg-dp-time-arrow { width: 50px; height: 28px; }
        .rvg-dp-time-sep { font-size: 22px; margin-top: 19px; }
        .rvg-dp-time-ampm button { padding: 9px 10px; font-size: 12px; }
        .rvg-dp-pop[data-mode="datetime"] .rvg-dp-time-input { width: 42px; height: 34px; font-size: 16px; }
        .rvg-dp-pop[data-mode="datetime"] .rvg-dp-time-arrow { width: 42px; height: 22px; }
    }

    /* ═══════════ Footer ═══════════ */

    .rvg-dp-foot {
        display: flex; justify-content: space-between; gap: 8px;
        margin-top: 8px; padding-top: 8px;
        border-top: 1px solid var(--color-border);
    }
    .rvg-dp-foot-group { display: flex; gap: 8px; }
    .rvg-dp-foot button {
        padding: 6px 12px;
        border: 1px solid var(--color-border);
        border-radius: var(--radius-sm);
        background: var(--color-bg);
        color: var(--color-text);
        font-size: 12px; font-weight: 500;
        cursor: pointer;
        transition: all 140ms ease;
    }
    .rvg-dp-foot button:hover {
        background: var(--color-bg-alt);
        border-color: var(--color-accent);
        color: var(--color-accent);
    }
    .rvg-dp-foot .rvg-dp-clear { color: var(--color-text-muted); }
    .rvg-dp-foot .rvg-dp-clear:hover {
        background: color-mix(in srgb, var(--color-danger) 10%, transparent);
        border-color: var(--color-danger);
        color: var(--color-danger);
    }
    .rvg-dp-foot .rvg-dp-apply {
        background: var(--color-accent);
        border-color: var(--color-accent);
        color: var(--color-accent-fg);
        font-weight: 600;
    }
    .rvg-dp-foot .rvg-dp-apply:hover { filter: brightness(0.92); }
    /* FR-308 — صفّ الإزاحات الجاهزة: سطر واحد مضغوط (لا يسمّن اللوحة —
       كان شبكة 2×2 بـ79px فأغرقها تحت الشاشات القصيرة). */
    .rvg-dp-quick {
        display: flex;
        gap: 4px;
        border-bottom: none;
        padding-top: 6px;
        padding-bottom: 6px;
    }
    .rvg-dp-quick button {
        flex: 1;
        font-size: 11px;
        padding: 4px 6px;
        white-space: nowrap;
        min-width: 0;
    }
    .rvg-dp-foot button[disabled] {
        opacity: 0.45;
        cursor: not-allowed;
        pointer-events: none;
    }

    /* ═══════════ Calendar toggle (Hijri / Gregorian) ═══════════
       Shown only when admin set Settings ▸ Formatting ▸ Calendar to
       hijri or both. Sits ABOVE the header so it doesn't compete with
       month-nav and year-jump controls. */
    .rvg-dp-cal {
        display: flex; align-items: center; justify-content: center;
        gap: 0;
        padding: 4px;
        margin-bottom: 10px;
        background: var(--color-bg-alt);
        border: 1px solid var(--color-border);
        border-radius: var(--radius-md);
    }
    .rvg-dp-cal button {
        flex: 1;
        padding: 6px 12px;
        border: none;
        background: transparent;
        color: var(--color-text-muted);
        font-size: 12px; font-weight: 600;
        border-radius: var(--radius-sm);
        cursor: pointer;
        transition: all 140ms ease;
        font-family: inherit;
    }
    .rvg-dp-cal button:hover { color: var(--color-accent); }
    .rvg-dp-cal button.is-active {
        background: var(--color-bg);
        color: var(--color-accent);
        box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
    }

    /* (Mobile popover positioning now handled by the bottom-sheet @media
       block above — was a centred-modal rule, superseded.) */