.TransferList {
    .TransferListTable {
        margin-top: 15px;
    }

    .GridTable-cell {
        white-space: normal;
    }

    &-subtext {
        font-size: 12px;
        color: var(--text-secondary);
    }
}

.SetupTermsStep {
    &-term .SuiteSection-header-content {
        justify-content: space-between;
    }

    &-mode {
        padding: 16px 0 8px;
        border-bottom: 1px solid var(--gray-200);
        margin-bottom: 16px;

        .form-check {
            margin-bottom: 8px;
        }
    }

    &-term {
        margin-bottom: 8px;
    }

    &-subheading {
        font-weight: 600;
        margin: 0 0 12px;
    }

    &-card {
        margin-bottom: 16px;
        padding: 8px 20px;
        background: var(--container-fills-backgrounds-default-section, #fff);
        border: 1px solid var(--gray-200, #e5e8eb);
        border-radius: 12px;
    }

    &-cardHeader {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        gap: 12px;

        &-count {
            font-size: 13px;
        }
    }

    // Styles for the ContractTermConditionsList table rendered inside SetupTermsStep.
    // The canonical styles live under .ContractTermsForm and don't apply here.
    .ContractTermsConditionsTable {
        margin-top: 12px;

        &-header {
            border-bottom: 1px solid var(--gray-200);
            padding-bottom: 4px;
        }

        .deleteTermCondition {
            cursor: pointer;

            &.disableDelete {
                cursor: default;

                .TrashGlyphIcon {
                    color: var(--gray-400);
                }
            }
        }

        &-row {
            margin-top: 8px;
            align-items: center;

            &.isDragging {
                opacity: 0.6;
            }

            .col-sm-2 {
                display: flex;
                align-items: flex-start;
                gap: 4px;

                .input-group {
                    flex: 1;
                }

                .deleteTermCondition {
                    margin-top: 8px;
                }
            }
        }

        .priorityControl {
            line-height: 40px;
            font-size: 12px;
            color: var(--text-secondary);
            display: flex;
            align-items: center;
            gap: 6px;

            &.draggable {
                cursor: grab;

                &:active {
                    cursor: grabbing;
                }
            }
        }

        .addBlockButton {
            display: block;
            margin-top: 12px;
        }

        &-copy-conditions {
            float: right;
            margin-top: 12px;
        }
    }
}

.ReactModalPortal-FullscreenModal.CreateTransferForm {
    .FullscreenModal-footer {
        gap: 8px;
    }

    .FullscreenModal-fluid {
        width: min(96vw, 1200px);

        .FullscreenModal-body {
            width: 100%;
        }
    }
}

.CreateTransferForm {
    &-header {
        text-align: center;
        padding: 20px 0 16px;
    }

    &-title {
        // PageHeader.Title (Solfege) supplies the type; just reset h1 margins.
        margin: 0 0 8px;
    }

    &-subtitle {
        font-size: 14px;
        color: var(--text-secondary);
        margin-bottom: 0;
    }

    &-body {
        max-width: 500px;
        margin: 0 auto;
        padding-bottom: 32px;

        .form-group {
            margin-bottom: 16px;
        }

        .SuiteSelect {
            width: 100%;
        }
    }

    &-info {
        margin-top: 8px;

        p {
            margin: 0 0 6px;
        }

        ul {
            margin: 6px 0 0;
            padding-left: 20px;

            li {
                margin-bottom: 4px;
            }
        }
    }
}

// The accounting info Alert renders on top of a suite Card, which can carry a
// pointer (hand) cursor and read as clickable. It does nothing here, so force
// the default cursor. Scoped under the modal to outrank the card's own
// clickable rule.
.ReactModalPortal-FullscreenModal.CreateTransferForm .CreateTransferForm-info {
    cursor: default;
}

.TransferDetail-body {
    gap: 16px;

    // The suite PageHeader bleeds 20px past the content container on each side.
    // Bleed the body to match so the card spans the same width as the header,
    // re-padding 20px so the content still lines up with the header content.
    margin-right: -20px;
    margin-left: -20px;
    padding-right: 20px;
    padding-left: 20px;
}

.TransferDetail-projects-title {
    margin-bottom: 16px;
}

.TransferDetail-Header-Label {
    color: var(--text-secondary);
    margin-bottom: 0;
}

// Required for the suite PageHeader to lay out with tight, even spacing
// (mirrors the contract detail page's header overrides).
.TransferDetail-header {
    &.SuitePageHeader {
        row-gap: 12px;

        // Trim the header container's own bottom padding; trimming only the
        // inner -body (below) still left the outer padding, which read as an
        // awkward gap between the header and the body content.
        padding-bottom: 0;
    }

    // Trim the suite PageHeader body's default 20px bottom padding so the
    // header sits close to the content below it.
    &.SuitePageHeader .SuitePageHeader-body {
        padding-bottom: 0;
    }

    &-metadata {
        display: flex;
        align-items: center;
        gap: 12px;
        grid-column: span 2;
    }

    &-main-content {
        grid-column: span 2;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
}

.TransferDetail {
    .SuitePageHeader-main {
        height: unset !important;
    }

    &-Header {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        align-self: stretch;
        width: 100%;

        &-Summary {
            display: flex;
            gap: 15px;
            font-size: 14px;

            &-Item {
                display: flex;
                align-items: center;
                gap: 5px;
                color: var(--text-primary);
            }
        }

        &-Main {
            display: flex;
            align-items: center;
            align-self: stretch;
            gap: 8px;
        }

        // H1 Bold type token from the design system (literal values; the app
        // does not define the capitalized Figma --Font-Size-H1 token).
        &-Title {
            color: #22262a;
            font-family: Rubik, sans-serif;
            font-size: 24px;
            font-style: normal;
            font-weight: 500;
            line-height: 32px;
            letter-spacing: normal;
        }

        &-Status {
            margin-right: auto;
        }

        &-Bottom {
            display: flex;
            align-items: baseline;
            gap: 20px;
            align-self: stretch;
            margin-top: 5px;

            &-Left {
                display: flex;
                align-items: center;
                gap: 10px;
                flex: 1 0 auto;
                font-size: 14px;
            }

            &-Right {
                font-size: 12px;
                font-weight: 400;
                line-height: 18px;
                display: flex;
                flex-direction: column;
                align-items: flex-end;
                row-gap: 4px;
                color: var(--text-primary);
            }

            &-Item {
                display: flex;
                align-items: center;
                gap: 4px;
                color: var(--text-primary);

                &-Divider {
                    width: 1px;
                    height: 14px;
                    background: var(--gray-300);
                }
            }
        }
    }
}

.ProjectTransferCard {
    border-radius: 12px;
    background-color: var(--container-fills-backgrounds-default-section, #fff);
    box-shadow: 4px 4px 8px 2px rgb(13 36 53 / 4%);
    padding: 20px;

    // H3 type token from the design system (literal values; the app does not
    // define the capitalized Figma --Font-Size-H3 / --Typeface tokens).
    &-title {
        color: #22262a;
        font-family: Rubik, sans-serif;
        font-feature-settings: 'liga' off;
        font-size: 18px;
        font-style: normal;
        font-weight: 400;
        line-height: 24px;
        letter-spacing: normal;
    }

    .PageGrid {
        column-gap: 40px;
        margin-top: 20px;
    }
}