anexado ao , compartilhado por toda a página. Portanto este estilo é GLOBAL — vale para todos os datepickers (.datepickerfield) da aplicação, inclusive os de dentro de modais. Não há como escopar por contêiner via CSS. ============================================================================ */ :root { --dp-brand: #3845cd; --dp-brand-dark: #2d38b5; --dp-tint: #eef0fc; --dp-surface: #ffffff; --dp-border: #e9eaec; --dp-border2: #f3f4f6; --dp-t1: #1a1d23; --dp-t2: #555; --dp-t3: #9aa0b3; --dp-radius: 10px; --dp-cell: 8px; } /* ---- Container ---- width SEM !important: serve de fallback. A largura real é definida em runtime pelo beforeShow (foot.php), casando com o input que disparou o popup; o inline do JS precisa vencer esta regra, por isso aqui não leva !important. box-sizing border-box: a largura aplicada já inclui padding/borda do popup. */ .ui-datepicker { width: 280px; box-sizing: border-box !important; padding: 12px !important; margin-top: 4px !important; background: var(--dp-surface) !important; border: 1px solid var(--dp-border) !important; border-radius: var(--dp-radius) !important; box-shadow: 0 10px 30px rgba(16, 24, 40, .12) !important; font-family: inherit !important; font-size: 13px !important; color: var(--dp-t1) !important; } /* ---- Cabeçalho (mês/ano + navegação) ---- */ .ui-datepicker .ui-datepicker-header { position: relative !important; padding: 0 0 8px 0 !important; margin-bottom: 6px !important; background: transparent !important; border: none !important; border-bottom: 1px solid var(--dp-border2) !important; border-radius: 0 !important; font-weight: 700 !important; } .ui-datepicker .ui-datepicker-title { margin: 0 32px !important; line-height: 28px !important; text-align: center !important; font-size: 13px !important; font-weight: 700 !important; color: var(--dp-t1) !important; } /* selects de mês/ano (quando changeMonth/changeYear estão ativos) */ .ui-datepicker .ui-datepicker-title select { height: 28px !important; padding: 2px 6px !important; margin: 0 2px !important; font-size: 12px !important; color: var(--dp-t1) !important; background: var(--dp-surface) !important; border: 1px solid var(--dp-border) !important; border-radius: 6px !important; } /* ---- Botões prev / next: redondos, chevron FontAwesome ---- Esconde o conteúdo nativo (sprite .ui-icon ou texto/ custom da view) e desenha o chevron via ::before — unifica todas as configurações de datepicker. */ .ui-datepicker .ui-datepicker-prev, .ui-datepicker .ui-datepicker-next { top: 0 !important; width: 28px !important; height: 28px !important; cursor: pointer !important; background: transparent !important; border: 1px solid transparent !important; border-radius: 6px !important; transition: background .12s ease, border-color .12s ease !important; } .ui-datepicker .ui-datepicker-prev { left: 0 !important; } .ui-datepicker .ui-datepicker-next { right: 0 !important; } .ui-datepicker .ui-datepicker-prev > *, .ui-datepicker .ui-datepicker-next > * { display: none !important; } .ui-datepicker .ui-datepicker-prev::before, .ui-datepicker .ui-datepicker-next::before { font-family: FontAwesome !important; font-size: 12px !important; color: var(--dp-t2) !important; line-height: 28px !important; display: block !important; text-align: center !important; } .ui-datepicker .ui-datepicker-prev::before { content: '\f053' !important; } /* chevron-left */ .ui-datepicker .ui-datepicker-next::before { content: '\f054' !important; } /* chevron-right */ .ui-datepicker .ui-datepicker-prev:hover, .ui-datepicker .ui-datepicker-next:hover, .ui-datepicker .ui-datepicker-prev.ui-state-hover, .ui-datepicker .ui-datepicker-next.ui-state-hover { background: var(--dp-tint) !important; border-color: transparent !important; top: 0 !important; } .ui-datepicker .ui-datepicker-prev:hover::before, .ui-datepicker .ui-datepicker-next:hover::before { color: var(--dp-brand) !important; } /* ---- Grade do calendário ---- */ .ui-datepicker .ui-datepicker-calendar { width: 100% !important; margin: 0 !important; border-collapse: collapse !important; } /* cabeçalho dos dias da semana */ .ui-datepicker .ui-datepicker-calendar thead th { padding: 6px 0 !important; font-size: 10px !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: .4px !important; color: var(--dp-t3) !important; } .ui-datepicker .ui-datepicker-calendar thead th span { border: none !important; } .ui-datepicker .ui-datepicker-calendar td { padding: 2px !important; text-align: center !important; border: none !important; } /* célula de dia (âncora) — zera o gradiente/borda do tema jQuery UI */ .ui-datepicker .ui-datepicker-calendar td a, .ui-datepicker .ui-datepicker-calendar td span, .ui-datepicker .ui-state-default { display: block !important; padding: 6px 0 !important; text-align: center !important; font-weight: 500 !important; color: var(--dp-t2) !important; background: transparent !important; background-image: none !important; border: 1px solid transparent !important; border-radius: 6px !important; transition: background .12s ease, color .12s ease !important; } .ui-datepicker .ui-datepicker-calendar td a:hover, .ui-datepicker .ui-state-default.ui-state-hover { background: var(--dp-tint) !important; color: var(--dp-brand) !important; border-color: transparent !important; } /* hoje */ .ui-datepicker .ui-datepicker-today a, .ui-datepicker .ui-state-highlight { background: var(--dp-border2) !important; color: var(--dp-t1) !important; border-color: transparent !important; font-weight: 600 !important; } /* dia selecionado / ativo */ .ui-datepicker .ui-state-active, .ui-datepicker .ui-datepicker-calendar td a.ui-state-active { background: var(--dp-brand) !important; color: #ffffff !important; border-color: var(--dp-brand) !important; font-weight: 600 !important; } .ui-datepicker .ui-state-active:hover { background: var(--dp-brand-dark) !important; color: #ffffff !important; } /* dias de outro mês / desabilitados */ .ui-datepicker .ui-datepicker-other-month .ui-state-default, .ui-datepicker .ui-state-disabled, .ui-datepicker .ui-state-disabled .ui-state-default { color: #c7ccd6 !important; background: transparent !important; cursor: default !important; opacity: 1 !important; } .ui-datepicker .ui-state-disabled .ui-state-default:hover { background: transparent !important; color: #c7ccd6 !important; } /* ---- Botão "Hoje"/"Fechar" (buttonPanel, se habilitado) ---- */ .ui-datepicker .ui-datepicker-buttonpane { margin-top: 8px !important; padding-top: 8px !important; border-top: 1px solid var(--dp-border2) !important; } .ui-datepicker .ui-datepicker-buttonpane button { padding: 6px 12px !important; font-size: 12px !important; font-weight: 600 !important; color: var(--dp-t2) !important; background: var(--dp-surface) !important; border: 1px solid var(--dp-border) !important; border-radius: 6px !important; cursor: pointer !important; } .ui-datepicker .ui-datepicker-buttonpane button.ui-priority-primary { color: #ffffff !important; background: var(--dp-brand) !important; border-color: var(--dp-brand) !important; }