/**
 * EdgeMetrics — Flatpickr dark-theme overrides (3.5.203)
 *
 * Targets Flatpickr's class structure with the EdgeMetrics palette so any
 * Flatpickr instance loaded on the site (Fluent Forms Pro uploads form,
 * future plugin pages, etc.) matches the dark UI. Also enlarges day cells
 * so they're easier to tap.
 *
 * Loaded globally — affects every Flatpickr popup on the site.
 */

.flatpickr-calendar {
    background: #1A1F26 !important;
    border: 1px solid #2A2F36 !important;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.55) !important;
    color: #FFFFFF !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    /* Bigger overall popup */
    width: 340px !important;
}
.flatpickr-calendar::before,
.flatpickr-calendar::after {
    border-bottom-color: #1A1F26 !important;
    border-top-color: #1A1F26 !important;
}

/* Month + year header */
.flatpickr-months,
.flatpickr-month,
.flatpickr-current-month {
    background: transparent !important;
    color: #FFFFFF !important;
}
.flatpickr-current-month .flatpickr-monthDropdown-months,
.flatpickr-current-month input.cur-year {
    background: #0B0F14 !important;
    color: #FFFFFF !important;
    border-color: #2A2F36 !important;
    border-radius: 4px !important;
    padding: 2px 4px !important;
}
/* 3.5.542: host themes collapse/hide the year number-input, leaving a black
   line artifact next to the month name. Belt-and-suspenders: pin layout on
   the whole month header, the wrapper, AND the input itself, overriding
   display/visibility/opacity/appearance a theme might have zeroed out. */
.flatpickr-calendar .flatpickr-current-month {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    height: 34px !important;
    padding: 0 !important;
}
.flatpickr-calendar .flatpickr-current-month .numInputWrapper {
    display: inline-flex !important;
    align-items: center !important;
    width: 4.5em !important;
    height: 28px !important;
    min-height: 28px !important;
    visibility: visible !important;
    opacity: 1 !important;
}
.flatpickr-calendar .flatpickr-current-month input.cur-year,
.flatpickr-calendar .flatpickr-current-month .numInputWrapper input[type="number"] {
    display: inline-block !important;
    width: 100% !important;
    height: 28px !important;
    min-height: 28px !important;
    max-height: none !important;
    line-height: 28px !important;
    padding: 0 4px !important;
    margin: 0 !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    color: #FFFFFF !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    visibility: visible !important;
    opacity: 1 !important;
    appearance: textfield !important;
    -webkit-appearance: textfield !important;
    -moz-appearance: textfield !important;
}
.flatpickr-current-month .flatpickr-monthDropdown-months .flatpickr-monthDropdown-month {
    background: #1A1F26 !important;
    color: #FFFFFF !important;
}

/* Prev/Next arrows */
.flatpickr-prev-month,
.flatpickr-next-month {
    color: #AAB4BE !important;
    fill: #AAB4BE !important;
    padding: 8px !important;
}
.flatpickr-prev-month:hover svg,
.flatpickr-next-month:hover svg {
    fill: #367EE4 !important;
}
.flatpickr-prev-month svg,
.flatpickr-next-month svg {
    fill: #AAB4BE !important;
}

/* Number input arrows */
.numInputWrapper:hover {
    background: rgba(255, 255, 255, 0.05) !important;
}
.numInputWrapper span {
    border-color: #2A2F36 !important;
}
.numInputWrapper span.arrowUp:after { border-bottom-color: #AAB4BE !important; }
.numInputWrapper span.arrowDown:after { border-top-color: #AAB4BE !important; }
.numInputWrapper span.arrowUp:hover:after { border-bottom-color: #367EE4 !important; }
.numInputWrapper span.arrowDown:hover:after { border-top-color: #367EE4 !important; }

/* Weekday header row */
.flatpickr-weekdays,
span.flatpickr-weekday {
    background: transparent !important;
    color: #AAB4BE !important;
    font-weight: 600 !important;
}

/* Days grid + individual day cells (the big-tap target win).
   3.5.448: stretch the day grid to match the calendar's 340px width so
   day cells line up under their weekday header. Previously the row of
   7 day cells totaled 294px (7 × 42px max-width) inside a 340px popup —
   weekday labels span the full width, the day grid was 46px narrower,
   so columns drifted left of their headers (visible on the upload page
   date-range picker). Each day cell now claims exactly 1/7 of the
   container width, matching the weekday row's natural column width. */
.flatpickr-days,
.dayContainer {
    background: transparent !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
}
.flatpickr-day {
    background: transparent !important;
    border-color: transparent !important;
    color: #FFFFFF !important;
    height: 42px !important;
    line-height: 42px !important;
    flex: 0 0 calc(100% / 7) !important;
    max-width: calc(100% / 7) !important;
    width: calc(100% / 7) !important;
    border-radius: 4px !important;
    font-size: 13px !important;
}
/* Match the weekday header columns to the same 1/7 width so the
   labels above sit exactly over their column. */
.flatpickr-weekdays {
    width: 100% !important;
}
.flatpickr-weekdaycontainer {
    width: 100% !important;
    display: flex !important;
}
span.flatpickr-weekday {
    flex: 0 0 calc(100% / 7) !important;
    max-width: calc(100% / 7) !important;
    width: calc(100% / 7) !important;
    text-align: center !important;
}
.flatpickr-day.today {
    background: rgba(54, 126, 228, 0.18) !important;
    border-color: #367EE4 !important;
    color: #FFFFFF !important;
}
.flatpickr-day.today:hover {
    background: rgba(54, 126, 228, 0.28) !important;
}
.flatpickr-day.selected,
.flatpickr-day.selected:hover,
.flatpickr-day.selected.today {
    background: #1A6FE8 !important;
    border-color: #1A6FE8 !important;
    color: #FFFFFF !important;
}
.flatpickr-day:hover,
.flatpickr-day.prevMonthDay:hover,
.flatpickr-day.nextMonthDay:hover {
    background: #20262E !important;
    border-color: #20262E !important;
    color: #FFFFFF !important;
}
.flatpickr-day.flatpickr-disabled,
.flatpickr-day.flatpickr-disabled:hover {
    color: #4A525A !important;
    background: transparent !important;
    cursor: not-allowed !important;
}
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay {
    color: #6A737D !important;
}

/* Range selection (for future use if we add a range picker) */
.flatpickr-day.inRange,
.flatpickr-day.startRange,
.flatpickr-day.endRange {
    background: rgba(54, 126, 228, 0.25) !important;
    border-color: rgba(54, 126, 228, 0.25) !important;
    color: #FFFFFF !important;
    box-shadow: none !important;
}

/* Container width so days breathe */
.flatpickr-rContainer,
.flatpickr-innerContainer {
    width: 100% !important;
}
.dayContainer {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
}

/* ─────────────────────────────────────────────────────────────
   3.5.258: Picker-with-presets layout (Tradervue-style date
   range picker). Used by the analytics Compare tab, the main
   analytics filter bar, and the trades-page filter. The
   .em-fp-with-presets class is added by JS via flatpickr's
   onReady hook. Loaded site-wide so any page with a flatpickr
   instance using this class gets the layout for free.
   ───────────────────────────────────────────────────────────── */
.em-fp-presets {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 12px 6px;
    background: #1A1F26;
    border-right: 1px solid #2A2F36;
    min-width: 120px;
}
.em-fp-preset {
    background: transparent !important;
    border: none !important;
    color: #AAB4BE !important;
    font-family: inherit !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    text-align: left !important;
    padding: 5px 12px !important;
    border-radius: 0 !important;
    cursor: pointer !important;
    box-shadow: none !important;
}
.em-fp-preset:hover {
    color: #367EE4 !important;
    text-decoration: underline;
    background: transparent !important;
}
.em-fp-preset.is-active {
    color: #FFFFFF !important;
    font-weight: 600 !important;
}
.em-fp-preset.is-active::before {
    content: '•';
    color: #367EE4;
    margin-right: 4px;
}
.em-fp-preset-indicator {
    cursor: default !important;
    color: #6A737D !important;
    border-top: 1px solid #2A2F36 !important;
    margin-top: 4px !important;
    padding-top: 8px !important;
}
.em-fp-preset-indicator:hover {
    color: #6A737D !important;
    text-decoration: none !important;
}
.em-fp-preset-indicator.is-active {
    color: #367EE4 !important;
}
.flatpickr-calendar.em-fp-with-presets {
    display: grid !important;
    grid-template-columns: auto auto;
    width: auto !important;
    /* 3.5.261: hard ceiling so the picker can never extend past the
       viewport edge. flatpickr's auto-positioning can't help when the
       popup itself is wider than the available space — capping it here
       guarantees the picker stays visible regardless of viewport. */
    max-width: calc(100vw - 24px) !important;
    overflow: hidden !important;
}
/* 3.5.261: collapse to a single month when the viewport can't fit both
   side-by-side. Hides the 2nd rContainer + its month heading so the
   picker stays usable on narrow screens. */
@media (max-width: 720px) {
    .flatpickr-calendar.em-fp-with-presets .flatpickr-rContainer:nth-of-type(2),
    .flatpickr-calendar.em-fp-with-presets .flatpickr-month:nth-of-type(2) {
        display: none !important;
    }
}
.flatpickr-calendar.em-fp-with-presets .em-fp-presets {
    grid-column: 1;
    grid-row: 1 / span 2;
}
.flatpickr-calendar.em-fp-with-presets .flatpickr-months {
    grid-column: 2;
    grid-row: 1;
    display: flex;
    align-items: center;
    padding: 6px 4px !important;
    position: relative;
}
.flatpickr-calendar.em-fp-with-presets .flatpickr-innerContainer {
    grid-column: 2;
    grid-row: 2;
    display: flex !important;
}
.flatpickr-calendar.em-fp-with-presets .flatpickr-day {
    max-width: 32px !important;
    height: 30px !important;
    line-height: 30px !important;
    font-size: 12px !important;
}
.flatpickr-calendar.em-fp-with-presets .flatpickr-weekday {
    max-width: 32px !important;
    width: 32px !important;
    font-size: 10px !important;
    line-height: 22px !important;
    height: 22px !important;
}
.flatpickr-calendar.em-fp-with-presets .flatpickr-weekdays {
    height: 22px !important;
}
.flatpickr-calendar.em-fp-with-presets .flatpickr-weekdaycontainer {
    width: 224px !important;
    display: flex;
    justify-content: space-between;
}
.flatpickr-calendar.em-fp-with-presets .dayContainer {
    width: 224px !important;
    min-width: 224px !important;
    max-width: 224px !important;
    border: none !important;
}
.flatpickr-calendar.em-fp-with-presets .flatpickr-rContainer:first-of-type .dayContainer,
.flatpickr-calendar.em-fp-with-presets .flatpickr-rContainer:first-of-type .flatpickr-weekdaycontainer {
    padding-right: 32px !important;
    padding-left:  16px !important;
}
.flatpickr-calendar.em-fp-with-presets .flatpickr-days {
    width: auto !important;
    border: none !important;
}
.flatpickr-calendar.em-fp-with-presets .flatpickr-rContainer {
    width: auto !important;
    border: none !important;
    padding: 0 !important;
}
.flatpickr-calendar.em-fp-with-presets .flatpickr-month {
    border: none !important;
    flex: 1;
}
.flatpickr-calendar.em-fp-with-presets .flatpickr-innerContainer,
.flatpickr-calendar.em-fp-with-presets .flatpickr-innerContainer *,
.flatpickr-calendar.em-fp-with-presets .flatpickr-months,
.flatpickr-calendar.em-fp-with-presets .flatpickr-months * {
    border-left: none !important;
    border-right: none !important;
    box-shadow: none !important;
}
.flatpickr-calendar.em-fp-with-presets > .flatpickr-months > .flatpickr-month:nth-of-type(2),
.flatpickr-calendar.em-fp-with-presets .flatpickr-months .flatpickr-month:nth-of-type(2),
.flatpickr-calendar.em-fp-with-presets .flatpickr-month + .flatpickr-month {
    margin-left: 8px !important;
}
.flatpickr-calendar.em-fp-with-presets .flatpickr-current-month {
    font-size: 16px !important;
    font-weight: 600 !important;
    padding: 4px 0 !important;
    position: static !important;
    width: auto !important;
    left: auto !important;
}
.flatpickr-calendar.em-fp-with-presets .flatpickr-current-month input.cur-year,
.flatpickr-calendar.em-fp-with-presets .flatpickr-current-month .flatpickr-monthDropdown-months {
    font-size: 16px !important;
    font-weight: 600 !important;
}
.flatpickr-calendar.em-fp-with-presets .flatpickr-prev-month,
.flatpickr-calendar.em-fp-with-presets .flatpickr-next-month {
    position: static !important;
    padding: 4px 8px !important;
    height: 24px !important;
    line-height: 1 !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
}
.flatpickr-calendar.em-fp-with-presets .flatpickr-prev-month { order: 0; }
.flatpickr-calendar.em-fp-with-presets .flatpickr-month:nth-of-type(1) { order: 1; text-align: center; }
.flatpickr-calendar.em-fp-with-presets .flatpickr-month:nth-of-type(2) { order: 2; text-align: center; }
.flatpickr-calendar.em-fp-with-presets .flatpickr-next-month { order: 3; }