/*
    Transaction status badge + elapsed time badge styles
    Status reference: Figma nodes 3645:75857 (status chip) and 3531:66511 (variants)
    Timer reference: Figma node 3645:75855
*/
@import url('https://fonts.googleapis.com/css2?family=Lexend:wght@500;600&display=swap');

:root {
    --tsb-font-family: 'Lexend', 'Albert Sans', 'Segoe UI', sans-serif;
}

.tsb-badge {
    --tsb-bg: #eef2ff;
    --tsb-border: rgba(38, 76, 255, .18);
    --tsb-text: #0b1f3f;
    --tsb-dot: #2a4fff;
    --tsb-dot-soft: rgba(42, 79, 255, .18);
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .24rem .65rem;
    border-radius: 999px;
    border: 1px solid var(--tsb-border);
    background: var(--tsb-bg);
    color: var(--tsb-text);
    font-family: var(--tsb-font-family);
    font-weight: 600;
    font-size: .7rem;
    letter-spacing: .045em;
    text-transform: uppercase;
    line-height: 1.1;
    white-space: nowrap;
    vertical-align: middle;
    transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}

.tsb-badge::before {
    content: '';
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--tsb-dot);
    box-shadow: 0 0 0 3px var(--tsb-dot-soft);
    display: none;
}

.tsb-badge[data-dot="true"] {
    padding-left: .5rem;
}

.tsb-badge[data-dot="true"]::before {
    display: inline-block;
}

.tsb-badge.tsb-compact {
    padding: .18rem .55rem;
    font-size: .64rem;
    letter-spacing: .05em;
}

.conciliation-table .tsb-badge {
    font-size: .55rem;
    padding: .15rem .45rem;
    gap: .25rem;
    border-width: 1px;
    letter-spacing: .03em;
    max-width: 110px;
    flex-wrap: wrap;
    white-space: normal;
    text-align: center;
}

.conciliation-table .tsb-badge::before {
    width: 5px;
    height: 5px;
    box-shadow: 0 0 0 2px var(--tsb-dot-soft);
}

.tsb-badge.tsb-solid {
    border-color: transparent;
    background: var(--tsb-dot);
    color: #fff;
}

.tsb-badge.tsb-solid::before {
    background: #fff;
    box-shadow: 0 0 0 4px rgba(255, 255, 255, .25);
}

/* Group palettes */
.tsb-g1 {
    --tsb-bg: #e9efff;
    --tsb-border: rgba(62, 98, 255, .25);
    --tsb-text: #0a2153;
    --tsb-dot: #304dff;
    --tsb-dot-soft: rgba(48, 77, 255, .2);
}

.tsb-g2 {
    --tsb-bg: #f4f6f8;
    --tsb-border: rgba(105, 117, 138, .25);
    --tsb-text: #4a5668;
    --tsb-dot: #8c96ab;
    --tsb-dot-soft: rgba(140, 150, 171, .2);
}

.tsb-g3 {
    --tsb-bg: #fff0f2;
    --tsb-border: rgba(254, 93, 103, .35);
    --tsb-text: #8a1c1c;
    --tsb-dot: #fe5d67;
    --tsb-dot-soft: rgba(254, 93, 103, .18);
}

.tsb-g4 {
    --tsb-bg: #e6f2ff;
    --tsb-border: rgba(0, 82, 204, .28);
    --tsb-text: #003f73;
    --tsb-dot: #0e66ff;
    --tsb-dot-soft: rgba(14, 102, 255, .2);
}

.tsb-g5 {
    --tsb-bg: #e8fcf5;
    --tsb-border: rgba(6, 159, 119, .28);
    --tsb-text: #005e36;
    --tsb-dot: #06b37b;
    --tsb-dot-soft: rgba(6, 179, 123, .18);
}

.tsb-g6 {
    --tsb-bg: #fff6ec;
    --tsb-border: rgba(240, 136, 0, .3);
    --tsb-text: #8b3d00;
    --tsb-dot: #f28a00;
    --tsb-dot-soft: rgba(242, 138, 0, .18);
}

.tsb-g7 {
    --tsb-bg: #edeaff;
    --tsb-border: rgba(104, 81, 255, .3);
    --tsb-text: #28215f;
    --tsb-dot: #6750ff;
    --tsb-dot-soft: rgba(103, 80, 255, .18);
}

.tsb-g8 {
    --tsb-bg: #eefbe6;
    --tsb-border: rgba(92, 163, 15, .28);
    --tsb-text: #235c0b;
    --tsb-dot: #5ba300;
    --tsb-dot-soft: rgba(91, 163, 0, .18);
}

/* Special overrides */
.tsb-g4.tsb-s12 {
    --tsb-bg: #fff7e1;
    --tsb-border: rgba(255, 196, 0, .35);
    --tsb-text: #7a4d00;
    --tsb-dot: #ffc400;
    --tsb-dot-soft: rgba(255, 196, 0, .2);
}

.tsb-s5 {
    --tsb-bg: #fff1f2;
    --tsb-border: rgba(255, 86, 86, .4);
    --tsb-text: #8a1c1c;
    --tsb-dot: #ff5858;
    --tsb-dot-soft: rgba(255, 88, 88, .22);
}

.tsb-s7 {
    --tsb-bg: #e8efff;
    --tsb-border: rgba(42, 79, 255, .28);
    --tsb-text: #132a63;
    --tsb-dot: #4260ff;
    --tsb-dot-soft: rgba(66, 96, 255, .2);
}

.tsb-s9 {
    --tsb-bg: #ebfff6;
    --tsb-border: rgba(0, 160, 120, .32);
    --tsb-text: #055237;
    --tsb-dot: #00c58c;
    --tsb-dot-soft: rgba(0, 197, 140, .2);
}

/* Minute badge (tc.time.minuteBadge) */
.tc-minute-badge {
    --tc-minute-bg: #eef2ff;
    --tc-minute-border: rgba(38, 76, 255, .18);
    --tc-minute-text: #0b1f3f;
    --tc-minute-accent: #2a4fff;
    --tc-minute-accent-soft: rgba(42, 79, 255, .18);
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .3rem .8rem;
    border-radius: 999px;
    border: 1px solid var(--tc-minute-border);
    background: var(--tc-minute-bg);
    color: var(--tc-minute-text);
    font-family: var(--tsb-font-family);
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .03em;
    text-transform: uppercase;
    white-space: nowrap;
}

.tc-minute-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--tc-minute-accent);
    box-shadow: 0 0 0 4px var(--tc-minute-accent-soft);
    display: inline-block;
}

.tc-minute-icon {
    color: var(--tc-minute-accent);
    font-size: .85rem;
    line-height: 1;
}

.tc-minute-value {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
}

.tc-minute-number {
    font-size: .95rem;
    letter-spacing: .01em;
}

.tc-minute-unit {
    font-size: .62rem;
    letter-spacing: .15em;
    opacity: .7;
}

.tc-minute-badge.tc-minute-warn {
    --tc-minute-bg: #fff8eb;
    --tc-minute-border: rgba(242, 165, 22, .35);
    --tc-minute-text: #8b4e00;
    --tc-minute-accent: #f1a400;
    --tc-minute-accent-soft: rgba(241, 164, 0, .2);
}

.tc-minute-badge.tc-minute-danger {
    --tc-minute-bg: #fff1f2;
    --tc-minute-border: rgba(254, 93, 103, .35);
    --tc-minute-text: #811717;
    --tc-minute-accent: #fe5d67;
    --tc-minute-accent-soft: rgba(254, 93, 103, .2);
}

.tc-minute-badge.tc-minute-ok {
    --tc-minute-bg: #e8fcf5;
    --tc-minute-border: rgba(0, 168, 120, .28);
    --tc-minute-text: #005e36;
    --tc-minute-accent: #00a572;
    --tc-minute-accent-soft: rgba(0, 165, 114, .18);
}