#uv-members-api-finance-form.member-finance {
	display: grid;
    gap: var(--gin-spacing-m);
}

@media (min-width: 700px) {
  #uv-members-api-finance-form.member-finance {
    grid-template-columns: 1fr 1fr;
    gap: var(--gin-spacing-l);
  }
}

.member-finance__summary {
    display: grid;
    gap: var(--gin-spacing-l);
    grid-column: 1 / span 2;

    .form-wrapper {
        padding: 16px;
        background: #fff;
        border-radius: var(--radius-l);
    }
}

@media (min-width: 700px) {
  .member-finance__summary {
    grid-template-columns: 1fr 1fr 1fr;

    .form-wrapper {
        padding: 32px;
    }
  }
}

.member-finance__stat {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 10px;
    font-size: var(--gin-font-size-s);
    line-height: 1;
    color: #545560;

    strong {
        font-size: var(--gin-font-size-h3);
        color: #222330;
    }

    .member-finance__stat-icon {
        position: absolute;
        top: 32px;
        right: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 45px;
        height: 45px;
        border-radius: 50%;
    }
}

.member-finance__stat--balance .member-finance__stat-icon {
    background: #DFF2FE;

    &::before {
        content: url('../icons/person/saldo.svg');
    }
}

.member-finance__fees {
    grid-column: 1 / span 2;
}

.member-finance__stat--fee .member-finance__stat-icon {
    background: #FFE2E2;

     &::before {
        content: url('../icons/person/mitgliedsbeitrag.svg');
    }
}

.member-finance__stat--donation .member-finance__stat-icon{
    background: #EDE9FE;

     &::before {
        content: url('../icons/heart.svg');
    }
}

.button.member-finance__create {
    margin: 0;
}

.member-finance__card {
    padding: 16px;
    background: #fff;
    border-radius: var(--radius-l);

    h2 {
        padding: 0 0 var(--gin-spacing-m);
        font-size: var(--gin-font-size-m);
        line-height: 1.5;
        font-weight: 700;
        border-bottom: 1px solid #EBEBEB;
        text-box-trim: trim-both;
        text-box-edge: cap alphabetic;
    }

    div.form-type--radio {
        margin-block: 0;
    }
}

@media (min-width: 700px) {
  .member-finance__card {
    padding: 32px;
  }
}

.member-finance__statement {
    grid-column: 1 / span 2;
}

.member-finance__donations {
    grid-column: 1 / span 2;
}

.member-finance__payment .form-radios {
    display: flex;
    flex-direction: column;
    gap: var(--gin-spacing-m);
}

.member-finance__documents {
    grid-column: 1 / span 2;
}

/* Mitgliedsbeitrag erstellen */
body[class^="crm-persons-"]:has(.uv-members-api-create-membership-fee) {
    background: var(--gin-bg-app);
}

body[class^="crm-persons-"] form.uv-members-api-create-membership-fee {
    padding: 16px;
    background: var(--gin-bg-layer);
    border: 1px solid var(--gin-border-color-layer);
    box-shadow: var(--gin-shadow-l1);
    border-radius: var(--gin-border-l);

    .form-element--type-select {
        min-width: 300px;
    }
}

@media (min-width: 700px) {
  body[class^="crm-persons-"] form.uv-members-api-create-membership-fee {
    padding: 32px;
  }
}

/* Zahlungsart */
p.member-finance__feedback:not(:empty) {
    width: max-content;
    padding: var(--gin-spacing-xs);
    background-color: #ECFDF3;
    border: 1px solid #ABEFC6;
    border-radius: var(--gin-border-m);
    font-size: var(--gin-font-size-xs);
    font-weight: 500;
    line-height: 1;
}

/* Keine Zahlungsart hinterlegt: colors of .messages--info (42-misc.css). */
p.member-finance__feedback--info:not(:empty) {
    color: #102A56;
    background-color: #EFF8FF;
    border-color: #B2DDFF;
}

/* SEPA-Mandat erstellen */
.member-finance__sepa {

    th:first-child,
    td:first-child,
    th:last-child,
    td:last-child {
        width: 1%;
        white-space: nowrap;
    }

    div.layer-wrapper tbody td {
        font-size: var(--gin-font-size-s);
        vertical-align: top;
    }

    small {
        display: block;
        font-size: var(--gin-font-size-xs);
        font-weight: 400;
        color: #6B6B76;
    }

    td.finance-status {
        white-space: nowrap;
    }

    .member-finance__mandate-actions {
        display: flex;
        justify-content: space-between;
        gap: 8px;
        
        a {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 36px;
            height: 36px;
            border-radius: 8px;
            border: 1px solid #F2F3F6;
            background: #FFF;
            font-size: 0;

            &:hover,
            &:focus {
                background: #FBE7EA;
            }
        }

        .member-finance__open::before {
            content: url('../icons/view.svg');
        }

        .member-finance__download::before {
            content: url('../icons/download.svg');
            filter: brightness(0) saturate(100%) invert(14%) sepia(98%) saturate(7498%) hue-rotate(318deg) brightness(86%) contrast(117%);
        }

        .member-finance__deactivate::before {
            content: url('../icons/disable.svg');
        }
    }
}

body[class^="crm-persons-"]:has(.uv-members-api-sepa-create),
body[class^="crm-persons-"]:has(.uv-members-api-sepa-mandate) {
    background: var(--gin-bg-app);
}

.uv-members-api-sepa-create {
    padding: 16px;
    background: var(--gin-bg-layer);
    border: 1px solid var(--gin-border-color-layer);
    box-shadow: var(--gin-shadow-l1);
    border-radius: var(--gin-border-l);

    .form-element--type-select {
        min-width: 300px;
    }
}

@media (min-width: 700px) {
  .uv-members-api-sepa-create {
    padding: 32px;
  }
}

.member-sepa-back {
    margin-block-start: var(--gin-spacing-m);
}

div.block-system-main-block > .uv-members-api-sepa-mandate  {
    padding: 0;
    padding-block-start: 0;
    background: transparent;
    border: 0;
    box-shadow: none;

    .layer-wrapper {
        margin: 0 0 var(--gin-spacing-l);
        padding: var(--gin-spacing-s);
        padding-block-start: var(--gin-spacing-l);
        background: var(--gin-bg-layer);
        border: 1px solid var(--gin-border-color-layer);

        td {
            border-bottom: 1px solid #e7e8e9;
        }
}
}

.sepa-status {
    display: inline-block;
    padding: 4px 8px;
    border-radius: 999px;
    font-size: var(--gin-font-size-xs);
    font-weight: 400;
}

.sepa-status--active,
.sepa-status--document-confirmed,
.sepa-status--digitally-confirmed {
    background: #DCFCE7;
    color: #166534;
}

.sepa-status--unconfirmed {
    background: #FEF3C7;
    color: #92400E;
}

.sepa-status--deactivated {
    background: #F2F3F6;
    color: #6B6B76;
}

.member-finance__empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 24px 0;

    &::before {
        content: url('../icons/empty-state_sepa.svg');
    }

    &.member-finance__empty--donations::before {
        content: url('../icons/empty-state_spende.svg');
    }

    &.member-finance__empty--documents::before {
        content: url('../icons/empty-state_dokumente.svg');
    }

    p {
        margin: 0;
        font-size: 14px;
        font-style: italic;
        color: var(--vierzwo-color-light-grey);
    }
}

.member-sepa-back {
    text-align: right;
}

.member-sepa-operations {
    display: flex;
    justify-content: end;
    align-items: center;
}

/* Edit icon like the view tables (42-views.css .edit-link). */
.member-finance .member-finance__edit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  font-size: 0;
  text-decoration: none;
  transition: var(--vierzwo-transition-short);
}

.member-finance .member-finance__edit::before {
  content: url("/modules/custom/uv_admin/icons/edit.svg");
  filter: brightness(0) saturate(100%) invert(14%) sepia(98%)
    saturate(7498%) hue-rotate(318deg) brightness(86%) contrast(117%);
}

.member-finance .member-finance__edit:hover,
.member-finance .member-finance__edit:focus {
  background: var(--gin-color-primary-light);
}
/* SEPA-Mandat deaktivieren: compact dialog, slides up and tilts into place */
.member-sepa-dialog p {
    margin: 0;
}

@keyframes member-sepa-dialog-in {
    from {
        opacity: 0;
        transform: translateY(48px);
    }
}

@keyframes member-sepa-overlay-in {
    from {
        opacity: 0;
    }
}

.ui-dialog.member-sepa-dialog-window {
    animation: member-sepa-dialog-in .7s cubic-bezier(.2, .8, .2, 1) both;

    .ui-dialog-titlebar {
        padding-bottom: 0;
    }

    .ui-dialog-title {
        font-weight: 700;
        text-wrap: ;
    }

    .ui-dialog-titlebar-close {
        width: 1.5rem;
        height: 1.5rem;
        margin-top: 6px;
        opacity: 1;
    }
}

/* Lighter than Gin's overlay (opacity .9). */
body:has(.member-sepa-dialog-window) .ui-widget-overlay {
    opacity: .7;
    animation: member-sepa-overlay-in .7s ease both;
}

@media (prefers-reduced-motion: reduce) {
    .ui-dialog.member-sepa-dialog-window,
    body:has(.member-sepa-dialog-window) .ui-widget-overlay {
        animation: none;
    }
}

/* Spenden: first five rows, the rest behind a small "Show all" link (finance.js). */
.member-finance table.is-collapsed tr.member-finance__row--more {
    display: none;
}

.member-finance .member-finance__show-all {
    margin-top: var(--gin-spacing-xs);
    padding: 0;
    background: none;
    border: 0;
    color: var(--gin-color-primary);
    font-size: var(--gin-font-size-xs);
    font-weight: 400;
    text-decoration: underline;
    cursor: pointer;
}

.member-finance .member-finance__show-all:hover,
.member-finance .member-finance__show-all:focus {
    color: var(--gin-color-primary-active);
    text-decoration: none;
}

/* Spenden: open / cancelled donations dimmed, except the status badge. */
#edit-donations tr.is-inactive td:not(.finance-status) {
    opacity: .7;
}

/* Spenden: amount of paid donations in bold. */
#edit-donations tr:not(.is-inactive) td.finance-amount {
    font-weight: 600;
}