/* Valuta, Grupper and Malhotell, the dialogs they open, and the account type interval table dialog. */

/* Valuta: a row picks the currency the chart and the month table below show. */
.currency-grid .mud-table-body .mud-table-row {
    cursor: pointer;
}

.currency-grid .mud-table-body .mud-table-row.is-selected > td {
    background-color: var(--mud-palette-primary-hover);
}

.currency-grid .mud-table-body .mud-table-row.is-selected > td:first-child {
    box-shadow: inset 3px 0 0 var(--mud-palette-primary);
}

.currency-code {
    font-weight: 600;
}

/* The table keeps to about eight rows and scrolls inside, so the chart under it stays in view. */
.currency-grid .mud-table-container {
    max-height: clamp(160px, 28vh, 360px);
}

/* "Kurser i" and the base currency's autocomplete, with an icon laid over the field's left padding. */
.currency-base {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 8px;
}

.currency-base__label {
    color: var(--mud-palette-text-secondary);
    font-size: .8125rem;
    white-space: nowrap;
}

.currency-base__field {
    position: relative;
    width: 250px;
}

.currency-base__icon {
    position: absolute;
    z-index: 1;
    top: 50%;
    left: 10px;
    color: var(--mud-palette-text-secondary);
    font-size: 19px;
    pointer-events: none;
    transform: translateY(-50%);
}

.currency-base .mud-input-control {
    margin: 0;
}

.currency-base .mud-input {
    font-size: .875rem;
}

.currency-base .mud-input-slot {
    padding-left: 36px !important;
}

/* The list grows past the field so a name stays on one line, up to a cap. Important: the popover's script
   writes max-width: none inline. */
.currency-base-list {
    max-width: 380px !important;
}

.currency-option {
    white-space: nowrap;
}

.currency-option strong {
    display: inline-block;
    min-width: 40px;
    font-weight: 600;
}

/* The pair the tabs show and the chart's range, on the tab row. */
.currency-detail__head {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-end;
    gap: 6px 16px;
    margin-left: auto;
    padding: 4px 12px;
}

.currency-detail__pair {
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
    font-size: .8125rem;
}

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

/* The chart takes the panel's height; on a short window, where the page scrolls instead, a height of its own. */
.currency-chart {
    padding: 16px 16px 8px;
}

.currency-chart .ms-chart {
    flex: 1 1 0;
    min-height: 200px;
}

.currency-count {
    color: var(--mud-palette-text-secondary);
    font-size: .8125rem;
}

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

/* The session's period in the month table, marked like the chosen currency above and tagged. */
.currency-months .mud-table-body .mud-table-row.is-current > td {
    background-color: var(--mud-palette-primary-hover);
    font-weight: 600;
}

.currency-months .mud-table-body .mud-table-row.is-current > td:first-child {
    box-shadow: inset 3px 0 0 var(--mud-palette-primary);
}

/* A column title that explains itself on hover, with a quiet mark saying so. */
.currency-head {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    cursor: help;
}

.currency-head .material-symbols-outlined {
    color: var(--ms-ink-3);
    font-size: 14px;
}

.currency-none,
.templates-none {
    color: var(--mud-palette-text-secondary);
}

/* Grupper and Malhotell: a row opens its dialog. */
.groupings-grid .mud-table-body .mud-table-row,
.templates-grid .mud-table-body .mud-table-row {
    cursor: pointer;
}

/* The grouping dialog: the name, then the companies to pick from. */
.grouping-dialog {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.grouping-dialog__name {
    max-width: 420px;
}

.grouping-dialog__tools {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: -8px;
}

.grouping-dialog__count {
    color: var(--mud-palette-text-secondary);
    font-size: .8125rem;
}

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

/* The interval table dialogs size to their content, so they are given a width of their own. */
.interval-dialog {
    display: flex;
    flex-direction: column;
    gap: 14px;
    width: min(860px, 88vw);
}

.interval-dialog--compact {
    width: min(640px, 88vw);
}

.mud-form.interval-dialog__fields {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
    gap: 14px 16px;
}

@media (max-width: 700px) {
    .mud-form.interval-dialog__fields {
        grid-template-columns: minmax(0, 1fr);
    }
}

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

.interval-dialog__count {
    margin-left: auto;
}

/* The interval the save stopped at, until the next save: the row is washed, the message above says why. */
.interval-dialog__grid .mud-table-body .mud-table-row.interval-dialog__row--invalid > td {
    background-color: color-mix(in srgb, var(--mud-palette-error) 10%, transparent);
}