/* 🏦 Казначейство — Apple-стиль (skill apple-design, власник 2026-07-19).
   Принципи: response на pointer-down (§1), spring-подібні криві лише на transform/opacity (§4,11),
   translucent chrome зі scroll-edge замість бордера (§12), типографіка size-specific tracking +
   tabular-nums (§15), reduced-motion/transparency/contrast (§14), ієрархія weight+size (§16).
   Токени теми (--bg-card, --text-*, --accent...) — спільні з рештою CRM, теми успадковуються. */

.trs { font-family: system-ui, -apple-system, 'Segoe UI', sans-serif; }
.trs * { -webkit-tap-highlight-color: transparent; }

/* ── Chrome: липкий напівпрозорий тулбар, контент скролиться ПІД ним (§12) ── */
.trs-chrome {
    position: sticky; top: 56px; z-index: 6;   /* під sticky-topbar */
    margin: -6px -4px 10px; padding: 8px 4px 10px;
    background: color-mix(in srgb, var(--bg-primary, #f6f7f6) 74%, transparent);
    -webkit-backdrop-filter: blur(18px) saturate(180%);
    backdrop-filter: blur(18px) saturate(180%);
}
/* scroll-edge: м'який градієнт-перехід замість жорсткої 1px межі */
.trs-chrome::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: -14px; height: 14px;
    pointer-events: none;
    background: linear-gradient(color-mix(in srgb, var(--bg-primary, #f6f7f6) 55%, transparent), transparent);
}

/* ── Сегмент-контрол вкладок (iOS): капсула, активна «пігулка» ── */
.trs-seg {
    display: inline-flex; gap: 2px; flex-wrap: wrap;
    background: color-mix(in srgb, var(--text-primary, #222) 7%, transparent);
    border-radius: 12px; padding: 3px;
}
.trs-seg-btn {
    appearance: none; border: 0; cursor: pointer;
    padding: 6px 13px; border-radius: 9px;
    font: 600 13px/1.2 inherit; letter-spacing: 0.005em;
    color: var(--text-secondary, #555); background: transparent;
    transition: transform 100ms ease-out, background 160ms ease, color 160ms ease, box-shadow 160ms ease;
}
.trs-seg-btn:hover { color: var(--text-primary, #222); }
.trs-seg-btn:active { transform: scale(0.96); }           /* §1: відгук на натиск, не на відпуск */
.trs-seg-btn.on {
    color: var(--text-primary, #222);
    background: var(--bg-card, #fff);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .12), 0 4px 14px rgba(0, 0, 0, .06);
}

/* ── Типографіка чисел (§15): великі суми — щільний leading, негативний tracking ── */
.trs-hero {
    font-size: clamp(1.45rem, 2.4vw, 2rem);
    font-weight: 800; line-height: 1.02; letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}
.trs-hero small { font-size: 0.5em; font-weight: 600; letter-spacing: 0; color: var(--text-muted, #888); }
.trs-num { font-variant-numeric: tabular-nums; }
.trs-label { font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-muted, #888); }

/* ── Поверхні: картки з м'якою глибиною; hover-elevation; :active-стиск ── */
.trs-card {
    background: var(--bg-card, #fff);
    border: 1px solid color-mix(in srgb, var(--text-primary, #000) 6%, transparent);
    border-radius: 13px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
    transition: transform 140ms cubic-bezier(0.32, 0.72, 0, 1), box-shadow 180ms ease;
    will-change: transform;
}
.trs-card.tap { cursor: pointer; }
.trs-card.tap:hover { box-shadow: 0 2px 6px rgba(0, 0, 0, .07), 0 8px 22px rgba(0, 0, 0, .05); }
.trs-card.tap:active { transform: scale(0.988); }

/* KPI-плитка: та сама поверхня + вибраний стан кільцем, без стрибка розмірів */
.trs-tile { flex: 1; min-width: 150px; padding: 11px 14px; user-select: none; }
.trs-tile.on { box-shadow: 0 0 0 2px var(--accent, #2e7d32) inset, 0 1px 2px rgba(0, 0, 0, .04); }

/* ── Кнопки/пілюлі/поля: капсули, миттєвий press ── */
.trs-btn {
    appearance: none; cursor: pointer;
    border: 1px solid color-mix(in srgb, var(--text-primary, #000) 12%, transparent);
    background: var(--bg-card, #fff); color: var(--text-primary, #222);
    border-radius: 999px; padding: 5px 12px;
    font: 600 12px/1.2 inherit;
    transition: transform 100ms ease-out, background 160ms ease, border-color 160ms ease;
}
.trs-btn:hover { border-color: color-mix(in srgb, var(--text-primary, #000) 26%, transparent); }
.trs-btn:active { transform: scale(0.95); }
.trs-btn.on { background: var(--accent, #2e7d32); border-color: var(--accent, #2e7d32); color: #fff; }
.trs-btn.acc { border-color: var(--accent, #2e7d32); color: var(--accent, #2e7d32); }
.trs-input {
    border: 1px solid color-mix(in srgb, var(--text-primary, #000) 12%, transparent);
    background: var(--bg-card, #fff); color: var(--text-primary, #222);
    border-radius: 10px; padding: 6px 12px; font: 400 12.5px/1.3 inherit;
    transition: border-color 140ms ease, box-shadow 140ms ease;
}
.trs-input:focus { outline: none; border-color: var(--accent, #2e7d32); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent, #2e7d32) 18%, transparent); }
.trs-select {
    border: 1px solid color-mix(in srgb, var(--text-primary, #000) 12%, transparent);
    background: var(--bg-card, #fff); color: var(--text-primary, #222);
    border-radius: 10px; padding: 5px 9px; font: 500 12px/1.3 inherit;
}

/* ── Статус-чипи ── */
.trs-chip {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 11px; font-weight: 600; letter-spacing: 0.01em;
    border-radius: 999px; padding: 2.5px 9px; white-space: nowrap;
}
.trs-chip.ok    { background: color-mix(in srgb, #22a04b 14%, transparent); color: #157a38; }
.trs-chip.warn  { background: color-mix(in srgb, #d97706 14%, transparent); color: #a35505; }
.trs-chip.info  { background: color-mix(in srgb, #2563eb 12%, transparent); color: #1d4ed8; }
.trs-chip.mut   { background: color-mix(in srgb, var(--text-primary, #000) 8%, transparent); color: var(--text-secondary, #555); }
.trs-chip.viol  { background: color-mix(in srgb, #7c3aed 12%, transparent); color: #6d28d9; }
.trs-chip.bad   { background: color-mix(in srgb, #dc2626 12%, transparent); color: #b91c1c; }

/* ── Розкриття деталей платежу: висота+прозорість, spring-подібна крива, згортання тим самим
      шляхом (§7); transform-origin top — росте від свого джерела ── */
.trs-reveal { display: grid; grid-template-rows: 0fr; opacity: 0; transform: translateY(-4px); transform-origin: top;
    transition: grid-template-rows 320ms cubic-bezier(0.32, 0.72, 0, 1), opacity 240ms ease, transform 320ms cubic-bezier(0.32, 0.72, 0, 1); }
.trs-reveal.open { grid-template-rows: 1fr; opacity: 1; transform: translateY(0); }
.trs-reveal > div { overflow: hidden; min-height: 0; }

/* контент вкладки: коротке в'їзд-проявлення при перемиканні (лише opacity/transform) */
.trs-enter { animation: trsEnter 260ms cubic-bezier(0.32, 0.72, 0, 1); }
@keyframes trsEnter { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }

/* рядки-лінки всередині карток */
.trs a { color: var(--accent, #2e7d32); text-decoration: none; }
.trs a:hover { text-decoration: underline; }

/* ── Доступність (§14) ── */
@media (prefers-reduced-motion: reduce) {
    .trs *, .trs *::before, .trs *::after { animation: none !important; }
    .trs-card, .trs-btn, .trs-seg-btn { transition: none; }
    .trs-card.tap:active, .trs-btn:active, .trs-seg-btn:active { transform: none; }
    .trs-reveal { transition: opacity 160ms ease; transform: none; }
    .trs-enter { animation: none; }
}
@media (prefers-reduced-transparency: reduce) {
    .trs-chrome { background: var(--bg-primary, #f6f7f6); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (prefers-contrast: more) {
    .trs-card { border-color: color-mix(in srgb, var(--text-primary, #000) 35%, transparent); }
    .trs-chip { outline: 1px solid currentColor; }
}