/* MH-04 | Shared Field State Visual */

/*
 * V1 R3 rule retained:
 * filled / system / calculated use ONE shared fill color.
 * Origin is expressed by a text marker, not a second fill color.
 */

.mh04-field--normal {
    transition:
        background-color 0.12s ease,
        border-color 0.12s ease,
        box-shadow 0.12s ease;
}

.mh04-field--filled,
.mh04-field--system,
.mh04-field--calculated {
    background: #eef8f1 !important;
    border-color: #a9d0b4 !important;
    box-shadow:
        inset 3px 0 0 #70aa7d;
}

.mh04-field--readonly {
    background: #f3f6f8 !important;
    border-color: #cfd9df !important;
    color: #526574 !important;
    cursor: default;
}

.mh04-field--disabled {
    background: #f1f3f5 !important;
    border-color: #d9dee3 !important;
    color: #87939d !important;
    opacity: 0.82;
    cursor: not-allowed;
}

.mh04-field--locked {
    background: #f5f7fa !important;
    border-color: #cbd5df !important;
    box-shadow:
        inset 3px 0 0 #7c8fa1;
    color: #445768 !important;
    cursor: default;
}

.mh04-field-note {
    display: inline-flex;
    align-items: center;

    width: fit-content;

    margin-top: 4px;
    padding: 2px 7px;

    border-radius: 999px;

    background: #e7f1f4;
    color: #526f7c;

    font-size: 11px;
    font-weight: 700;
    line-height: 1.4;
    white-space: nowrap;
}

.mh04-field-note[data-state="calculated"] {
    background: #e8f5ed;
    color: #527663;
}

.mh04-field-note[data-state="readonly"] {
    background: #edf1f4;
    color: #647482;
}

.mh04-field-note[data-state="disabled"] {
    background: #eef0f2;
    color: #7b8790;
}

.mh04-field-note[data-state="locked"] {
    background: #e9eef3;
    color: #506273;
}