/* Cash4DS.10 — ajuste visual validado nos prints HLG534/PROD532.
 * Escopo: apenas editor de lançamentos. Preservar lógica financeira e outros formulários. */

/* Corpo neutro e contorno bege delicado em todos os grupos. */
#add-modal-panel.cash4ds-transaction-editor #modal-form-area > div > section {
    background-color: #fff !important;
    border-color: rgba(166, 138, 100, .34) !important;
}

/* Degradê restrito ao cabeçalho. Mais legível no Android, sem colorir o corpo.
 * A linha divide título do conteúdo, em cinza intermediário e espessura de 1 px. */
#add-modal-panel.cash4ds-transaction-editor #modal-form-area > div > section > div:first-child {
    background-color: transparent !important;
    background-image: linear-gradient(180deg,
        rgba(206, 180, 146, .16) 0%,
        rgba(221, 201, 175, .07) 52%,
        rgba(255, 255, 255, 0) 100%) !important;
    margin: -1rem -1rem 1rem !important;
    padding: 1rem 1rem .9rem !important;
    border-radius: 1rem 1rem 0 0;
    border-bottom: 1px solid rgba(131, 131, 131, .34) !important;
}

/* Conta e Categoria: mesmo tamanho externo, independente do texto selecionado. */
#add-modal-panel.cash4ds-transaction-editor #modal-form-area [data-c4ds-picker-trigger="input-trans-acc"],
#add-modal-panel.cash4ds-transaction-editor #modal-form-area [data-c4ds-picker-trigger="input-trans-orig"],
#add-modal-panel.cash4ds-transaction-editor #modal-form-area [data-c4ds-picker-trigger="input-trans-dest"],
#add-modal-panel.cash4ds-transaction-editor #modal-form-area #dev21-transaction-category-trigger {
    box-sizing: border-box;
    width: 100%;
    height: 60px !important;
    min-height: 60px !important;
    max-height: 60px !important;
    padding: 8px 12px !important;
    display: flex;
    align-items: center !important;
    gap: 10px;
    overflow: hidden;
}
#add-modal-panel.cash4ds-transaction-editor #modal-form-area [data-c4ds-picker-trigger] > .min-w-0,
#add-modal-panel.cash4ds-transaction-editor #modal-form-area #dev21-transaction-category-trigger > .min-w-0 {
    min-width: 0;
    flex: 1 1 0%;
}

/* HLG545: apresentação única de Conta/Categoria/Repetição, inclusive
 * Conta de saída e Conta de entrada (transferências).
 * Todos os seletores ficam a 60px; ícones/logos a 32px, como Repetição. */
#add-modal-panel.cash4ds-transaction-editor #modal-form-area
[data-c4ds-picker-trigger="input-trans-acc"] > :first-child,
#add-modal-panel.cash4ds-transaction-editor #modal-form-area
[data-c4ds-picker-trigger="input-trans-orig"] > :first-child,
#add-modal-panel.cash4ds-transaction-editor #modal-form-area
[data-c4ds-picker-trigger="input-trans-dest"] > :first-child,
#add-modal-panel.cash4ds-transaction-editor #modal-form-area
#dev21-transaction-category-trigger > :first-child {
    box-sizing: border-box;
    width: 32px !important;
    height: 32px !important;
    min-width: 32px;
    flex-shrink: 0;
    border-radius: 12px;
}
#add-modal-panel.cash4ds-transaction-editor #modal-form-area
#dev21-transaction-category-trigger > :first-child img,
#add-modal-panel.cash4ds-transaction-editor #modal-form-area
#dev21-transaction-category-trigger > :first-child > span {
    box-sizing: border-box;
    width: 32px !important;
    height: 32px !important;
    border-radius: 12px;
}
#add-modal-panel.cash4ds-transaction-editor #modal-form-area
#dev21-transaction-category-trigger > :first-child svg,
#add-modal-panel.cash4ds-transaction-editor #modal-form-area
#dev21-transaction-category-trigger > :first-child i {
    width: 16px !important;
    height: 16px !important;
}

/* Data, valor e descrição com a mesma altura visual, independentemente
 * do tipo de lançamento ou das regras de min-height do formulário. */
#add-modal-panel.cash4ds-transaction-editor #modal-form-area #input-trans-date,
#add-modal-panel.cash4ds-transaction-editor #modal-form-area #input-trans-val,
#add-modal-panel.cash4ds-transaction-editor #modal-form-area #input-trans-desc {
    box-sizing: border-box;
    height: 48px !important;
    min-height: 48px !important;
    max-height: 48px !important;
}

/* Repetição: uma linha inteira para a escolha; intervalo separado e simétrico. */
#add-modal-panel.cash4ds-transaction-editor #modal-form-area #div-rep-wrapper {
    grid-column: 1 / -1 !important;
    min-width: 0;
}
#add-modal-panel.cash4ds-transaction-editor #modal-form-area #div-rep-periodo:not(.hidden) {
    grid-column: 1 / -1 !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
    width: 100%;
    min-width: 0;
    margin-top: 8px;
    align-items: end;
}
#add-modal-panel.cash4ds-transaction-editor #modal-form-area #div-rep-periodo > div {
    min-width: 0;
}
#add-modal-panel.cash4ds-transaction-editor #modal-form-area #div-rep-periodo input,
#add-modal-panel.cash4ds-transaction-editor #modal-form-area #div-rep-periodo [data-c4ds-picker-trigger="input-trans-rep-period-type"] {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    height: 48px !important;
    min-height: 48px !important;
    max-height: 48px !important;
}
#add-modal-panel.cash4ds-transaction-editor #modal-form-area #div-rep-wrapper [data-c4ds-picker-trigger="input-trans-rep"] {
    box-sizing: border-box;
    width: 100%;
    height: 60px;
    min-height: 60px;
}
#add-modal-panel.cash4ds-transaction-editor #modal-form-area #div-rep-duration button {
    box-sizing: border-box;
    height: 48px !important;
    min-height: 48px !important;
    max-height: 48px !important;
    display: flex;
    align-items: center;
    justify-content: center;
}
#add-modal-panel.cash4ds-transaction-editor #modal-form-area #div-rep-duration .grid {
    gap: 12px;
}
/* HLG547: somente a caixa principal Repetir a cada permanece com 60px;
 * quantidade, periodo, parcelas, duracao e ocorrencias usam 48px. */
#add-modal-panel.cash4ds-transaction-editor #modal-form-area #div-rep-parcelado input,
#add-modal-panel.cash4ds-transaction-editor #modal-form-area #div-rep-occurrence-total input {
    box-sizing: border-box;
    width: 100%;
    height: 48px !important;
    min-height: 48px !important;
    max-height: 48px !important;
}
#add-modal-panel.cash4ds-transaction-editor #modal-form-area
[data-c4ds-picker-trigger="input-trans-rep-period-type"] {
    position: relative;
    box-sizing: border-box;
    height: 48px !important;
    min-height: 48px !important;
    max-height: 48px !important;
    align-items: center;
}
/* Centralizacao absoluta deixa Dias/Semanas/Meses/Anos realmente no meio,
 * sem mexer no icone e na seta das extremidades ou na area de toque. */
#add-modal-panel.cash4ds-transaction-editor #modal-form-area
[data-c4ds-picker-trigger="input-trans-rep-period-type"] .c4ds-rep-period-choice {
    position: absolute;
    inset: 0;
    padding: 0 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    pointer-events: none;
    overflow: hidden;
}
#add-modal-panel.cash4ds-transaction-editor #modal-form-area
[data-c4ds-picker-trigger="input-trans-rep-period-type"] .c4ds-rep-period-choice > span {
    max-width: 100%;
}

/* Tema escuro: manter a mesma separação, sem transformar os cartões em bege sólido. */
html.dark #add-modal-panel.cash4ds-transaction-editor #modal-form-area > div > section {
    background-color: #131313 !important;
    border-color: rgba(197, 168, 128, .34) !important;
}
html.dark #add-modal-panel.cash4ds-transaction-editor #modal-form-area > div > section > div:first-child {
    background-image: linear-gradient(180deg,
        rgba(158, 127, 86, .14) 0%,
        rgba(158, 127, 86, .06) 54%,
        rgba(19, 19, 19, 0) 100%) !important;
    border-bottom-color: rgba(165, 165, 165, .35) !important;
}