/* ============================================================
   flatpickr — tema JumpJump (casa com rr-theme / jj-system)
   Usa variáveis --rr-* / --jj-* → adapta dark/light automático.
   ============================================================ */

/* ---- altInput (campo visível) herda visual do .form-control ---- */
.flatpickr-input.form-control[readonly] {
    background: var(--rr-surface);
    cursor: pointer;
}
.flatpickr-input.form-control[readonly]:disabled {
    cursor: not-allowed;
}

/* altInput em campos sem .form-control (ex.: popover de recorrência) */
input.flatpickr-input:not(.form-control) {
    width: 100%;
    padding: 6px 10px;
    background: var(--rr-surface);
    border: 1px solid var(--rr-border);
    border-radius: var(--r-soft, 6px);
    color: var(--rr-text-strong);
    font-size: var(--t-sm, 12px);
    cursor: pointer;
}
input.flatpickr-input:not(.form-control):focus {
    outline: none;
    border-color: var(--rr-primary);
    box-shadow: 0 0 0 3px color-mix(in oklch, var(--rr-primary) 25%, transparent);
}

/* ---- Container do calendário ---- */
.flatpickr-calendar {
    background: var(--jj-paper-raised, var(--rr-surface));
    border: 1px solid var(--rr-border);
    border-radius: var(--r-soft, 6px);
    box-shadow: var(--sh-3);
    color: var(--rr-text);
    font-size: var(--t-sm, 12px);
    width: auto;
}
.flatpickr-calendar.open { z-index: 1095; }

/* seta do popover */
.flatpickr-calendar.arrowTop::before { border-bottom-color: var(--rr-border); }
.flatpickr-calendar.arrowTop::after { border-bottom-color: var(--jj-paper-raised, var(--rr-surface)); }
.flatpickr-calendar.arrowBottom::before { border-top-color: var(--rr-border); }
.flatpickr-calendar.arrowBottom::after { border-top-color: var(--jj-paper-raised, var(--rr-surface)); }

/* ---- Cabeçalho (mês/ano + setas) ---- */
.flatpickr-months { padding-top: 4px; }
.flatpickr-months .flatpickr-month {
    color: var(--rr-text-strong);
    fill: var(--rr-text-strong);
}
.flatpickr-current-month .flatpickr-monthDropdown-months,
.flatpickr-current-month input.cur-year {
    color: var(--rr-text-strong);
    font-weight: var(--fw-semibold, 600);
}
.flatpickr-current-month .flatpickr-monthDropdown-months {
    border-radius: var(--r-soft, 6px);
}
.flatpickr-current-month .flatpickr-monthDropdown-months:hover {
    background: color-mix(in oklch, var(--rr-text) 10%, transparent);
}
.flatpickr-monthDropdown-months .flatpickr-monthDropdown-month {
    background: var(--jj-paper-raised, var(--rr-surface));
    color: var(--rr-text);
}

.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month {
    color: var(--rr-text-muted);
    fill: var(--rr-text-muted);
    border-radius: var(--r-soft, 6px);
    transition: background var(--d-fast, 120ms) var(--ease, ease);
}
.flatpickr-months .flatpickr-prev-month:hover,
.flatpickr-months .flatpickr-next-month:hover {
    background: color-mix(in oklch, var(--rr-text) 10%, transparent);
}
.flatpickr-months .flatpickr-prev-month:hover svg,
.flatpickr-months .flatpickr-next-month:hover svg {
    fill: var(--rr-primary);
}

/* ---- Dias da semana ---- */
.flatpickr-weekdays { background: transparent; }
span.flatpickr-weekday {
    color: var(--rr-text-muted);
    font-weight: var(--fw-semibold, 600);
    font-size: var(--t-xs, 11px);
    text-transform: uppercase;
}

/* ---- Células de dia ---- */
.flatpickr-day {
    color: var(--rr-text);
    border-radius: var(--r-soft, 6px);
    border: 1px solid transparent;
    transition: background var(--d-fast, 120ms) var(--ease, ease),
                color var(--d-fast, 120ms) var(--ease, ease);
}
.flatpickr-day:hover,
.flatpickr-day:focus {
    background: color-mix(in oklch, var(--rr-primary) 14%, transparent);
    border-color: transparent;
    color: var(--rr-text-strong);
}
.flatpickr-day.today {
    border-color: var(--rr-primary);
    color: var(--rr-primary);
    font-weight: var(--fw-semibold, 600);
}
.flatpickr-day.today:hover {
    background: color-mix(in oklch, var(--rr-primary) 14%, transparent);
    color: var(--rr-primary);
}
.flatpickr-day.selected,
.flatpickr-day.selected:hover,
.flatpickr-day.startRange,
.flatpickr-day.endRange {
    background: var(--rr-primary);
    border-color: var(--rr-primary);
    color: #fff;
    font-weight: var(--fw-semibold, 600);
}
.flatpickr-day.inRange {
    background: color-mix(in oklch, var(--rr-primary) 16%, transparent);
    border-color: transparent;
    box-shadow: none;
}
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay {
    color: var(--rr-text-muted);
    opacity: 0.55;
}
.flatpickr-day.flatpickr-disabled,
.flatpickr-day.flatpickr-disabled:hover {
    color: var(--rr-text-muted);
    opacity: 0.35;
    background: transparent;
}

/* ---- Rodapé custom (botão Limpar) ---- */
.flatpickr-jj-footer {
    display: flex;
    justify-content: flex-end;
    padding: 6px 8px;
    border-top: 1px solid var(--rr-border);
}
.flatpickr-jj-clear {
    background: transparent;
    border: none;
    color: var(--rr-primary);
    font-size: var(--t-sm, 12px);
    font-weight: var(--fw-semibold, 600);
    padding: 4px 10px;
    border-radius: var(--r-soft, 6px);
    cursor: pointer;
    transition: background var(--d-fast, 120ms) var(--ease, ease);
}
.flatpickr-jj-clear:hover {
    background: color-mix(in oklch, var(--rr-primary) 14%, transparent);
}

/* ---- Seletor de hora ---- */
.flatpickr-time { border-top: 1px solid var(--rr-border); }
.flatpickr-time .numInputWrapper,
.flatpickr-time .flatpickr-time-separator,
.flatpickr-time .flatpickr-am-pm { color: var(--rr-text-strong); }
.flatpickr-time input { color: var(--rr-text-strong); }
.flatpickr-time input:hover,
.flatpickr-time input:focus,
.flatpickr-time .flatpickr-am-pm:hover,
.flatpickr-time .flatpickr-am-pm:focus {
    background: color-mix(in oklch, var(--rr-text) 8%, transparent);
}
.flatpickr-time .numInputWrapper span.arrowUp::after { border-bottom-color: var(--rr-text-muted); }
.flatpickr-time .numInputWrapper span.arrowDown::after { border-top-color: var(--rr-text-muted); }