/*
    Styles for the data definitions Blazor editors.

    The Web Forms editors set colours, fonts and backgrounds on each control as they build
    it. Those decisions live here instead, so a deployment can restyle a worksheet without a
    code change, and so the editors themselves only have to say what a field is - calculated,
    adjusted, unavailable - rather than what it should look like.

    Referenced by the host application, for example from _Host.cshtml:
    <link href="_content/DataDefinitions.Xaf.Xpo.Module.Blazor/dataDefinitions.css" rel="stylesheet" />
*/

/* A formula is code: it is read in a fixed pitch face so that columns line up, whether it is
   being edited or only read. What each part of it is coloured is decided elsewhere, by the
   stylesheet formulaSyntaxHighlighting.js injects, because that one is shared with the Web
   Forms editor. */
.dd-formula-expression textarea,
.dd-formula-expression-view {
    font-family: Consolas, "Courier New", monospace;
}

.dd-custom-field-form-layout {
    width: 100%;
}

/* Instructions are guidance rather than data, and are set apart from the values. */
.dd-custom-field-form-instructions {
    color: #cd5c5c;
    font-size: 0.9em;
    margin-top: 0.25rem;
}

/* A value the worksheet calculated rather than the operator entered. */
.dd-custom-field-form-item--calculated .dd-custom-field-form-value {
    background-color: #ebebeb;
}

/* A value that was changed after it was first recorded. */
.dd-custom-field-form-value--adjusted {
    color: #dc3545;
    font-weight: 600;
}

/* A value that has not been recorded at all. */
.dd-custom-field-form-null {
    color: #a9a9a9;
}

.dd-custom-field-form-file {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.dd-custom-field-form-file-name {
    overflow-wrap: anywhere;
}

/* The variance formatting rule icons are drawn at the size the report uses them at. */
.dd-variance-icon {
    width: 16px;
    height: 16px;
    vertical-align: middle;
}

.dd-variance-icon-caption {
    margin-left: 0.5rem;
    vertical-align: middle;
}

.dd-variance-icon-null {
    color: #a9a9a9;
}