/* Rapporter (/reports). */

/* The view switch on the left of its row, search and the category filter on the right. */
.mud-tabs.rep-tabs .mud-tabs-tabbar .mud-tabs-tabbar-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}

/* MudBlazor stretches the tab buttons' box across the row, which would push the tools onto a line of their own. */
.mud-tabs.rep-tabs .mud-tabs-tabbar-content {
    flex: 0 0 auto;
    width: auto;
}

.mud-tabs.rep-tabs .mud-tabs-header {
    flex: 1 1 auto;
}

.rep-tools {
    display: flex;
    flex: 1 1 auto;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 8px 12px;
}

.rep-tools > .mud-input-control {
    flex: 0 1 380px;
    min-width: 220px;
    margin: 0;
}

/* Space between the switch row and what it shows. */
.mud-tabs.rep-tabs .mud-tabs-panels {
    padding-top: 16px;
}

/* The category filter: a titled list under its button, each category with how many reports it holds. */
.rep-filter {
    width: 260px;
    padding: 4px 0 6px;
}

.rep-filter__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 14px 8px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
    margin-bottom: 4px;
}

.rep-filter__title {
    color: var(--mud-palette-text-primary);
    font-family: var(--ms-font-ui);
    font-size: .8125rem;
    font-weight: 600;
}

.rep-filter__clear {
    padding: 0;
    border: 0;
    background: none;
    color: var(--mud-palette-primary);
    font: inherit;
    font-size: .8125rem;
    cursor: pointer;
}

.rep-filter__clear:hover:not(:disabled) {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.rep-filter__clear:disabled {
    color: var(--mud-palette-text-disabled);
    cursor: default;
}

.rep-filter__option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 14px 0 6px;
}

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

.rep-filter__option .mud-input-control {
    flex: 1 1 auto;
    margin: 0;
}

.rep-filter__option .mud-checkbox .mud-typography {
    font-size: .875rem;
}

.rep-filter__count {
    color: var(--mud-palette-text-secondary);
    font-family: var(--ms-font-data);
    font-size: .8125rem;
    font-variant-numeric: tabular-nums;
}

/* ---- Aktive: a card per category ---- */

.rep-list {
    display: flex;
    flex-direction: column;
}

.rep-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 240px auto;
    align-items: center;
    gap: 16px;
    padding: 12px 0;
    border-top: 1px solid var(--mud-palette-lines-default);
}

.rep-item:first-child {
    border-top: 0;
    padding-top: 2px;
}

.rep-item__name {
    color: var(--mud-palette-primary);
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
}

.rep-item__name:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.rep-item__desc {
    margin-top: 2px;
    color: var(--mud-palette-text-secondary);
    font-size: .875rem;
}

.rep-item__meta {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    color: var(--mud-palette-text-secondary);
    font-size: .8125rem;
}

.rep-item__actions {
    display: flex;
    align-items: center;
    gap: 2px;
}

@media (max-width: 767px) {
    .rep-item {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .rep-item__meta {
        grid-column: 1;
        grid-row: 2;
    }
}

/* Who else uses the report: a link when there is someone to list. */
.rep-usage {
    padding: 0;
    border: 0;
    background: none;
    color: var(--mud-palette-primary);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.rep-usage:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* ---- Report warnings (ReportWarningsPanel, in the editor and the print dialog) ---- */

/* The editor's strip between its toolbar and the grid. */
.ms-issues.warnings-panel {
    padding: 8px 14px;
}

/* ---- The editor's filter drawer (ReportFilterPanel) ---- */

/* Over the right edge, above the transparent overlay that catches the click away. */
.rep-filter-drawer {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 1401;
    width: min(420px, 100vw);
    height: 100vh;
    overflow-y: auto;
    border-left: 1px solid var(--mud-palette-lines-default);
    background-color: var(--mud-palette-surface);
    box-shadow: var(--ms-shadow-pop);
}

.rep-filter-drawer__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 12px 12px 20px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.rep-filter-drawer__body {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px 20px;
}

.rep-filter-drawer__text {
    margin: 0;
    color: var(--mud-palette-text-secondary);
    font-size: .875rem;
}

/* ---- Dialogs ---- */

/* Rediger detaljer, Lagre som kopi and the details step of Ny rapport: a short form at a width that reads as one. */
.rep-form {
    width: min(480px, 86vw);
}

.mud-form.rep-form__fields {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* Ny rapport: one size through its steps, so the dialog does not jump between them. */
.rep-create {
    display: flex;
    flex-direction: column;
    gap: 14px;
    width: min(720px, 90vw);
    min-height: 420px;
}

/* The pick grids in Ny rapport are virtualized, which assumes one row height: every row stays on one line, the
   text ends in an ellipsis, and the whole row is what picks. */
.rep-pick table {
    table-layout: fixed;
}

.rep-pick td {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rep-pick .mud-table-body .mud-table-row {
    cursor: pointer;
}

/* Ny linje / Rediger linje: a short form, or for an account line the form over a list to tick accounts in. */
.rep-line-dialog {
    display: flex;
    flex-direction: column;
    gap: 14px;
    width: min(560px, 88vw);
}

.rep-line-dialog--accounts {
    width: min(920px, 90vw);
}

.mud-form.rep-line-dialog__fields {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.rep-line-dialog__tools {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 20px;
}

.rep-line-dialog__tools > .mud-input-control {
    flex: 1 1 280px;
    margin: 0;
}

.rep-line-dialog__summary {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 20px;
    color: var(--mud-palette-text-secondary);
    font-size: .875rem;
}

.rep-line-dialog__summary strong {
    color: var(--mud-palette-text-primary);
    font-weight: 600;
}

.rep-line-dialog__sum {
    font-family: var(--ms-font-data);
    font-variant-numeric: tabular-nums;
}

.rep-line-dialog__hint {
    flex-basis: 100%;
}

/* Virtualized, so the ColGroup's widths hold and every row stays one line high. */
.rep-account-pick table {
    table-layout: fixed;
}

.rep-account-pick td,
.rep-account-pick th {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Taken in by an interval in the field, so the box is locked. */
.rep-account-pick .mud-table-row.is-covered > td {
    background-color: color-mix(in srgb, var(--mud-palette-primary) 8%, transparent);
}

/* The symbols a formula may use, in two columns under the field. */
.rep-formula-help {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: baseline;
    gap: 6px 14px;
    padding: 12px 14px;
    border-radius: var(--mud-default-borderradius);
    background-color: var(--ms-surface-2);
    color: var(--mud-palette-text-secondary);
    font-size: .8125rem;
}

.rep-formula-help__symbol {
    min-width: 1.75rem;
    padding: 1px 6px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 4px;
    background-color: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    font-family: var(--ms-font-data);
    font-weight: 600;
    text-align: center;
}

/* Eksporter's front page: the warnings, the format, the views it opens, and the preview apart from them. */
.rep-export {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.rep-export__text {
    margin: 8px 0 0;
    color: var(--mud-palette-text-secondary);
}

/* Kolonneoppsett: one size through the create steps; in edit, a list of the report's setups. */
.rep-collections {
    display: flex;
    flex-direction: column;
    gap: 14px;
    width: min(760px, 90vw);
}

.rep-collections__list {
    display: flex;
    flex-direction: column;
    max-height: min(560px, 62vh);
    overflow-y: auto;
}

.rep-collections__item {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 12px 12px 12px 14px;
    border-top: 1px solid var(--mud-palette-lines-default);
    border-left: 3px solid transparent;
}

.rep-collections__item:first-child {
    border-top: 0;
}

.rep-collections__item.is-current {
    border-left-color: var(--mud-palette-success);
    background-color: color-mix(in srgb, var(--mud-palette-success) 6%, transparent);
}

.rep-collections__head {
    display: flex;
    align-items: center;
    gap: 10px;
}

.rep-collections__head > .mud-input-control {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
}

.rep-collections__actions {
    display: flex;
    flex: 0 0 auto;
    gap: 2px;
}

.rep-collections__delete:hover:not(:disabled) {
    color: var(--mud-palette-error);
}

.rep-collections__columns {
    color: var(--mud-palette-text-secondary);
    font-size: .8125rem;
    overflow-wrap: anywhere;
}

.rep-collections__name {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 10px;
}

/* The editor's account lists (Kontoer on a line, a cell's breakdown). Virtualized when long, so every row stays
   on one line at the height the dialog says, the text ending in an ellipsis. */
.rep-breakdown {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: min(860px, 88vw);
}

.rep-breakdown--narrow {
    width: min(640px, 88vw);
}

.rep-breakdown__text {
    margin: 0;
    color: var(--mud-palette-text-secondary);
    font-size: .875rem;
}

.rep-breakdown__grid table {
    table-layout: fixed;
}

.rep-breakdown__grid td,
.rep-breakdown__grid td > span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rep-breakdown__grid td > span {
    display: block;
}

.rep-breakdown__grid .mud-table-foot td {
    font-weight: 600;
}

.rep-usage-dialog {
    width: min(520px, 86vw);
}

.rep-usage-dialog__text {
    margin: 0 0 10px;
    color: var(--mud-palette-text-secondary);
}

.rep-usage-dialog__list {
    max-height: 420px;
    overflow-y: auto;
}

.rep-usage-dialog__name {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.rep-usage-dialog__name .material-symbols-outlined {
    color: var(--mud-palette-primary);
    font-size: 18px;
}

/* ---- Alle rapporter: the library grid ---- */

/* The widths come from the ColGroup only, so the rows that happen to be in the table cannot re-measure them.
   A fixed layout clips rather than reflows, so a cell's text ends in an ellipsis. */
.rep-grid table {
    table-layout: fixed;
}

.rep-grid td {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Virtualized: every row the height ReportsPage's LibraryRowHeight says. */
.rep-grid .mud-table-body .mud-table-row {
    height: 34px;
}

.rep-grid__name {
    color: var(--mud-palette-primary);
    font-weight: 500;
    text-decoration: none;
}

.rep-grid__name:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.rep-grid__muted {
    color: var(--mud-palette-text-secondary);
}

.mud-table-cell.rep-grid__actions {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    text-align: right;
}

/* Whether the report is on the viewpoint's list; a toggle for whoever may change it. */
.rep-active {
    display: inline-grid;
    place-items: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--mud-palette-action-default);
    cursor: pointer;
}

.rep-active.is-on {
    color: var(--mud-palette-primary);
}

.rep-active:hover:not(:disabled) {
    background-color: var(--mud-palette-action-default-hover);
}

.rep-active:disabled {
    cursor: default;
    opacity: .7;
}

.rep-active .material-symbols-outlined {
    font-size: 22px;
}