/* ============================================================
   PROPOSTA — Skin minimalista para o Zebra_DatePicker
   Sistema Easy | Agência Eleve
   v2: corrigiu o calendário não abrir ao clicar (faltava
   position:absolute no container).
   v3: tentou corrigir o layout quebrado (título/rodapé/anos
   espremidos) trocando display por visibility — funcionou, mas
   não é a técnica que o próprio plugin usa.
   v4: peguei o CSS oficial do Zebra_Datepicker pra conferir a
   técnica certa (arquivo zebra_datepicker_ORIGINAL_referencia.css,
   nesta mesma entrega). A base do plugin NUNCA usa display:none
   nem visibility:hidden como padrão — ela nasce com display:block
   (visível/mensurável) e só a classe .dp_hidden (adicionada pelo
   JS DEPOIS de medir o tamanho do calendário) é que aplica
   display:none. Voltei a usar display (mais simples e é o que o
   plugin espera), só que agora do jeito certo: nada de
   display:none na regra base.

   NADA disto está aplicado ao sistema ainda. É um arquivo novo,
   pendente de revisão e inclusão manual por você.

   O QUE ISSO FAZ
   O sistema já carrega o Zebra_DatePicker (js/zebra_datepicker.js)
   e já o vincula a qualquer input com classe .data, .data18,
   .datafutura ou .data_ano (ver a função zebra() em
   js/js.mascara.js). Só que não existe nenhum CSS próprio pra
   esse calendário — ele nasce sem estilo (ou praticamente
   invisível), então na prática ele nunca é usado e o usuário só
   digita a data manualmente.

   Este arquivo estiliza exatamente as classes que o
   zebra_datepicker.js já gera no DOM (.Zebra_DatePicker,
   .dp_header, .dp_daypicker, .dp_footer etc.) — não muda
   nenhuma linha de PHP ou JS existente, só adiciona aparência.

   Usa as MESMAS variáveis de cor do css/style-bootstrap.css
   (--bs-success, --bs-body-color, --bs-card-bg, etc.), então
   acompanha automaticamente o tema claro/escuro do sistema
   ([data-bs-theme="light|dark"]) sem precisar duplicar regras.

   BUG ENCONTRADO NO CAMINHO
   Em js/js.mascara.js, as setas de navegação do calendário
   (header_navigation) são injetadas como:
     <i style="color:#fff" class="fa fa-chevron-circle-left"></i>
   Ou seja: brancas, fixas, via style inline. Num card claro
   (fundo branco/--bs-card-bg claro) elas ficam invisíveis. Este
   CSS neutraliza isso com !important (que vence o style inline
   não-important) — sem precisar tocar no arquivo .js. Se
   preferir corrigir na origem, é só remover o "color:#fff" do
   objeto "opcoes" em js.mascara.js; aí essas regras daqui podem
   ser removidas.

   ONDE COLOCAR
   Sugestão: salve como css/zebra_datepicker_minimal.css e
   inclua um <link rel="stylesheet" href="css/zebra_datepicker_minimal.css">
   no mesmo lugar (cabeçalho/rodapé comum) onde hoje é carregado
   o css/style-bootstrap.css — depois de todos os CSS de base,
   pra garantir que sobrescreva qualquer estilo padrão de input.
   ============================================================ */

/* --- Botão/ícone de calendário ao lado do input --- */

.Zebra_DatePicker_Icon_Wrapper {
    display: inline-block;
    position: relative;   /* NOVO: cria contexto de posicionamento pro ícone */
}

.Zebra_DatePicker_Icon {
    all: unset;
    position: absolute;
    top: 50% !important;
    right: 10px !important;
    transform: translateY(-50%) !important;
    width: 13px;
    height: 13px;
    cursor: pointer;
    background-color: #ff3366;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' 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-.5M2 2a1 1 0 0 0-1 1v11a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V3a1 1 0 0 0-1-1z'/%3E%3Cpath d='M2.5 4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5H3a.5.5 0 0 1-.5-.5zM11 7.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5zm-3 0a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5zm-5 3a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5zm3 0a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5z'/%3E%3C/svg%3E") no-repeat center / contain;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' 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-.5M2 2a1 1 0 0 0-1 1v11a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V3a1 1 0 0 0-1-1z'/%3E%3Cpath d='M2.5 4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5H3a.5.5 0 0 1-.5-.5zM11 7.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5zm-3 0a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5zm-5 3a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5zm3 0a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5z'/%3E%3C/svg%3E") no-repeat center / contain;
}

.Zebra_DatePicker_Icon:hover {
    opacity: 1;
    background-color: #cc2952;
}

.Zebra_DatePicker_Icon_Disabled {
    cursor: not-allowed;
    opacity: .35 !important;
}

/* espaço pro ícone não ficar em cima do texto digitado */
input.data,
input.data18,
input.datafutura,
input.data_ano {
    padding-right: 28px !important;
}

/* --- Container do calendário --- */

.Zebra_DatePicker {
    /* CORREÇÃO (v4): o zebra_datepicker.js mede a largura real do
       calendário (h.outerWidth()) logo na criação, ANTES de a
       classe .dp_hidden existir, pra dar essa mesma largura ao
       cabeçalho/rodapé/grade de mês/ano. Por isso a regra base
       AQUI (sem .dp_hidden nem .dp_visible) precisa deixar o
       elemento "visível/mensurável" — display:block, sem
       display:none nem visibility:hidden. Quem esconde de verdade
       é só a classe .dp_hidden logo abaixo, que o JS só adiciona
       DEPOIS de já ter medido tudo. É a mesma técnica do CSS
       oficial do plugin (ver zebra_datepicker_ORIGINAL_referencia.css). */
    display: block;
    position: absolute;
    font-family: 'Poppins', sans-serif;
    font-size: 12px;
    background-color: var(--bs-card-bg);
    border: 1px solid var(--bs-secondary-bg);
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .12);
    padding: 12px;
    width: 250px;
    z-index: 9999;
}

.Zebra_DatePicker.dp_hidden {
    display: none;
}

.Zebra_DatePicker.dp_visible {
    animation: zdpFadeIn .12s ease-out;
}

@keyframes zdpFadeIn {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

.Zebra_DatePicker table {
    width: 100%;
    border-collapse: collapse;
}

/* --- Cabeçalho (mês/ano + setas) --- */

.dp_header {
    margin-bottom: 6px;
}

/* neutraliza o color:#fff inline injetado por js.mascara.js */
.dp_header i {
    color: var(--bs-body-color) !important;
    font-size: 13px !important;
}

.dp_previous,
.dp_next {
    width: 28px;
    text-align: center;
    cursor: pointer;
    border-radius: 8px;
    padding: 4px 0;
    font-size: 14px;
}

.dp_previous:hover,
.dp_next:hover {
    background-color: var(--bs-body-bg);
}

.dp_previous:hover i,
.dp_next:hover i {
    color: var(--bs-body-color-destaque) !important;
}

.dp_caption {
    text-align: center;
    font-weight: 500;
    font-size: 12px;
    color: var(--bs-body-color-destaque);
    cursor: pointer;
    border-radius: 8px;
    padding: 4px 0;
    text-transform: capitalize;
    white-space: nowrap;
}

.dp_caption:hover {
    background-color: var(--bs-body-bg);
}

/* --- Grade de dias / meses / anos --- */

.dp_daypicker th {
    font-weight: 500;
    font-size: 10px;
    text-transform: uppercase;
    color: var(--bs-body-color);
    padding: 6px 0;
    text-align: center;
}

.dp_daypicker td,
.dp_monthpicker td,
.dp_yearpicker td {
    text-align: center;
    padding: 7px 0;
    cursor: pointer;
    border-radius: 8px;
    color: var(--bs-body-color-destaque);
    font-weight: 500;
}

.dp_not_in_month,
.dp_not_in_month_selectable {
    color: var(--bs-secondary-bg);
    opacity: .2;
    font-weight: 400 !important;
}

.dp_hover {
    background-color: var(--bs-body-bg);
}

.dp_current {
    font-weight: 500;
    background-color: #FFF4CD;
}

.dp_selected {
    background-color: var(--bs-body-color) !important;
    color: var(--bs-white) !important;
    font-weight: 500;
}

.dp_disabled,
.dp_weekend_disabled {
    color: var(--bs-secondary-bg) !important;
    cursor: not-allowed;
    opacity: .5;
}

.dp_week_number {
    color: var(--bs-body-color);
    font-size: 10px;
}

/* --- Rodapé (Hoje / Limpar data) --- */

.dp_footer {
    margin-top: 6px;
}

.dp_today,
.dp_clear {
    text-align: center;
    padding: 4px 0;
    font-size: 11px;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    color: #ff3366;
    border-radius: 6px;
}

.dp_clear {
    color: var(--bs-danger);
}

.dp_today:hover,
.dp_clear:hover {
    color: #cc2952;
}

/* --- Ajuste fino em telas pequenas --- */

@media (max-width: 480px) {
    .Zebra_DatePicker {
        width: 90vw;
        max-width: 300px;
    }
}