/* ── Date range picker theme ──────────────────────────────────────────────────
   Restyles BlazorDateRangePicker to match the rest of the CRM: theme variables
   (so it finally follows dark mode instead of staying hardcoded white), the
   app's radii/shadows, and the same pop-in used by the other dropdowns.

   Two things drive how this file is written:

   1. Load order. The library ships its CSS through Blazor CSS isolation, which
      lands in PhotoBox.CRM.styles.css. index.html loads that *before* this file,
      so equal-specificity rules here win on source order.
   2. The doubled `.daterangepicker.daterangepicker` prefix. The isolated rules
      carry an extra `[b-x77lgbiy4z]` attribute selector, which adds a point of
      specificity that a plain `.daterangepicker ...` prefix cannot match. The
      repeated class buys that point back; from there source order decides.

   Everything must apply while the popup is still hidden: the library measures
   the container with offsetWidth/offsetHeight to position it, and it does that
   one frame *before* flipping it visible. Nothing here may be gated on the
   visible state except the entry animation. */

.daterangepicker.daterangepicker {
    background-color: var(--bg-card, #fff);
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: var(--radius-lg, 14px);
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.13), 0 4px 12px rgba(0, 0, 0, 0.06);
    padding: 4px;
    color: var(--text-primary, #1f2937);
    font-family: inherit;
    font-size: 0.8rem;
    line-height: 1.35;
}

[data-theme="dark"] .daterangepicker.daterangepicker {
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5), 0 4px 12px rgba(0, 0, 0, 0.32);
}

/* Drop the stock speech-bubble caret — the popup reads as a floating card. */
.daterangepicker.daterangepicker:before,
.daterangepicker.daterangepicker:after,
.daterangepicker.daterangepicker.drop-up:before,
.daterangepicker.daterangepicker.drop-up:after {
    content: none;
}

/* ── Entry animation ───────────────────────────────────────────────────────
   Matches the .dropdown-menu pop-in in app.css. The wrapper swaps between the
   -hidden and -visible classes without remounting, so the animation restarts
   every time the picker opens. */
@keyframes drp-pop-in {
    0%   { opacity: 0; transform: translateY(-8px) scale(0.96); }
    60%  { opacity: 1; transform: translateY(2px) scale(1.005); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}

.daterangepicker-visibility-visible .daterangepicker.daterangepicker {
    animation: drp-pop-in 0.24s cubic-bezier(0.34, 1.56, 0.64, 1);
    transform-origin: top center;
}

.daterangepicker-visibility-visible .daterangepicker.daterangepicker.drop-up {
    transform-origin: bottom center;
}

@media (prefers-reduced-motion: reduce) {
    .daterangepicker-visibility-visible .daterangepicker.daterangepicker {
        animation: none;
    }
}

/* ── Anchored mode (.drp-anchor wrapper) ───────────────────────────────────
   The library positions the popup from JS: `position: fixed` plus coordinates
   measured off the input. Inside a modal that measurement misfires — the popup
   is measured a frame before it settles, comes out wider than it ends up, trips
   the `containerLeft + containerWidth > window.innerWidth` branch, and gets
   pinned to `right: 0` of the *viewport*, i.e. halfway across the screen from
   the field it belongs to.

   Wrapping the picker in .drp-anchor takes positioning back: the popup becomes
   absolute inside a relative wrapper, so it hangs off the field itself and the
   JS can no longer move it. The inline styles it keeps writing (position, top,
   left, right) are exactly what the !important declarations below overrule. */
.drp-anchor {
    position: relative;
}

.drp-anchor .daterangepicker.daterangepicker {
    position: absolute !important;
    top: calc(100% + 6px) !important;
    /* Right-aligned: the two-month popup is wider than the column it sits in, so
       it has to grow towards the middle of the dialog rather than past its edge. */
    right: 0 !important;
    left: auto !important;
    bottom: auto !important;
    margin-top: 0;
    z-index: 1085;
    /* An absolute box shrink-to-fits to its containing block, which here is one
       form column — narrow enough to wrap the two months onto separate rows.
       max-content asks for the width they need side by side. */
    width: max-content;
    max-width: none;
}

/* Below 992px Bootstrap caps .modal-lg at 500px instead of 800px, which is
   narrower than two months side by side — the popup would hang off the dialog
   and, on the smallest screens, off the viewport. Stack the months there and
   let the popup take the width of the field instead. */
@media (max-width: 991.98px) {
    .drp-anchor .daterangepicker.daterangepicker {
        left: 0 !important;
        right: 0 !important;
        width: auto;
    }

    .drp-anchor .daterangepicker.daterangepicker .drp-calendar {
        float: none !important;
        clear: both !important;
        max-width: none;
        width: auto;
    }

    .drp-anchor .daterangepicker.daterangepicker .drp-calendar.right {
        border-left: none;
        border-top: 1px solid var(--border-color, #e5e7eb);
    }
}

/* ── Calendar panes ────────────────────────────────────────────────────────
   A hairline separates the two months instead of the stock double border. */
.daterangepicker.daterangepicker .drp-calendar {
    max-width: 286px;
}

.daterangepicker.daterangepicker .drp-calendar.left,
.daterangepicker.daterangepicker .drp-calendar.right {
    padding: 10px 12px;
}

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

.daterangepicker.daterangepicker .calendar-table {
    border: none;
    background: transparent;
    padding: 0;
}

/* Separate borders so each day can carry its own radius, but *zero* horizontal
   spacing — the in-range band has to read as one continuous strip. The 2px of
   vertical spacing is what keeps the weeks from touching. */
.daterangepicker.daterangepicker .calendar-table table {
    border-collapse: separate;
    border-spacing: 0 2px;
}

/* Below the library's own breakpoint the two months stack, so the divider has
   to move with them. */
@media (max-width: 563.98px) {
    .daterangepicker.daterangepicker .drp-calendar.right {
        border-left: none;
        border-top: 1px solid var(--border-color, #e5e7eb);
    }
}

/* ── Header: month / year selects ──────────────────────────────────────────
   Same treatment as the native .form-select restyle in app.css. */
.daterangepicker.daterangepicker .calendar-table th.month {
    padding-bottom: 8px;
}

.daterangepicker.daterangepicker .calendar-table select.monthselect,
.daterangepicker.daterangepicker .calendar-table select.yearselect {
    appearance: none;
    -webkit-appearance: none;
    height: 30px;
    padding: 0 24px 0 9px;
    border: 1.5px solid var(--border-color, #e5e7eb);
    border-radius: 8px;
    background-color: var(--bg-input, #fff);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 7px center;
    background-size: 11px 11px;
    color: var(--text-primary, #1f2937);
    font-family: inherit;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

[data-theme="dark"] .daterangepicker.daterangepicker .calendar-table select.monthselect,
[data-theme="dark"] .daterangepicker.daterangepicker .calendar-table select.yearselect {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%239ca3af' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}

.daterangepicker.daterangepicker .calendar-table select.monthselect:hover,
.daterangepicker.daterangepicker .calendar-table select.yearselect:hover {
    border-color: var(--border-strong, #d1d5db);
}

.daterangepicker.daterangepicker .calendar-table select.monthselect:focus,
.daterangepicker.daterangepicker .calendar-table select.yearselect:focus {
    border-color: var(--accent, #605bac);
    box-shadow: 0 0 0 3px rgba(96, 91, 172, 0.12);
    outline: none;
}

[data-theme="dark"] .daterangepicker.daterangepicker .calendar-table select.monthselect:focus,
[data-theme="dark"] .daterangepicker.daterangepicker .calendar-table select.yearselect:focus {
    box-shadow: 0 0 0 3px rgba(124, 120, 201, 0.24);
}

.daterangepicker.daterangepicker .calendar-table select.monthselect {
    width: 58%;
    margin-right: 4px;
}

.daterangepicker.daterangepicker .calendar-table select.yearselect {
    width: calc(42% - 4px);
}

/* ── Header: prev / next arrows ────────────────────────────────────────────
   The chevron is the library's rotated-border trick; it just gets recoloured
   and given a round hit target. */
.daterangepicker.daterangepicker .calendar-table th.prev,
.daterangepicker.daterangepicker .calendar-table th.next {
    width: 30px;
    min-width: 30px;
    height: 30px;
    border: none;
    border-radius: 8px;
    color: var(--text-secondary, #6b7280);
    transition: background-color 0.15s ease, color 0.15s ease;
}

.daterangepicker.daterangepicker .calendar-table th.prev.available:hover,
.daterangepicker.daterangepicker .calendar-table th.next.available:hover {
    background-color: var(--bg-hover, #f3f4f6);
    color: var(--text-primary, #1f2937);
}

.daterangepicker.daterangepicker .calendar-table th.prev span,
.daterangepicker.daterangepicker .calendar-table th.next span {
    border-color: currentColor;
    border-width: 0 1.8px 1.8px 0;
    padding: 3px;
    color: inherit;
    vertical-align: middle;
}

/* ── Weekday header row ────────────────────────────────────────────────────
   The last <thead> row holds the day-name cells. */
.daterangepicker.daterangepicker .calendar-table thead tr:last-child th {
    height: 28px;
    color: var(--text-muted, #9ca3af);
    font-size: 0.64rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    cursor: default;
}

/* ── Day cells ─────────────────────────────────────────────────────────────*/
.daterangepicker.daterangepicker .calendar-table td {
    width: 34px;
    min-width: 34px;
    height: 32px;
    line-height: 32px;
    border: none;
    border-radius: 9px;
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--text-primary, #1f2937);
    transition: background-color 0.12s ease, color 0.12s ease;
}

.daterangepicker.daterangepicker .calendar-table td.available:hover {
    background-color: var(--bg-hover, #f3f4f6);
    color: var(--text-primary, #1f2937);
}

/* Days spilling in from the neighbouring months. */
.daterangepicker.daterangepicker .calendar-table td.off,
.daterangepicker.daterangepicker .calendar-table td.off.in-range,
.daterangepicker.daterangepicker .calendar-table td.off.start-date,
.daterangepicker.daterangepicker .calendar-table td.off.end-date {
    background-color: transparent;
    color: var(--text-muted, #9ca3af);
    opacity: 0.55;
}

.daterangepicker.daterangepicker .calendar-table td.disabled,
.daterangepicker.daterangepicker .calendar-table td.disabled:hover {
    background-color: transparent;
    color: var(--text-muted, #9ca3af);
    opacity: 0.4;
    text-decoration: none;
    cursor: not-allowed;
}

/* Today: a ring rather than a fill, so it stays legible under a selection. */
.daterangepicker.daterangepicker .calendar-table td.today:not(.active) {
    box-shadow: inset 0 0 0 1.5px var(--accent, #605bac);
    color: var(--accent, #605bac);
    font-weight: 700;
}

/* The band between the two endpoints, including the hover preview the library
   paints while you are picking the end date. */
.daterangepicker.daterangepicker .calendar-table td.in-range:not(.active) {
    background-color: rgba(96, 91, 172, 0.11);
    color: var(--text-primary, #1f2937);
    border-radius: 0;
}

[data-theme="dark"] .daterangepicker.daterangepicker .calendar-table td.in-range:not(.active) {
    background-color: rgba(124, 120, 201, 0.22);
}

.daterangepicker.daterangepicker .calendar-table td.in-range.start-date:not(.active) {
    border-radius: 9px 0 0 9px;
}

.daterangepicker.daterangepicker .calendar-table td.in-range.end-date:not(.active) {
    border-radius: 0 9px 9px 0;
}

/* The two selected endpoints. */
.daterangepicker.daterangepicker .calendar-table td.active,
.daterangepicker.daterangepicker .calendar-table td.active:hover {
    background-color: var(--accent, #605bac);
    color: #fff;
    font-weight: 600;
    box-shadow: none;
    border-radius: 9px;
}

.daterangepicker.daterangepicker .calendar-table td.active.start-date:not(.end-date) {
    border-radius: 9px 0 0 9px;
}

.daterangepicker.daterangepicker .calendar-table td.active.end-date:not(.start-date) {
    border-radius: 0 9px 9px 0;
}

/* Week numbers (off by default, but styled so enabling them isn't a surprise). */
.daterangepicker.daterangepicker .calendar-table td.week,
.daterangepicker.daterangepicker .calendar-table th.week {
    color: var(--text-muted, #9ca3af);
    font-size: 0.66rem;
    font-weight: 600;
    cursor: default;
}

/* ── Predefined ranges rail ────────────────────────────────────────────────
   Padding goes on the <ul>, not the wrapper: with no Ranges configured the
   wrapper still renders as an empty floated div, and padding there would open a
   gap to the left of the first calendar. */
.daterangepicker.daterangepicker .ranges ul {
    padding: 6px;
}

.daterangepicker.daterangepicker .ranges li {
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--text-secondary, #6b7280);
    transition: background-color 0.15s ease, color 0.15s ease;
}

.daterangepicker.daterangepicker .ranges li:hover {
    background-color: var(--bg-hover, #f3f4f6);
    color: var(--text-primary, #1f2937);
}

.daterangepicker.daterangepicker .ranges li.active {
    background-color: var(--accent, #605bac);
    color: #fff;
}

/* ── Footer (hidden while AutoApply is on, styled for the cases that aren't) */
.daterangepicker.daterangepicker .drp-buttons {
    border-top: 1px solid var(--border-color, #e5e7eb);
    padding: 10px 12px;
    line-height: normal;
}

.daterangepicker.daterangepicker .drp-selected {
    font-size: 0.76rem;
    color: var(--text-secondary, #6b7280);
    padding-right: 10px;
}

.daterangepicker.daterangepicker .drp-buttons .btn {
    border-radius: 8px;
    font-size: 0.76rem;
    font-weight: 600;
    padding: 6px 14px;
}

/* ── Compact phones ────────────────────────────────────────────────────────*/
@media (max-width: 400px) {
    .daterangepicker.daterangepicker .calendar-table td {
        width: 32px;
        min-width: 32px;
        height: 30px;
        line-height: 30px;
    }

    .daterangepicker.daterangepicker .drp-calendar.left,
    .daterangepicker.daterangepicker .drp-calendar.right {
        padding: 8px;
    }
}