/*
 * DAREF Phase 28 — Assignment Charge / Client Live Data
 */

.phase28-charge-field {
    display:
        flex;

    flex-direction:
        column;

    gap:
        6px;

    min-width:
        0;
}


.phase28-charge-field > span,
.phase28-charge-field > .phase28-label {
    color:
        #33414f;

    font-size:
        .67rem;

    font-weight:
        800;
}


.phase28-charge-input {
    width:
        100%;

    min-height:
        42px;

    border:
        1px solid
        #cfd8df;

    border-radius:
        8px;

    padding:
        9px 11px;

    background:
        #ffffff;

    color:
        #17202b;

    font:
        inherit;
}


.phase28-charge-input:focus {
    outline:
        2px solid
        rgba(
            23,
            59,
            98,
            .14
        );

    border-color:
        #173b62;
}


.phase28-money {
    font-variant-numeric:
        tabular-nums;

    white-space:
        nowrap;
}


.phase28-summary {
    display:
        flex;

    flex-wrap:
        wrap;

    align-items:
        center;

    gap:
        10px;

    margin:
        0 0 14px;

    padding:
        11px 13px;

    border:
        1px solid
        #dce4ea;

    border-radius:
        9px;

    background:
        #f8fafb;
}


.phase28-summary strong {
    color:
        #173b62;
}


.phase28-table-wrap {
    width:
        100%;

    overflow-x:
        auto;
}


.phase28-table {
    width:
        100%;

    border-collapse:
        collapse;

    font-size:
        .67rem;
}


.phase28-table th,
.phase28-table td {
    padding:
        10px 9px;

    border-bottom:
        1px solid
        #e5eaee;

    text-align:
        left;

    vertical-align:
        middle;
}


.phase28-table th {
    color:
        #53606b;

    background:
        #f7f9fa;

    font-size:
        .59rem;

    font-weight:
        900;

    text-transform:
        uppercase;
}


.phase28-status {
    display:
        inline-flex;

    align-items:
        center;

    min-height:
        24px;

    padding:
        4px 8px;

    border-radius:
        999px;

    font-size:
        .58rem;

    font-weight:
        900;
}


.phase28-status-active,
.phase28-status-paid {
    background:
        #e7f4eb;

    color:
        #24613a;
}


.phase28-status-terminated,
.phase28-status-not-paid {
    background:
        #f6e7e9;

    color:
        #7f1724;
}


.phase28-action-link {
    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    min-height:
        29px;

    padding:
        5px 9px;

    border:
        1px solid
        #d1d9df;

    border-radius:
        7px;

    background:
        #ffffff;

    color:
        #173b62;

    font-size:
        .6rem;

    font-weight:
        800;

    text-decoration:
        none;
}


.phase28-action-link:hover {
    border-color:
        #173b62;

    background:
        #f2f6f9;
}


.phase28-empty {
    padding:
        18px;

    border:
        1px dashed
        #cad4dc;

    border-radius:
        8px;

    color:
        #6b7680;

    text-align:
        center;
}


.phase28-charge-view {
    border-left:
        3px solid
        #173b62;
}


@media (
    max-width: 700px
) {

    .phase28-table {
        min-width:
            780px;
    }

}