/*
 * Badges, the amount block and row highlighting.
 *
 * Meanings are fixed project-wide: a gain is green, a loss or a refusal is the orange-red kept
 * away from the burgundy accent, attention and due dates are orange, a neutral move is blue.
 * The accent colour is never used for figures — it argues with the amounts.
 */

.app-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-0);
    padding: var(--inset-badge-y) var(--inset-badge-x);
    border-radius: var(--radius-badge);
    background: var(--surface-2);
    color: var(--text-2);
    font-size: var(--fs-caption);
    line-height: var(--lh-tight);
    white-space: nowrap;
}

.app-badge--positive {
    background: var(--scale-positive-1);
    color: var(--positive);
}

.app-badge--negative {
    background: var(--scale-negative-1);
    color: var(--negative);
}

.app-badge--warn {
    background: var(--scale-warn-1);
    color: var(--warn);
}

.app-badge--neutral {
    background: var(--scale-neutral-1);
    color: var(--neutral);
}

/* The currency of a block, said once and meant to be seen: every figure inside is in it. */
.app-badge--currency {
    background: var(--accent-soft-2);
    color: var(--accent);
    font-weight: var(--fw-semibold);
    font-variant-numeric: var(--numeric);
}

/*
 * A badge that stands for a thing rather than for a state: which group a row belongs to.
 *
 * A colour rather than another grey pill — a row of identical badges has to be read one at a
 * time (core.md §17.3). app\ui\Badge picks the shade by identifier, so one thing keeps one
 * colour on every screen. The palette carries no meaning: the meanings above are fixed.
 */
.app-badge--tag {
    font-weight: var(--fw-semibold);
}

/*
 * The heading of a group of cards: the same badge, at the size of the heading it replaces.
 *
 * A badge is a caption inside a row of data and takes the caption size there. Standing alone
 * above a row of cards it is the heading, and a heading that shrank when it became a badge would
 * read as a demotion of the group it names.
 */
.app-badge--lg {
    padding: var(--inset-badge-lg-y) var(--inset-badge-lg-x);
    font-size: var(--fs-section);
}

/* A state said in a sentence (Е.Б1 Б3): wraps inside its column instead of being cut off on a phone. */
.app-badge--wrap {
    white-space: normal;
}

.app-badge--tag-1 {
    background: var(--tag-1-bg);
    color: var(--tag-1-fg);
}

.app-badge--tag-2 {
    background: var(--tag-2-bg);
    color: var(--tag-2-fg);
}

.app-badge--tag-3 {
    background: var(--tag-3-bg);
    color: var(--tag-3-fg);
}

.app-badge--tag-4 {
    background: var(--tag-4-bg);
    color: var(--tag-4-fg);
}

.app-badge--tag-5 {
    background: var(--tag-5-bg);
    color: var(--tag-5-fg);
}

.app-badge--tag-6 {
    background: var(--tag-6-bg);
    color: var(--tag-6-fg);
}

.app-badge--tag-7 {
    background: var(--tag-7-bg);
    color: var(--tag-7-fg);
}

.app-badge--tag-8 {
    background: var(--tag-8-bg);
    color: var(--tag-8-fg);
}

.app-badge--archived {
    background: var(--row-archived);
    color: var(--text-4);
}

/* --- Amount -------------------------------------------------------------------------- */

/*
 * An amount is three cells side by side: the approximation mark, the figure, right aligned, and
 * the currency code in a column of its own. The gap comes from the layout, never from a space in
 * the markup, so the code cannot drift from row to row.
 */
.app-amount {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    font-variant-numeric: var(--numeric);
    white-space: nowrap;
}

.app-amount__value {
    text-align: right;
}

/*
 * The gap between the figure and its currency code.
 *
 * The three cells are siblings rather than a wrapper around them, and the markup carries no
 * space between them on purpose — a space would be a character the browser is free to break
 * a line at, and the code would drift from row to row. So the gap is drawn here.
 *
 * Inside `.app-amount-list` it is taken back: there the three cells are grid tracks and the
 * grid supplies the gap, and two gaps would push the code out of its column.
 */
.app-amount__currency {
    margin-left: var(--space-1);
    color: var(--text-3);
    font-size: var(--fs-caption);
}

.app-amount-list .app-amount__currency {
    margin-left: 0;
}

/*
 * Colour carries the sign; no plus is ever printed, and no word repeats what colour says.
 * The modifier is matched on its own rather than paired with the figure cell: the same one
 * goes on the approximation mark, which must read as part of the figure it qualifies.
 */
.app-amount--positive {
    color: var(--positive);
}

.app-amount--negative {
    color: var(--negative);
}

/* An empty figure prints a dash: "no amount at all" and "the amount is zero" are different
   statements. */
.app-amount--empty {
    color: var(--text-4);
}

/*
 * A column of amounts.
 *
 * Three tracks, not a line of text: the approximation mark, the figure and the currency code
 * each keep a column of their own, so none of them shifts from row to row — which is exactly
 * what core.md §3.7 forbids. The mark track keeps its width even where there is no
 * mark, so an exact row and an approximate one still line up.
 */
.app-amount-list {
    display: grid;
    grid-template-columns: max-content max-content max-content;
    justify-content: end;
    align-items: center;
    gap: var(--inset-row) var(--space-2);
}

/* In a table cell the block ends at the right edge of its column, under its own heading. */
.app-amount-list--start {
    justify-content: end;
}

/*
 * The mark cell owns nothing but its column. Size, weight and colour arrive as modifiers shared
 * with the figure, so the mark is always of the same type as the number it stands before and can
 * never be misread as a minus.
 *
 * min-width, not width: the reserved character keeps an exact row and an approximate one aligned,
 * while a mark longer than one character widens the track instead of spilling over the figure.
 * The unit is ch, so the reservation follows whatever size the modifiers set.
 */
.app-amount__mark {
    min-width: 1ch;
    text-align: right;
}

.app-amount--big {
    font-size: var(--fs-value);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-tight);
}

/* Nothing at all, as opposed to a figure that happens to be zero. */
.app-amount__dash {
    color: var(--text-4);
}

/* --- Row highlighting ---------------------------------------------------------------- */

/*
 * Four highlights only. None of them touches the colour of a figure: a fill that recoloured the
 * numbers would take rise and fall with it (core.md §5.4).
 */
.app-row--new {
    background: var(--row-new);
}

/* The stripe sits on the first cell: a pseudo-element on a <tr> becomes an extra cell and shifts the row. */
.app-row--new > :first-child {
    box-shadow: inset var(--stripe) 0 0 var(--accent);
}

.app-row--due {
    background: var(--row-due);
}

.app-row--event {
    background: var(--row-event);
}

.app-row--archived {
    background: var(--row-archived);
    color: var(--text-4);
}

/*
 * A row of badges under the block it belongs to: a continuation, not a new section, so the
 * caption is part of the row and the gap above is the small one.
 */
.app-badges--under {
    align-items: center;
    gap: var(--space-2);
    /* Continuation of the block above, so the step is the small one. */
    padding-top: var(--space-1);
}

/* Something the owner has not read yet. Not red: red is what went wrong, and a run of
   failed attempts is something to read rather than something broken. */
.app-badge--unread {
    border-color: var(--accent-border);
    background: var(--accent-soft-2);
    color: var(--accent);
    font-weight: var(--fw-semibold);
}

/*
 * The PRO corner: a small orange triangle in the top right corner of a layout tile or of the XLSX
 * button a guest cannot use (the old site's marker, KINV-121; no «PRO» word beside the name, the
 * word took the room of the tile). The element clips it to its own rounded corner.
 */
.app-pro-corner {
    position: relative;
    overflow: hidden;
}

.app-pro-corner::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 0;
    height: 0;
    border-top: var(--space-3) solid var(--warn);
    border-left: var(--space-3) solid transparent;
}