/* ERP Datepicker — tema do Flatpickr sobre as variáveis do app (claro/escuro via .dark-mode). */

/* Input original fica no DOM (valor ISO), só não aparece */
input.erp-dp-origem { display: none !important; }

/* Campo visível: ícone de calendário à direita */
.erp-dp-input {
    padding-right: 2.5rem !important;
    background-repeat: no-repeat !important;
    background-position: right .85rem center !important;
    background-size: 16px 16px !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%2394a3b8' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5M1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4z'/%3E%3C/svg%3E") !important;
    cursor: pointer;
}
.erp-dp-input:focus { cursor: text; }

/* Painel */
.flatpickr-calendar {
    z-index: 3000 !important;
    width: 304px;
    padding: 6px 8px 8px;
    font-family: var(--font-sans);
    font-size: var(--fs-grid, .875rem);
    color: var(--text-primary);
    background: var(--bg-surface, #fff);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    box-shadow: var(--shadow-lg, 0 12px 32px rgba(0, 0, 0, .25));
}
.flatpickr-calendar::before, .flatpickr-calendar::after { display: none; }
.flatpickr-calendar.hasTime .flatpickr-time { border-top: 1px solid var(--border-color); }

/* Cabeçalho: mês/ano */
.flatpickr-months { padding: 4px 0 6px; }
.flatpickr-months .flatpickr-month { color: var(--text-primary); fill: var(--text-primary); height: 38px; }
.flatpickr-current-month { font-size: 1rem; font-weight: 600; padding-top: 6px; }
.flatpickr-current-month .flatpickr-monthDropdown-months,
.flatpickr-current-month input.cur-year {
    font-weight: 600; color: var(--text-primary); background: transparent;
    border-radius: 8px;
}
.flatpickr-current-month .flatpickr-monthDropdown-months:hover,
.flatpickr-current-month input.cur-year:hover { background: var(--bg-surface-hover); }
.flatpickr-monthDropdown-months .flatpickr-monthDropdown-month { background: var(--bg-surface); color: var(--text-primary); }
.flatpickr-months .flatpickr-prev-month, .flatpickr-months .flatpickr-next-month {
    top: 6px; height: 32px; width: 32px; padding: 0; display: flex; align-items: center; justify-content: center;
    border-radius: 8px; color: var(--text-secondary); fill: var(--text-secondary);
}
.flatpickr-months .flatpickr-prev-month { left: 4px; }
.flatpickr-months .flatpickr-next-month { right: 4px; }
.flatpickr-months .flatpickr-prev-month:hover, .flatpickr-months .flatpickr-next-month:hover { background: var(--bg-surface-hover); }
.flatpickr-months .flatpickr-prev-month svg, .flatpickr-months .flatpickr-next-month svg { width: 12px; height: 12px; fill: currentColor; }
.flatpickr-months .flatpickr-prev-month:hover svg, .flatpickr-months .flatpickr-next-month:hover svg { fill: var(--primary-color); }

/* Dias da semana */
span.flatpickr-weekday {
    font-size: .75rem; font-weight: 600; letter-spacing: .02em; color: var(--text-tertiary); background: transparent;
}
.flatpickr-weekdays { height: 28px; }

/* Dias — células coladas (14,28% cada), para a faixa de período ficar contínua */
.dayContainer { width: 288px; min-width: 288px; max-width: 288px; padding: 0; }
.flatpickr-days { width: 288px; }
.flatpickr-day {
    width: 14.2857%; flex-basis: 14.2857%; max-width: none; height: 36px; line-height: 34px; margin: 1px 0;
    font-size: var(--fs-grid, .875rem); font-weight: 500; color: var(--text-primary);
    border: 1px solid transparent; border-radius: 10px;
}
.flatpickr-day:hover, .flatpickr-day:focus { background: var(--bg-surface-hover); border-color: transparent; }
.flatpickr-day.prevMonthDay, .flatpickr-day.nextMonthDay { color: var(--text-tertiary); opacity: .55; }
.flatpickr-day.today { border-color: var(--primary-color); color: var(--primary-color); font-weight: 700; }
.flatpickr-day.today:hover { background: color-mix(in srgb, var(--primary-color) 14%, transparent); border-color: var(--primary-color); }
.flatpickr-day.selected, .flatpickr-day.selected:hover, .flatpickr-day.startRange, .flatpickr-day.endRange,
.flatpickr-day.startRange:hover, .flatpickr-day.endRange:hover {
    background: var(--primary-color); border-color: var(--primary-color); color: #fff; font-weight: 700;
}
/* Período: faixa contínua, extremos arredondados */
.flatpickr-day.inRange, .flatpickr-day.inRange:hover {
    background: color-mix(in srgb, var(--primary-color) 16%, transparent); border-color: transparent;
    border-radius: 0; box-shadow: none; color: var(--text-primary);
}
.flatpickr-day.startRange { border-radius: 10px 0 0 10px; }
.flatpickr-day.endRange { border-radius: 0 10px 10px 0; }
.flatpickr-day.startRange.endRange { border-radius: 10px; }
.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: none; }
.flatpickr-day.flatpickr-disabled, .flatpickr-day.flatpickr-disabled:hover { color: var(--text-tertiary); opacity: .35; background: transparent; cursor: not-allowed; }

/* Hora */
.flatpickr-time input, .flatpickr-time .flatpickr-am-pm { color: var(--text-primary); font-weight: 600; font-size: 1rem; }
.flatpickr-time input:hover, .flatpickr-time input:focus, .flatpickr-time .flatpickr-am-pm:hover { background: var(--bg-surface-hover); }
.flatpickr-time .flatpickr-time-separator { color: var(--text-tertiary); }
.numInputWrapper span.arrowUp::after { border-bottom-color: var(--text-tertiary); }
.numInputWrapper span.arrowDown::after { border-top-color: var(--text-tertiary); }

/* Rodapé: Limpar / Hoje (data) ou atalhos de período + Limpar (intervalo) */
.erp-dp-footer {
    display: flex; justify-content: space-between; align-items: center; gap: .5rem;
    margin-top: 6px; padding-top: 8px; border-top: 1px solid var(--border-color);
}
.erp-dp-footer button {
    border: 0; background: transparent; padding: .35rem .7rem; border-radius: 8px;
    font: inherit; font-size: var(--fs-label, .8125rem); font-weight: 600; cursor: pointer; transition: background .15s, color .15s;
}
.erp-dp-limpar { color: var(--text-tertiary); }
.erp-dp-limpar:hover { background: var(--bg-surface-hover); color: var(--danger-color); }
.erp-dp-hoje { color: var(--primary-color); }
.erp-dp-hoje:hover { background: color-mix(in srgb, var(--primary-color) 12%, transparent); }
.erp-dp-footer--periodo { flex-direction: column; align-items: stretch; }
.erp-dp-atalhos { display: flex; flex-wrap: wrap; gap: 6px; }
.erp-dp-footer .erp-dp-atalho {
    padding: .3rem .65rem; font-size: .78rem;
    color: var(--text-secondary); background: var(--bg-surface-secondary); border: 1px solid var(--border-color);
}
.erp-dp-footer .erp-dp-atalho:hover {
    color: var(--primary-color); border-color: var(--primary-color);
    background: color-mix(in srgb, var(--primary-color) 10%, transparent);
}
.erp-dp-footer--periodo .erp-dp-limpar { align-self: flex-end; }

/* Escuro: o CSS base do CDN fixa cores claras em alguns elementos */
html.dark-mode .flatpickr-calendar { background: var(--bg-surface); }
html.dark-mode .flatpickr-months .flatpickr-month,
html.dark-mode .flatpickr-current-month .flatpickr-monthDropdown-months { color: var(--text-primary); fill: var(--text-primary); }
html.dark-mode span.flatpickr-weekday { color: var(--text-tertiary); }

@media (max-width: 575.98px) {
    .flatpickr-calendar { max-width: calc(100vw - 24px); }
}