/* ============================================================================
   Modern Datepicker — opt-in restyle of the jQuery UI datepicker
   ----------------------------------------------------------------------------
   jQuery UI renders EVERY datepicker on a page into one shared #ui-datepicker-div,
   so this skin is opt-in rather than global: a picker asks for it by adding the
   `dp-modern` class in beforeShow and dropping it again in onClose. Pickers that
   don't opt in keep the stock look, so adopting this is a per-field decision.

   Colors reuse the app's --ui-* design tokens (modern-ui.css) with hard
   fallbacks, so the calendar still looks right if those tokens ever go missing.

   modern-ui.css already carries a light datepicker skin (search "jQuery UI
   datepicker skin") that neutralises the stock jQuery UI 1.12 chrome app-wide.
   This file is the fuller treatment layered on top of it: square cells, real
   icon buttons, a today ring, and an entrance animation.

   Every rule is prefixed `#ui-datepicker-div.dp-modern` (id + class) so it
   outranks that base skin (`#ui-datepicker-div .foo`, also id + class — a tie
   that source order alone would decide) and the `#ui-datepicker-div { width:
   auto !important }` rule in _Layout.cshtml, whatever order the bundles load in.
   Mind specificity when editing: the generic `td a, td span` block below is
   (1,2,2), so per-state rules must carry `.ui-datepicker-calendar td` to win.

   Usage:
     $('#field').datepicker({
       showAnim: '',                                              // CSS drives the entrance
       beforeShow: function (input, inst) { inst.dpDiv.addClass('dp-modern'); },
       onClose:    function (text,  inst) { inst.dpDiv.removeClass('dp-modern'); }
     });
   ========================================================================== */

#ui-datepicker-div.dp-modern {
    --dp-primary: var(--ui-primary, #1a6fd4);
    --dp-primary-hover: var(--ui-primary-hover, #185fa5);
    --dp-primary-soft: var(--ui-primary-soft, #e8f2fb);
    --dp-primary-soft-border: var(--ui-primary-soft-border, #b5d4f4);
    --dp-text: var(--ui-text, #1a1a1a);
    --dp-text-2: var(--ui-text-2, #555555);
    --dp-text-3: var(--ui-text-3, #9a9a9a);
    --dp-surface: var(--ui-surface, #ffffff);
    --dp-surface-2: var(--ui-surface-2, #f5f5f5);
    --dp-border: var(--ui-border-2, #e0e0e0);
    --dp-radius: var(--ui-radius-card, 14px);
    --dp-radius-ctl: var(--ui-radius-ctl, 10px);
    --dp-radius-sm: var(--ui-radius-sm, 8px);
    --dp-font: var(--ui-font, 'Poppins', Tahoma, Geneva, Verdana, sans-serif);
    --dp-cell: 38px;
    --dp-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
    /* 7 cells + 16px padding each side. !important beats the width:auto
       !important in _Layout that keeps *other* pickers content-sized. */
    width: 320px !important;
    /* _Layout.cshtml sets a global min-width: 300px so the *other* pickers can
       fit full Mongolian day names. This one sizes itself, so opt out of it —
       otherwise the narrower mobile width below is clamped back up to 300. */
    min-width: 0;
    max-width: calc(100vw - 20px);
    box-sizing: border-box;
    padding: 16px;
    margin-top: 6px; /* breathing room under the input */
    background: var(--dp-surface);
    background-image: none;
    border: 1px solid var(--dp-border);
    border-radius: var(--dp-radius);
    box-shadow: 0 12px 32px rgba(0,0,0,0.12), 0 2px 8px rgba(0,0,0,0.05);
    font-family: var(--dp-font);
    font-size: 13px;
    color: var(--dp-text);
    animation: dp-modern-in 170ms var(--dp-ease);
    transform-origin: top center;
}

@keyframes dp-modern-in {
    from {
        opacity: 0;
        transform: translateY(-6px) scale(0.97);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* ── Header: month/year + arrows ──────────────────────────────────── */

#ui-datepicker-div.dp-modern .ui-datepicker-header {
    position: relative;
    padding: 0 0 12px;
    background: transparent;
    background-image: none;
    border: 0;
    border-radius: 0;
    color: var(--dp-text);
    font-weight: 600;
}

#ui-datepicker-div.dp-modern .ui-datepicker-title {
    margin: 0 40px;
    line-height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

/* Month + year as quiet, integrated dropdowns rather than raw <select>s. */
#ui-datepicker-div.dp-modern select.ui-datepicker-month,
#ui-datepicker-div.dp-modern select.ui-datepicker-year {
    width: auto;
    max-width: 50%;
    margin: 0;
    padding: 6px 26px 6px 10px;
    font-family: var(--dp-font);
    font-size: 13.5px;
    font-weight: 600;
    color: var(--dp-text);
    background-color: var(--dp-surface);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23555555' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 9px center;
    border: 1px solid transparent;
    border-radius: var(--dp-radius-sm);
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    transition: background-color 160ms var(--dp-ease), border-color 160ms var(--dp-ease);
}

    #ui-datepicker-div.dp-modern select.ui-datepicker-month:hover,
    #ui-datepicker-div.dp-modern select.ui-datepicker-year:hover {
        background-color: var(--dp-surface-2);
        border-color: var(--dp-border);
    }

    #ui-datepicker-div.dp-modern select.ui-datepicker-month:focus-visible,
    #ui-datepicker-div.dp-modern select.ui-datepicker-year:focus-visible {
        outline: 2px solid var(--dp-primary);
        outline-offset: 1px;
        border-color: transparent;
    }

/* Arrows become real icon buttons; the stock sprite <span> is hidden and the
   chevron is drawn with borders so it inherits currentColor cleanly. */
#ui-datepicker-div.dp-modern .ui-datepicker-prev,
#ui-datepicker-div.dp-modern .ui-datepicker-next {
    position: absolute;
    top: 0;
    width: 32px;
    height: 32px;
    background: transparent;
    background-image: none;
    border: 0;
    border-radius: var(--dp-radius-sm);
    cursor: pointer;
    transition: background-color 160ms var(--dp-ease);
}

#ui-datepicker-div.dp-modern .ui-datepicker-prev,
#ui-datepicker-div.dp-modern .ui-datepicker-prev-hover {
    left: 0;
}

#ui-datepicker-div.dp-modern .ui-datepicker-next,
#ui-datepicker-div.dp-modern .ui-datepicker-next-hover {
    right: 0;
}

#ui-datepicker-div.dp-modern .ui-datepicker-prev-hover,
#ui-datepicker-div.dp-modern .ui-datepicker-next-hover {
    top: 0; /* neutralises the stock 1px hover nudge, which reads as jitter */
}

    #ui-datepicker-div.dp-modern .ui-datepicker-prev:hover,
    #ui-datepicker-div.dp-modern .ui-datepicker-next:hover {
        background-color: var(--dp-surface-2);
    }

    #ui-datepicker-div.dp-modern .ui-datepicker-prev:focus-visible,
    #ui-datepicker-div.dp-modern .ui-datepicker-next:focus-visible {
        outline: 2px solid var(--dp-primary);
        outline-offset: 1px;
    }

    #ui-datepicker-div.dp-modern .ui-datepicker-prev span,
    #ui-datepicker-div.dp-modern .ui-datepicker-next span {
        display: none;
    }

    #ui-datepicker-div.dp-modern .ui-datepicker-prev:after,
    #ui-datepicker-div.dp-modern .ui-datepicker-next:after {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        width: 7px;
        height: 7px;
        border-left: 1.8px solid var(--dp-text-2);
        border-bottom: 1.8px solid var(--dp-text-2);
        transition: border-color 160ms var(--dp-ease);
    }

    #ui-datepicker-div.dp-modern .ui-datepicker-prev:after {
        transform: translate(-40%, -50%) rotate(45deg);
    }

    #ui-datepicker-div.dp-modern .ui-datepicker-next:after {
        transform: translate(-60%, -50%) rotate(-135deg);
    }

    #ui-datepicker-div.dp-modern .ui-datepicker-prev:hover:after,
    #ui-datepicker-div.dp-modern .ui-datepicker-next:hover:after {
        border-color: var(--dp-text);
    }

    /* Arrow past minDate/maxDate — visibly inert. */
    #ui-datepicker-div.dp-modern .ui-datepicker-prev.ui-state-disabled,
    #ui-datepicker-div.dp-modern .ui-datepicker-next.ui-state-disabled {
        opacity: 0.3;
        cursor: default;
        background-color: transparent;
    }

/* ── Calendar grid ────────────────────────────────────────────────── */

#ui-datepicker-div.dp-modern table.ui-datepicker-calendar {
    width: 100%;
    margin: 0;
    font-size: 13px;
    border-collapse: separate;
    border-spacing: 0;
    table-layout: fixed;
}

/* Weekday row: smaller and lighter than the dates it labels. */
#ui-datepicker-div.dp-modern .ui-datepicker-calendar th {
    padding: 0 0 8px;
    font-size: 11px;
    font-weight: 500;
    color: var(--dp-text-3);
    text-align: center;
    letter-spacing: 0.02em;
    border: 0;
}

#ui-datepicker-div.dp-modern .ui-datepicker-calendar td {
    padding: 2px 0;
    text-align: center;
    border: 0;
    opacity: 1; /* the stock theme dims whole disabled cells */
}

    /* One square, vertically centred target per day — <a> when selectable,
       <span> when not. Sized identically so the grid never shifts. */
    #ui-datepicker-div.dp-modern .ui-datepicker-calendar td a,
    #ui-datepicker-div.dp-modern .ui-datepicker-calendar td span {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: var(--dp-cell);
        height: var(--dp-cell);
        padding: 0;
        margin: 0;
        font-size: 13px;
        font-weight: 500;
        font-family: var(--dp-font);
        line-height: 1;
        text-align: center;
        text-decoration: none;
        color: var(--dp-text);
        background: transparent;
        background-image: none;
        border: 0;
        border-radius: var(--dp-radius-ctl);
        transition: background-color 160ms var(--dp-ease), color 160ms var(--dp-ease), box-shadow 160ms var(--dp-ease);
    }

    #ui-datepicker-div.dp-modern .ui-datepicker-calendar td a {
        cursor: pointer;
    }

        /* Soft hover wash. */
        #ui-datepicker-div.dp-modern .ui-datepicker-calendar td a:hover,
        #ui-datepicker-div.dp-modern .ui-datepicker-calendar td a.ui-state-hover {
            background-color: var(--dp-surface-2);
            color: var(--dp-text);
        }

        #ui-datepicker-div.dp-modern .ui-datepicker-calendar td a:focus-visible {
            outline: 2px solid var(--dp-primary);
            outline-offset: 2px;
        }

/* Today, when it is NOT the selected day: a quiet ring, not a filled block.
   Carries `.ui-datepicker-calendar td` for the same weight reason as above —
   at (1,2,1) the generic block silently ate the blue text and the 600 weight,
   leaving only the ring. */
#ui-datepicker-div.dp-modern .ui-datepicker-calendar td.ui-datepicker-today a,
#ui-datepicker-div.dp-modern .ui-datepicker-calendar td.ui-datepicker-today span {
    color: var(--dp-primary);
    font-weight: 600;
    background-color: transparent;
    box-shadow: inset 0 0 0 1.5px var(--dp-primary-soft-border);
}

    #ui-datepicker-div.dp-modern .ui-datepicker-calendar td.ui-datepicker-today a:hover {
        background-color: var(--dp-primary-soft);
    }

/* Selected day — declared after `today` so it wins when they're the same date. */
#ui-datepicker-div.dp-modern .ui-datepicker-calendar td a.ui-state-active,
#ui-datepicker-div.dp-modern .ui-datepicker-calendar td.ui-datepicker-current-day a,
#ui-datepicker-div.dp-modern .ui-datepicker-today a.ui-state-active {
    background-color: var(--dp-primary);
    color: #ffffff;
    font-weight: 600;
    box-shadow: 0 2px 6px rgba(26,111,212,0.32);
}

    #ui-datepicker-div.dp-modern .ui-datepicker-calendar td a.ui-state-active:hover,
    #ui-datepicker-div.dp-modern .ui-datepicker-calendar td.ui-datepicker-current-day a:hover,
    #ui-datepicker-div.dp-modern .ui-datepicker-today a.ui-state-active:hover {
        background-color: var(--dp-primary-hover);
        color: #ffffff;
    }

/* Days from the neighbouring months, and anything unselectable: present but
   clearly secondary, so the current month reads as the focus.
   NOTE: these selectors carry `.ui-datepicker-calendar td` purely for weight —
   without it they lose to the generic `td a, td span` block above (1,2,2) and
   the dates render full-strength black. */
#ui-datepicker-div.dp-modern .ui-datepicker-calendar td.ui-datepicker-other-month a,
#ui-datepicker-div.dp-modern .ui-datepicker-calendar td.ui-datepicker-other-month span,
#ui-datepicker-div.dp-modern .ui-datepicker-calendar td.ui-datepicker-unselectable span {
    color: var(--dp-text-3);
    font-weight: 400;
    background: transparent;
    box-shadow: none;
}

#ui-datepicker-div.dp-modern .ui-datepicker-calendar td.ui-datepicker-unselectable {
    cursor: default;
}

/* ── Small screens ────────────────────────────────────────────────── */

@media (max-width: 400px) {
    #ui-datepicker-div.dp-modern {
        --dp-cell: 34px;
        width: 288px !important;
        padding: 13px;
    }

        #ui-datepicker-div.dp-modern .ui-datepicker-title {
            margin: 0 36px;
        }
}

/* ── Reduced motion ───────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    #ui-datepicker-div.dp-modern {
        animation: none;
    }

        #ui-datepicker-div.dp-modern .ui-datepicker-calendar td a,
        #ui-datepicker-div.dp-modern .ui-datepicker-calendar td span,
        #ui-datepicker-div.dp-modern .ui-datepicker-prev,
        #ui-datepicker-div.dp-modern .ui-datepicker-next,
        #ui-datepicker-div.dp-modern select.ui-datepicker-month,
        #ui-datepicker-div.dp-modern select.ui-datepicker-year {
            transition: none;
        }
}