/* ═══════════════════════════════════════════════════════════════════════════
   THE DATE PICKER — the ERP skin over flatpickr. (erp-admin.css §16 points here.)

   Every date input application-wide opens this one calendar (vendored
   flatpickr.min.js beside this file, initialised by dashboard/js/
   erp-datepicker.js — all three included from the master layout). The native
   browser popup cannot be styled, so every desk used to show a different,
   plain calendar; this dresses ONE calendar in the .ui- design system and
   retires the mismatch.

   ⚠️ This file loads on EVERY page, including ones that never include
   erp-admin.css — so every var() carries the token's literal value as its
   fallback. Keep the fallbacks in step with erp-admin.css §1 if the palette
   ever moves. Overrides only: the library's layout CSS stays untouched
   underneath.
   ═══════════════════════════════════════════════════════════════════════════ */
.flatpickr-calendar {
    border: 1px solid var(--ui-line, #e2e6ee);
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(25, 28, 34, .16), 0 2px 8px rgba(25, 28, 34, .08);
    font-family: inherit;
    padding: 4px 4px 8px;
    width: 322px;
}
.flatpickr-calendar.arrowTop::before    { border-bottom-color: var(--ui-line, #e2e6ee); }
.flatpickr-calendar.arrowTop::after     { border-bottom-color: #fff; }
.flatpickr-calendar.arrowBottom::before { border-top-color: var(--ui-line, #e2e6ee); }
.flatpickr-calendar.arrowBottom::after  { border-top-color: #fff; }

/* Month header: quiet band, maroon accents, no default blue anywhere. */
.flatpickr-months { padding: 6px 4px 2px; }
.flatpickr-months .flatpickr-month { color: var(--ui-ink, #2b2521); height: 34px; }
.flatpickr-current-month { font-size: 13.5px; font-weight: 700; padding-top: 4px; }
.flatpickr-current-month .cur-month { font-weight: 700; }
.flatpickr-current-month .numInputWrapper { width: 62px; }
.flatpickr-current-month input.cur-year { font-weight: 700; }
.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month {
    top: 8px; height: 28px; width: 28px; padding: 5px;
    border-radius: 8px; color: var(--ui-ink-5, #8a93a6); fill: var(--ui-ink-5, #8a93a6);
    transition: all .12s ease;
}
.flatpickr-months .flatpickr-prev-month:hover,
.flatpickr-months .flatpickr-next-month:hover {
    background: var(--ui-wash, #fbfcfd); color: var(--ui-maroon, #a6303a);
}
.flatpickr-months .flatpickr-prev-month:hover svg,
.flatpickr-months .flatpickr-next-month:hover svg { fill: var(--ui-maroon, #a6303a); }

/* Weekday initials: the uppercase micro-label style every .ui- table uses. */
span.flatpickr-weekday {
    font-size: 9.5px; font-weight: 800; letter-spacing: .08em;
    text-transform: uppercase; color: var(--ui-ink-6, #a2aab8);
}

/* Days. Selection is maroon; today is a DOT beneath the numeral — the mark
   the leave month-strip already taught people — never a second ring
   competing with the selection. */
.flatpickr-day {
    border-radius: 9px; font-size: 12.5px; font-weight: 600;
    color: var(--ui-ink-2, #3b4252); border: 1px solid transparent;
    line-height: 37px;
}
.flatpickr-day:hover, .flatpickr-day:focus {
    background: var(--ui-wash, #fbfcfd); border-color: var(--ui-line, #e2e6ee);
}
.flatpickr-day.today { position: relative; border-color: transparent; }
.flatpickr-day.today::after {
    content: ''; position: absolute; left: 50%; bottom: 4px;
    width: 4px; height: 4px; margin-left: -2px; border-radius: 50%;
    background: var(--ui-maroon, #a6303a);
}
.flatpickr-day.today:hover { background: var(--ui-wash, #fbfcfd); color: var(--ui-ink-2, #3b4252); }
.flatpickr-day.selected, .flatpickr-day.selected:hover,
.flatpickr-day.startRange, .flatpickr-day.endRange {
    background: var(--ui-maroon, #a6303a); border-color: var(--ui-maroon, #a6303a);
    color: #fff; font-weight: 700;
    box-shadow: 0 3px 10px rgba(166, 48, 58, .3);
}
.flatpickr-day.selected.today::after { background: #fff; }
.flatpickr-day.flatpickr-disabled, .flatpickr-day.flatpickr-disabled:hover {
    color: var(--ui-line-2, #e7e9ef); background: transparent; border-color: transparent;
}
.flatpickr-day.prevMonthDay, .flatpickr-day.nextMonthDay { color: var(--ui-ink-7, #98a1b3); font-weight: 500; }

/* The input while its calendar is open — the same focus language as every
   other .ui- field, so the pair reads as one control. */
input.flatpickr-input.active {
    border-color: var(--ui-maroon, #a6303a) !important;
    box-shadow: 0 0 0 3px rgba(166, 48, 58, .1) !important;
}

/* ── What each day contains ────────────────────────────────────────────────
   The same colour language as the leave module's calendar and month strip —
   amber holiday, purple academic break, blue for the person's own leave,
   faded weekend — as a soft tint plus a dot, so a day stays legible and the
   maroon selection always wins. Hovering names the holiday, break or
   application via the title the initialiser sets. */
.flatpickr-day.fp-mk { position: relative; font-weight: 700; }
.flatpickr-day.fp-mk::before {
    content: ''; position: absolute; left: 50%; bottom: 4px;
    width: 4px; height: 4px; margin-left: -2px; border-radius: 50%;
}
.flatpickr-day.fp-mk-holiday { background: #fdf3dd; color: #8a6116; }
.flatpickr-day.fp-mk-holiday::before { background: #d09a2a; }
.flatpickr-day.fp-mk-holiday:hover { background: #fae9c4; border-color: #eeddb5; }
.flatpickr-day.fp-mk-break { background: #f3ecfa; color: #5f3f8a; }
.flatpickr-day.fp-mk-break::before { background: #8659c2; }
.flatpickr-day.fp-mk-break:hover { background: #ebdff7; border-color: #dcc9ef; }
/* Each leave day wears ITS TYPE's colour (--mk, set per day from the mark) —
   tint, ink and dot all derived from the one variable, so Sick and Annual
   are told apart at a glance. Blue stands in when no colour arrives. */
.flatpickr-day.fp-mk-leave {
    background: color-mix(in srgb, var(--mk, #3f7fc4) 13%, #fff);
    color: color-mix(in srgb, var(--mk, #3f7fc4) 72%, #000);
}
.flatpickr-day.fp-mk-leave::before { background: var(--mk, #3f7fc4); }
.flatpickr-day.fp-mk-leave:hover {
    background: color-mix(in srgb, var(--mk, #3f7fc4) 22%, #fff);
    border-color: color-mix(in srgb, var(--mk, #3f7fc4) 35%, #fff);
}
.flatpickr-day.fp-wknd { color: var(--ui-ink-7, #98a1b3); font-weight: 500; }

/* Selection beats every mark — BACKGROUND INCLUDED. The mark tints carry the
   same two-class specificity as the library's .selected rules and load later,
   so without these three-class rules a marked day chosen as an endpoint kept
   its pale tint under white text — an unreadable ghost square. The dot flips
   white so the information survives inside the maroon. Weekend fading must
   also yield, or a Saturday endpoint renders grey-on-maroon. */
.flatpickr-day.fp-mk.selected, .flatpickr-day.fp-mk.startRange, .flatpickr-day.fp-mk.endRange,
.flatpickr-day.fp-wknd.selected, .flatpickr-day.fp-wknd.startRange, .flatpickr-day.fp-wknd.endRange {
    background: var(--ui-maroon, #a6303a);
    border-color: var(--ui-maroon, #a6303a);
    color: #fff; font-weight: 700;
}
.flatpickr-day.fp-mk.selected::before, .flatpickr-day.fp-mk.startRange::before,
.flatpickr-day.fp-mk.endRange::before { background: #fff; }

/* ── The range band (flight-booking selection) ─────────────────────────────
   Endpoints are the full maroon square; the days between glow as one
   continuous wash, squared where they meet so the band reads as a single
   stroke across the week. */
.flatpickr-day.inRange, .flatpickr-day.inRange:hover {
    background: #f7e7e9; border-color: #f7e7e9;
    color: var(--ui-maroon-deep, #6d1f27);
    border-radius: 0;
    box-shadow: -5px 0 0 #f7e7e9, 5px 0 0 #f7e7e9;
}
.flatpickr-day.inRange.fp-mk::before { background: var(--ui-maroon, #a6303a); }
.flatpickr-day.inRange.fp-mk { color: var(--ui-maroon-deep, #6d1f27); }
.flatpickr-day.startRange { border-radius: 9px 0 0 9px; }
.flatpickr-day.endRange   { border-radius: 0 9px 9px 0; }
.flatpickr-day.startRange.endRange { border-radius: 9px; }
.flatpickr-day.selected.startRange + .endRange:not(:nth-child(7n+1)),
.flatpickr-day.startRange.startRange + .endRange:not(:nth-child(7n+1)),
.flatpickr-day.endRange.startRange + .endRange:not(:nth-child(7n+1)) {
    box-shadow: -10px 0 0 var(--ui-maroon, #a6303a);
}

/* ── The legend ────────────────────────────────────────────────────────────
   Drawn inside the calendar (initialiser appends it when the page supplies
   marks), so the colours arrive with their meanings. */
.fp-erp-legend {
    display: flex; flex-wrap: wrap; gap: 4px 12px;
    padding: 8px 12px 4px; margin-top: 4px;
    border-top: 1px solid var(--ui-line-2, #e7e9ef);
}
.fp-erp-legend-i { display: inline-flex; align-items: center; gap: 5px; }
.fp-erp-legend-i i { width: 8px; height: 8px; border-radius: 50%; }
.fp-erp-legend-i em {
    font-style: normal; font-size: 9.5px; font-weight: 700;
    letter-spacing: .04em; text-transform: uppercase;
    color: var(--ui-ink-5, #8a93a6);
}
.fp-erp-legend-i.is-leave i   { background: #3f7fc4; }
.fp-erp-legend-i.is-holiday i { background: #d09a2a; }
.fp-erp-legend-i.is-break i   { background: #8659c2; }
.fp-erp-legend-i.is-weekend i { background: var(--ui-ink-7, #98a1b3); }

/* ── Phones ────────────────────────────────────────────────────────────────
   Marked and range pickers render flatpickr's own calendar on mobile (the
   native one can show neither colours nor a band), so the fixed-width
   library layout must turn fluid and stay inside the viewport. */
@media (max-width: 420px) {
    .flatpickr-calendar { width: calc(100vw - 18px); }
    .flatpickr-rContainer, .flatpickr-days, .dayContainer {
        width: 100%; max-width: 100%; min-width: 0;
    }
    .flatpickr-day { max-width: none; height: 42px; line-height: 41px; }
}