/*
    The shared look of the Master Data Analysis dialogs: the picture of a move (from -> what -> to), the
    list of what moves, notes, the footnote and the key caps on the buttons. One file, so a confirmation
    reads the same whichever screen opened it.
*/

.mdd { display: flex; flex-direction: column; gap: 14px; font-size: .875rem; }

.mdd-lead { font-size: .9375rem; line-height: 1.45; }

.mdd-section-title {
    margin-bottom: 6px;
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
}

/* ------------------------------------------------------------------ from -> what -> to */

.mdd-flow {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(104px, 168px) minmax(0, 1fr);
    align-items: stretch;
    gap: 8px;
}

.mdd-card {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    padding: 10px 12px;
    border: 2px dashed var(--mud-palette-lines-inputs);
    border-radius: 10px;
}

.mdd-card--to {
    border-style: solid;
    border-color: var(--mud-palette-primary);
    background-color: rgba(var(--mud-palette-primary-rgb), .06);
}

.mdd-card--pending {
    justify-content: center;
    align-items: center;
    text-align: center;
    color: var(--mud-palette-text-secondary);
    font-style: italic;
}

.mdd-role {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    align-self: flex-start;
    margin-bottom: 4px;
    padding: 1px 8px;
    border: 1px solid var(--mud-palette-lines-inputs);
    border-radius: 6px;
    background-color: var(--mud-palette-background-gray);
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--mud-palette-text-primary);
}

.mdd-card--to .mdd-role {
    border-color: var(--mud-palette-primary);
    background-color: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
}

.mdd-role .mud-icon-root { font-size: .875rem; }

.mdd-card__name {
    overflow: hidden;
    font-size: .9375rem;
    font-weight: 700;
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* The name of a master record that exists is its link: the primary colour, and the new-tab mark after it. */
.mdd-card__name--link { display: block; color: var(--mud-palette-primary); }

.mdd-card__open { margin-left: 4px; font-size: .875rem; vertical-align: -2px; opacity: .7; }

.mdd-card__name--link:hover .mdd-card__open { opacity: 1; }

.mdd-card__id { display: flex; align-items: center; min-height: 20px; font-size: .8125rem; font-weight: 600; }

.mdd-card__id .mud-link { font-size: inherit; font-weight: inherit; line-height: inherit; }

.mdd-card__name--link.mud-link { font-size: .9375rem; font-weight: 700; line-height: 1.3; }

.mdd-card__id--none { font-weight: 400; color: var(--mud-palette-text-secondary); }

/* Up to two lines each, so a narrow card still says where the record is; the rest is the hover. */
.mdd-card__meta {
    display: -webkit-box;
    overflow: hidden;
    font-size: .75rem;
    line-height: 1.4;
    color: var(--mud-palette-text-secondary);
    overflow-wrap: anywhere;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

/* The arrow between the cards, with what travels along it written on top. */
.mdd-via {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 6px;
    min-width: 0;
    text-align: center;
}

.mdd-via__what {
    max-width: 100%;
    padding: 3px 10px;
    border-radius: 999px;
    background-color: var(--mud-palette-background-gray);
    font-size: .75rem;
    font-weight: 600;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.mdd-via__detail {
    display: block;
    font-weight: 400;
    color: var(--mud-palette-text-secondary);
}

.mdd-via__track {
    position: relative;
    width: calc(100% - 10px);
    height: 2px;
    margin-right: 10px;
    background-color: var(--mud-palette-primary);
}

.mdd-via__track::after {
    content: "";
    position: absolute;
    top: -5px;
    right: -10px;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    border-left: 10px solid var(--mud-palette-primary);
}

@media (max-width: 640px) {
    .mdd-flow { grid-template-columns: minmax(0, 1fr); }

    .mdd-via { flex-direction: row; justify-content: flex-start; padding-left: 16px; }

    .mdd-via__track { order: -1; width: 2px; height: 22px; margin: 0 0 10px; }

    .mdd-via__track::after { top: auto; right: -5px; bottom: -10px; border: 6px solid transparent; border-top: 10px solid var(--mud-palette-primary); border-bottom: 0; }
}

/* ------------------------------------------------------------------ the records that move */

.mdd-records {
    max-height: 200px;
    overflow-y: auto;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 8px;
}

.mdd-record {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 6px 10px;
}

.mdd-record + .mdd-record { border-top: 1px solid var(--mud-palette-table-lines); }

.mdd-record__system {
    padding: 0 7px;
    border: 1px solid var(--mud-palette-lines-inputs);
    border-radius: 6px;
    font-size: .6875rem;
    font-weight: 600;
    line-height: 18px;
    white-space: nowrap;
}

.mdd-record__body { min-width: 0; }

.mdd-record__name,
.mdd-record__id {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mdd-record__name { font-weight: 600; }

.mdd-record__id { font-size: .75rem; color: var(--mud-palette-text-secondary); }

.mdd-record__count { font-size: .75rem; color: var(--mud-palette-text-secondary); white-space: nowrap; }

.mdd-record--more { display: block; font-size: .75rem; color: var(--mud-palette-text-secondary); }

/* ------------------------------------------------------------------ notes and the footnote */

.mdd-note {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 7px 10px;
    border-radius: 8px;
    background-color: var(--mud-palette-background-gray);
    line-height: 1.4;
}

.mdd-note .mud-icon-root { flex: 0 0 auto; margin-top: 1px; font-size: 1.125rem; }

.mdd-note--warn {
    color: var(--mud-palette-warning-darken);
    background-color: rgba(var(--mud-palette-warning-rgb), .12);
}

.mdd-note--danger {
    color: var(--mud-palette-error-darken);
    background-color: rgba(var(--mud-palette-error-rgb), .1);
}

.mdd-foot {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    font-size: .75rem;
    line-height: 1.45;
    color: var(--mud-palette-text-secondary);
}

.mdd-foot .mud-icon-root { flex: 0 0 auto; font-size: 1rem; }

.mdd-recorded { font-size: .75rem; color: var(--mud-palette-text-secondary); }

.mdd-recorded b { font-weight: 600; color: var(--mud-palette-text-primary); }

/* The floating chat button sits over the bottom right corner, where a dialog's buttons are. */
body:has(.mdd) .chat-fab-button { display: none; }

/* ------------------------------------------------------------------ a question with the act's mark */

.mdd-ask { display: flex; align-items: flex-start; gap: 14px; }

.mdd-ask__mark {
    display: inline-flex;
    flex: 0 0 auto;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    color: var(--mud-palette-primary);
    background-color: rgba(var(--mud-palette-primary-rgb), .1);
}

.mdd-ask__mark--error { color: var(--mud-palette-error); background-color: rgba(var(--mud-palette-error-rgb), .1); }

.mdd-ask__mark--warning { color: var(--mud-palette-warning-darken); background-color: rgba(var(--mud-palette-warning-rgb), .14); }

.mdd-ask__text { min-width: 0; padding-top: 8px; }

/* ------------------------------------------------------------------ a choice of two or three, as tiles */

.mdd-choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 8px; }

.mdd-choice {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 10px;
    row-gap: 2px;
    padding: 10px 12px;
    border: 1px solid var(--mud-palette-lines-inputs);
    border-radius: 10px;
    cursor: pointer;
}

.mdd-choice:hover { background-color: var(--mud-palette-action-default-hover); }

.mdd-choice:focus-visible { outline: 2px solid var(--mud-palette-primary); outline-offset: 1px; }

.mdd-choice--selected {
    border: 2px solid var(--mud-palette-primary);
    padding: 9px 11px;
    background-color: rgba(var(--mud-palette-primary-rgb), .06);
}

.mdd-choice__icon { grid-row: span 2; color: var(--mud-palette-text-secondary); }

.mdd-choice--selected .mdd-choice__icon { color: var(--mud-palette-primary); }

.mdd-choice__title { font-weight: 700; }

.mdd-choice__text { font-size: .75rem; line-height: 1.4; color: var(--mud-palette-text-secondary); }

/* ------------------------------------------------------------------ before -> after, per field */

.mdd-changes { width: 100%; border-collapse: collapse; font-size: .8125rem; }

.mdd-changes td {
    padding: 5px 8px 5px 0;
    border-bottom: 1px solid var(--mud-palette-table-lines);
    vertical-align: top;
}

.mdd-changes tr:last-child td { border-bottom: none; }

.mdd-changes td:first-child { width: 130px; font-weight: 600; white-space: nowrap; }

.mdd-changes__before { color: var(--mud-palette-text-secondary); text-decoration: line-through; overflow-wrap: anywhere; }

.mdd-changes__arrow { margin: 0 6px; vertical-align: middle; color: var(--mud-palette-primary); }

.mdd-changes__after { font-weight: 700; overflow-wrap: anywhere; }

.mdd-changes__empty { font-style: italic; color: var(--mud-palette-text-secondary); }

/* ---------------------------------------------------------------- grids that read: Master Data Analysis */

/*
    A grid that reads shows its skeleton, not the rows of the last read under a thin bar: a search or a
    filter on a slow master data database left the old rows up for seconds, looking like the answer. While
    MudDataGrid reads it puts a loading row in the head; then the rows are hidden and the footer - one
    column's FooterTemplate holds the skeleton - stands where they were, the skeleton laid over the full
    width. The first read is the same, so the grids have no LoadingContent of their own. The page's own
    account of the newest load (mda-grid--busy) holds it too: two overlapping loads end the grid's loading
    row when the older one lands.
*/
.mda-reloading-grid .mud-table-container { position: relative; }

.mda-reloading-grid tfoot.mud-table-foot { display: none; }

.mda-reloading-grid:has(> .mud-table-container thead .mud-table-loading) > .mud-table-container > .mud-drop-container > .mud-table-root > tbody > tr,
.mda-reloading-grid:has(> .mud-table-container thead .mud-table-loading) > .mud-table-container > .mud-table-root > tbody > tr,
.mda-reloading-grid.mda-grid--busy > .mud-table-container > .mud-drop-container > .mud-table-root > tbody > tr,
.mda-reloading-grid.mda-grid--busy > .mud-table-container > .mud-table-root > tbody > tr { display: none; }

.mda-reloading-grid:has(> .mud-table-container thead .mud-table-loading) tfoot.mud-table-foot,
.mda-reloading-grid.mda-grid--busy tfoot.mud-table-foot { display: table-footer-group; }

.mda-reloading-grid:has(> .mud-table-container thead .mud-table-loading) tfoot.mud-table-foot > tr,
.mda-reloading-grid.mda-grid--busy tfoot.mud-table-foot > tr { height: var(--mda-reload-h, 472px); }

.mda-reloading-grid tfoot.mud-table-foot td { padding: 0; border: 0; vertical-align: top; }

.mda-reload-sk { position: absolute; left: 0; right: 0; }