/* Styles for TransactionLogCard ("Transaction log"). Shipped as a plain
   (non-isolated) stylesheet and linked from index.html — like
   money-by-label-card.css — because these classes sit on MudBlazor components
   (MudText, MudAvatar), whose rendered elements don't carry this component's
   scoped-CSS attribute, so .razor.css isolation can't reach them. Everything is
   nested under .fm-txlog-card to avoid collisions.

   The money green/red tokens mirror money-by-label-card.css and flip under
   prefers-color-scheme: dark, which is how this app flips theme. */
.fm-txlog-card {
    --fm-pos: #2E7D32;
    --fm-neg: #C62828;
    --fm-tint-pos: rgba(46, 125, 50, 0.15);
    --fm-tint-neg: rgba(198, 40, 40, 0.13);
}

@media (prefers-color-scheme: dark) {
    .fm-txlog-card {
        --fm-pos: #66BB6A;
        --fm-neg: #EF5350;
        --fm-tint-pos: rgba(102, 187, 106, 0.18);
        --fm-tint-neg: rgba(239, 83, 80, 0.16);
    }
}

/* Tabular figures keep amounts aligned across rows. */
.fm-txlog-card .fm-amount {
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Regular-weight card title (the app's h6 ships at 500, too heavy vs the design). */
.fm-txlog-card .fm-title {
    font-weight: 400;
}

.fm-txlog-card .fm-pos {
    color: var(--fm-pos);
}

.fm-txlog-card .fm-neg {
    color: var(--fm-neg);
}

.fm-txlog-card .fm-name {
    font-weight: 500;
}

/* Neutral muted text — the app's MudTheme paints Color.Secondary as a gold brand
   accent, so muted grey comes from the palette's text-secondary token instead. */
.fm-txlog-card .fm-muted {
    color: var(--mud-palette-text-secondary);
}

/* Row layout — leading chip gap mirrors the labels card density. */
.fm-txlog-card .fm-row {
    gap: 12px;
    width: 100%;
}

/* Denser rows — trim the stock MudListItem vertical padding. */
.fm-txlog-card .fm-list-item {
    padding-top: 3px;
    padding-bottom: 3px;
}

/* Leading icon chip sized to span the full two-line row. */
.fm-txlog-card .fm-chip {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
}

/* Leading icon chip — tinted square behind a money-coloured icon. */
.fm-txlog-card .fm-tint-pos {
    background-color: var(--fm-tint-pos);
    color: var(--fm-pos);
}

.fm-txlog-card .fm-tint-neg {
    background-color: var(--fm-tint-neg);
    color: var(--fm-neg);
}

/* Empty / error states — centred stack filling the card body. */
.fm-txlog-card .fm-state {
    height: 100%;
    min-height: 180px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 16px;
    color: var(--mud-palette-text-secondary);
}

/* Soft circular backdrop behind the empty-state glyph. */
.fm-txlog-card .fm-state-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--mud-palette-action-default-hover);
}