/* Campos com abertura nativa no formulário de despesas. O botão separado evita
   depender do indicador inconsistente que cada navegador desenha. */
.expense-picker-control{
    position:relative;
    display:block;
    isolation:isolate;
}
.expense-picker-control>input,
.expense-picker-control>select{
    position:relative;
    z-index:1;
    padding-right:52px!important;
}
.expense-picker-control>select{
    appearance:none!important;
    -webkit-appearance:none!important;
}
.expense-picker-control>input[type="date"]::-webkit-calendar-picker-indicator{
    width:42px;
    opacity:0;
    cursor:pointer;
}
.expense-picker-control>[data-show-picker]{
    position:absolute!important;
    z-index:4!important;
    right:6px;
    top:12px;
    display:grid;
    place-items:center;
    width:36px;
    height:36px;
    margin:0;
    padding:0;
    border:0;
    border-radius:8px;
    background:#edf5f2;
    color:var(--green);
    cursor:pointer;
    pointer-events:auto!important;
}
.expense-picker-control>[data-show-picker]:hover,
.expense-picker-control>[data-show-picker]:focus-visible{
    background:#dff0ea;
    outline:2px solid color-mix(in srgb,var(--green) 35%,transparent);
    outline-offset:1px;
}
.expense-picker-control>[data-show-picker] svg{
    width:18px;
    height:18px;
}
.expense-picker-chevron{
    transform:rotate(90deg);
}
#expenseModal.show,
#expenseModal.show .expense-modal-card,
#expenseModal.show .expense-modal-card form,
#expenseModal.show .expense-modal-card label{
    pointer-events:auto!important;
}
#expenseModal.show .expense-modal-card{
    transform:none!important;
    opacity:1!important;
}
@media(max-width:760px){
    .expense-picker-control>[data-show-picker]{
        top:11px;
        width:38px;
        height:38px;
    }
}