/* ============================================================================
   VRYNO DATE RANGE PANEL
   ============================================================================
   The layout for the range picker that assets/js/vryno-daterange.js opens.

   style.css already carries about thirty .daterangepicker rules, but all of
   them are colour: cell states, the selected day, the select backgrounds. The
   library's own stylesheet -- the part that makes it a floating panel with
   two months side by side -- was never added to this project, so the theming
   had nothing to sit on. That layout is written here rather than by adding
   the vendor file, so there is one place to look when the panel is wrong, and
   so the panel picks up the product's own radius, spacing and accent instead
   of the library's defaults.

   Only geometry and surface are set here. The cell colours stay in style.css,
   which means the panel follows the theme colour the user picks, and the dark
   theme keeps working through dark-theme-fixes.css.
============================================================================ */

/* --------------------------------------------------------------- the field */

/* A <div> that opens something has to say so. */
.vr-daterange,
.daterangepick,
.reportrange {
    cursor: pointer;
    user-select: none;
}

/* ---------------------------------------------------------------- the panel */

.daterangepicker {
    /* Hidden until the field is clicked. The library opens and closes it with
       jQuery's show()/hide(), which write display:block and display:none
       straight onto the element and so override this either way -- but until
       the first open there is no inline style at all, and without this the
       panel sits on the page from load. The vendor stylesheet this project
       never had is where that default used to live. */
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 3001;
    margin-top: 6px;
    padding: 0;
    width: auto;
    max-width: none;
    border-radius: 14px;
    overflow: hidden;
}

/* The library draws a small arrow against the field with these. The panel
   reads as a floating sheet in this product, so it does not get one. */
.daterangepicker:before,
.daterangepicker:after {
    display: none;
}

/* No preset sidebar is passed, but the element is rendered regardless. */
.daterangepicker .ranges {
    display: none;
}

/* ------------------------------------------------------------- the calendars

   The container is toggled with jQuery's show()/hide(), which writes
   display:block straight onto the element -- so the two months are floated
   rather than laid out with flex, which that inline value would override. */

.daterangepicker .drp-calendar {
    float: left;
    max-width: none;
    width: 268px;
    padding: 14px 14px 8px;
}

.daterangepicker .drp-calendar.right {
    border-left: 1px solid var(--border-color);
}

.daterangepicker .calendar-table {
    border: 0;
    padding: 0;
    border-radius: 0;
}

.daterangepicker .calendar-table table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 2px;
}

/* The month name and the two chevrons that flank it. */
.daterangepicker .calendar-table th.month {
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    padding-bottom: 8px;
}

.daterangepicker .calendar-table th.prev,
.daterangepicker .calendar-table th.next {
    /* width: 26px; */
    /* padding: 0 0 8px; */

        align-items: center;
    width: 26px;
    /* padding: 6px 6px 4px; */
    display: flex;
    height: 26px;
    justify-content: center;
    margin-bottom: 8px;
    border-radius: 3px;
}

.daterangepicker .calendar-table th.prev.available span,
.daterangepicker .calendar-table th.next.available span {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-style: solid;
    border-width: 0 2px 2px 0;
    border-radius: 1px;
}

.daterangepicker .calendar-table th.prev span {
    transform: rotate(135deg);
}

.daterangepicker .calendar-table th.next span {
    transform: rotate(-45deg);
}

/* Su Mo Tu ... */
.daterangepicker .calendar-table thead tr:last-child th {
    font-size: 11px;
    font-weight: 600;
    padding-bottom: 2px;
}

.daterangepicker .calendar-table td {
    width: 32px;
    height: 30px;
    font-size: 12.5px;
    text-align: center;
    vertical-align: middle;
    border-radius: 8px;
    cursor: pointer;
}

/* A run of days between the two ends: square in the middle so the run reads
   as one band, rounded only where it starts and stops. */
.daterangepicker td.in-range {
    border-radius: 0;
}

.daterangepicker td.active.start-date {
    border-radius: 8px 0 0 8px;
}

.daterangepicker td.active.end-date {
    border-radius: 0 8px 8px 0;
}

.daterangepicker td.active.start-date.end-date {
    border-radius: 8px;
}

.daterangepicker td.disabled,
.daterangepicker option.disabled {
    cursor: not-allowed;
    text-decoration: none;
    opacity: .4;
}

/* ------------------------------------------------------------------- times */

.daterangepicker .calendar-time {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin: 10px 0 2px;
    text-align: left;
}

.daterangepicker .calendar-time select {
    height: 28px;
    padding: 0 6px;
    font-size: 12px;
    border-radius: 8px;
    outline: none;
}

.daterangepicker .calendar-time .separator {
    opacity: .5;
}

/* ----------------------------------------------------------------- footer */

.daterangepicker .drp-buttons {
    clear: both;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    text-align: left;
}

/* The range as it stands, before Apply commits it. */
.daterangepicker .drp-selected {
    flex: 1 1 auto;
    display: inline-block;
    padding: 0;
    font-size: 12px;
    color: var(--gray-600);
    white-space: nowrap;
}

.daterangepicker .drp-buttons .btn {
    height: 28px;
    min-height: 28px;
    margin: 0;
    padding: 0 12px;
    font-size: 12px;
    font-weight: 500;
    line-height: 1;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.daterangepicker .drp-buttons .cancelBtn {
    background: var(--light);
    border: 1px solid var(--border-color);
    color: var(--gray-600);
}

.daterangepicker .drp-buttons .applyBtn {
    background: var(--primary);
    border: 1px solid var(--primary);
    color: #fff;
}

/* ------------------------------------------------------------------ narrow */

/* Below roughly a phone's width two 268px months cannot sit side by side. */
@media (max-width: 620px) {
    .daterangepicker .drp-calendar {
        float: none;
        width: auto;
    }

    .daterangepicker .drp-calendar.right {
        border-left: 0;
        border-top: 1px solid var(--border-color);
    }
}