/* Saldobalanse (/accounts), and the overlay of figures it opens beside a cell. Grid rows are plain markup
   rather than components, since the grid renders one of each per row. */

.acc-loading {
    display: flex;
    justify-content: center;
    padding: 80px 0;
}

/* The account number: opens the account card. */
.acc-link {
    color: var(--mud-palette-primary);
    font-weight: 500;
    cursor: pointer;
}

.acc-link:hover {
    text-decoration: underline;
}

/* A figure is a button filling its cell, so the whole cell opens the overlay. MudBlazor pads cells from a far
   more specific rule. */
.mud-table-cell.acc-value {
    padding: 0 !important;
}

.mud-table-cell.acc-value.acc-value--editing {
    padding: 4px 8px !important;
}

.acc-value__button {
    padding: 6px 12px;
    text-align: right;
    white-space: nowrap;
    cursor: pointer;
}

/* Like a link: the row already shows where the pointer is, so the figure itself only changes colour. */
.acc-value:hover .acc-value__button {
    color: var(--mud-palette-primary);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* The Saldobalanse grids and the company accounts dialog virtualize, which places rows by one height: every row
   stays on one line, a long name ends in an ellipsis, and the columns keep the widths their ColGroup gives them. */
.acc-grid table {
    table-layout: fixed;
}

.acc-grid td {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* Until its first rows arrive the grid sums nothing; the footer keeps its height so nothing moves when they do. */
.acc-grid--loading tfoot .mud-table-cell {
    visibility: hidden;
}

.acc-grid td > span[title] {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
}

.acc-alt-picker {
    min-width: 170px;
}

/* Room for the whole placeholder, which names the three things the search looks in. */
.acc-companies__search {
    width: min(380px, 100%);
}

.acc-edit-figure {
    display: flex;
    justify-content: flex-end;
}

/* ---- Creating the account plan (CreateAccountPlanWizard) ---- */

.acc-plan__head {
    margin-bottom: 16px;
}

.acc-plan__title {
    margin: 0;
    color: var(--mud-palette-text-primary);
    font-family: var(--ms-font-ui);
    font-size: 1.0625rem;
    font-weight: 600;
}

.acc-plan__sub {
    margin: 4px 0 0;
    color: var(--mud-palette-text-secondary);
    font-size: .875rem;
}

/* The ways to choose between, two to a row where there is room. */
.ms-radio-group.acc-plan__options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

@media (max-width: 767px) {
    .ms-radio-group.acc-plan__options {
        grid-template-columns: 1fr;
    }
}

.acc-plan__more {
    margin: 20px 0 8px;
    color: var(--mud-palette-text-secondary);
    font-size: .8125rem;
    font-weight: 600;
}

/* One way of creating the plan, filled in. As wide as whatever holds it: the wizard's card or the dialog. */
.acc-plan__step {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.acc-plan__intro {
    margin: 0;
    color: var(--mud-palette-text-primary);
}

/* A row per plan: MudRadioGroup lays its content out as a wrapping row. */
.acc-plan__plan {
    flex: 1 0 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 4px 0;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.acc-plan__plan:last-child {
    border-bottom: 0;
}

/* One choice per line. Matches MudBlazor's specificity, whose flex-flow would otherwise lay them in a row. */
.acc-plan__values.mud-input-control .mud-radio-group {
    flex-flow: column;
    align-items: flex-start;
}

.acc-plan__hint {
    margin-left: 8px;
    color: var(--mud-palette-text-secondary);
    font-size: .8125rem;
}

/* Under a kept value in the import preview: what the file said instead. */
.acc-plan__in-file {
    color: var(--mud-palette-text-secondary);
    font-size: .75rem;
}

.acc-plan__count {
    margin-left: 8px;
    color: var(--mud-palette-text-secondary);
    font-size: .8125rem;
}

/* Typing in accounts: the add button, then how many and their sum. */
.acc-plan__tools {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.acc-plan__tally {
    display: flex;
    gap: 16px;
    margin-left: auto;
    color: var(--mud-palette-text-secondary);
    font-size: .8125rem;
}

.acc-plan__tally strong {
    color: var(--mud-palette-text-primary);
    font-weight: 600;
}

/* The row the last check stopped at: washed, while the message above says why. */
.acc-plan__grid .mud-table-body .mud-table-row.acc-plan__row--invalid > td {
    background-color: color-mix(in srgb, var(--mud-palette-error) 10%, transparent);
}

/* GenericAccountDialog sizes to its content, so the step needs a width to fill. */
.acc-plan-dialog {
    width: min(960px, 86vw);
}

/* The 12-month import's preview: a row per month, tight enough for the year to fit under the choices. */
.acc-months-summary td {
    padding-top: 5px;
    padding-bottom: 5px;
}

/* The file's accounts with a column per month: wider than the dialog, so the grid scrolls sideways under the
   account, which stays in view. */
.acc-months-dialog {
    width: min(1400px, 92vw);
}

.acc-months__search {
    width: min(320px, 100%);
}

.acc-months table {
    min-width: 1750px;
}

.acc-months .mud-table-root .mud-table-cell:nth-child(-n+2) {
    position: sticky;
    z-index: 1;
}

.acc-months .mud-table-root .mud-table-body .mud-table-cell:nth-child(-n+2) {
    background-color: var(--mud-palette-surface);
}

/* mud.css sets the cells of a fixed header static, sticking the header as one block. */
.acc-months .mud-table-root .mud-table-head .mud-table-cell:nth-child(-n+2),
.acc-months .mud-table-root .mud-table-foot .mud-table-cell:nth-child(-n+2) {
    position: sticky;
    z-index: 3;
}

.acc-months .mud-table-root .mud-table-cell:nth-child(1) {
    left: 0;
}

.acc-months .mud-table-root .mud-table-cell:nth-child(2) {
    left: 90px;
    box-shadow: inset -1px 0 var(--mud-palette-lines-default);
}

.acc-plan__actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--mud-palette-lines-default);
}

/* ---- Dialogs opened from Saldobalanse ---- */

/* ConsolidateAccountsDialog: the choices in a column, at a width that reads as a form. */
.acc-consolidate {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: min(560px, 80vw);
}

.acc-consolidate__fields {
    display: grid;
    grid-template-columns: 140px 1fr;
    gap: 16px;
    align-items: start;
}

.acc-consolidate__periods .mud-radio {
    display: flex;
    margin: 0;
}

.acc-consolidate__more .mud-expand-panel {
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--mud-default-borderradius);
}

.acc-consolidate__more .mud-expand-panel + .mud-expand-panel {
    margin-top: 8px;
}

.acc-consolidate__running {
    display: flex;
    flex-direction: column;
    gap: 6px;
    color: var(--mud-palette-text-secondary);
}

/* ConsolidationOverviewDialog. */
.acc-overview {
    display: flex;
    flex-direction: column;
    gap: 14px;
    width: min(920px, 90vw);
}

.acc-overview .mud-table-row.is-current > td {
    font-weight: 600;
}

/* The rates a month was translated with, under its row. */
.acc-overview__rates {
    padding: 4px 16px 12px 48px;
}

/* ConnectGroupAccountsDialog. Fixed-width boxes around the fields: a field's own Style sizes its input while its
   control still stretches. The loading state takes roughly the loaded height, so the dialog does not jump. */
.acc-connect__loading {
    height: 688px;
}

.acc-connect__mode {
    min-height: 48px;
}

.acc-connect__table {
    width: 360px;
}

.acc-connect__company {
    width: 400px;
}

.acc-connect__search {
    width: 260px;
}

.acc-connect__count {
    display: block;
    padding-top: 8px;
    text-align: right;
}

/* The grid in AccountDetailsDialog: the window less the dialog around it, so only the rows scroll and the
   header and pager stay in view, with a floor that keeps it usable when there is no room for that. */
.account-details-grid .mud-table-container {
    height: max(280px, calc(100vh - 420px));
}

/* ---- The overlay of figures (AccountValuesOverlay) ---- */

/* The figure whose overlay is open; marked by the script, which knows which of the row's figures it was. */
.acc-value__button.is-open {
    color: var(--mud-palette-primary);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Dropped from the clicked figure by positionAccountValuesOverlay, hidden until placed. One line throughout:
   the script measures it at its natural width, and only a window narrower than that cuts the title short. */
.account-values-overlay {
    --avo-caret: 7px;
    --avo-pad: 12px;
    position: fixed;
    left: 0;
    top: 0;
    z-index: var(--mud-zindex-appbar);
    display: flex;
    flex-direction: column;
    width: max-content;
    min-width: 220px;
    max-width: calc(100vw - 16px);
    visibility: hidden;
    border: 1px solid var(--ms-line-strong);
    border-radius: var(--ms-radius);
    background-color: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    box-shadow: var(--ms-shadow-pop);
}

.account-values-overlay.is-placed {
    visibility: visible;
    animation: avo-in 120ms ease-out;
}

/* MudBlazor's dialog animation holds its last frame, and an element holding a transform places fixed content against
   itself rather than the window: the overlay would land off the figure and be clipped at the dialog's edge. A dialog
   that holds the overlay lets go of the last frame once it has opened; that frame is the dialog as it stands anyway. */
.mud-dialog.acc-overlay-host {
    animation-fill-mode: backwards;
}

@keyframes avo-in {
    from {
        opacity: 0;
        transform: translateY(var(--avo-shift, -4px)) scale(.97);
    }
}

@media (prefers-reduced-motion: reduce) {
    .account-values-overlay.is-placed {
        animation: none;
    }
}

/* A square turned on its corner, half of it showing past the edge that faces the figure; it shares the
   overlay's border and fill so the two read as one shape. Hidden when there was no room on either side. */
.avo-caret {
    position: absolute;
    left: var(--avo-caret-x, 50%);
    width: calc(var(--avo-caret) * 2);
    height: calc(var(--avo-caret) * 2);
    margin-left: calc(var(--avo-caret) * -1);
    border: 1px solid var(--ms-line-strong);
    background-color: var(--mud-palette-surface);
    transform: rotate(45deg);
    display: none;
}

.account-values-overlay.is-below .avo-caret {
    display: block;
    top: calc(var(--avo-caret) * -1 - 1px);
    border-right: 0;
    border-bottom: 0;
    border-top-left-radius: 3px;
}

/* Over the row instead: the caret sits on the bottom edge. */
.account-values-overlay.is-above .avo-caret {
    display: block;
    bottom: calc(var(--avo-caret) * -1 - 1px);
    border-left: 0;
    border-top: 0;
    border-bottom-right-radius: 3px;
}

/* Above the caret, so a row's hover fill is not cut by the caret's half inside the box. */
.avo-head,
.avo-body {
    position: relative;
    z-index: 1;
}

.avo-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 6px 8px var(--avo-pad);
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.avo-title {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    font-family: var(--ms-font-ui);
    font-size: .875rem;
    font-weight: 600;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.avo-title__number {
    color: var(--mud-palette-text-secondary);
    font-variant-numeric: tabular-nums;
}

.avo-close {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    padding: 0;
    border: 0;
    border-radius: var(--ms-radius-sm);
    background: none;
    color: var(--mud-palette-text-secondary);
    cursor: pointer;
}

.avo-close .material-symbols-outlined {
    font-size: 18px;
}

.avo-close:hover {
    background-color: var(--mud-palette-action-default-hover);
    color: var(--mud-palette-text-primary);
}

.avo-close:focus-visible,
.avo-row:focus-visible {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: -2px;
}

/* Every label in one column and every value in another; each row spans both through a subgrid, so it has a box
   to highlight. The script lines the value column up under the figure that was clicked. Scrolls on its own when
   capped, so the title stays in view. */
.avo-body {
    display: grid;
    grid-template-columns: auto auto;
    column-gap: 32px;
    min-height: 0;
    overflow-y: auto;
    padding: 4px 0;
}

.avo-row {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: subgrid;
    align-items: baseline;
    padding: 6px var(--avo-pad);
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    font-size: .875rem;
    text-align: left;
    white-space: nowrap;
    cursor: pointer;
}

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

.avo-row:hover .avo-label {
    color: var(--mud-palette-primary);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.avo-empty {
    grid-column: 1 / -1;
    padding: 6px var(--avo-pad);
    color: var(--mud-palette-text-secondary);
    font-size: .875rem;
    white-space: nowrap;
}

.avo-value {
    font-family: var(--ms-font-data);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    text-align: right;
}