/* The Investments activity page (/admin/investments/activity): the range toolbar, the seven totals tiles, the "Money in
   and out by month" chart (with its amber withdrawals fade and the month pill), the table tabs, the transaction filters
   (type chips, the month and ticker pills), the kind badges and the account / ticker cells the four grids share. Built
   on investments-area.css tokens; the grids reuse the holdings grid skin (ivh-grid, ivh-grid-host, ivh-grid-bones). */

:root {
    --iva-withdraw-0: rgba(217, 119, 6, .95);
    --iva-withdraw-1: rgba(245, 158, 11, .55);
    --iva-kind-contribution: #16A34A;
    --iva-kind-withdrawal: #B45309;
    --iva-kind-buy: #7C3AED;
    --iva-kind-sell: #0284C7;
    --iva-kind-income: #0D9488;
    --iva-kind-fee: #DC2626;
    --iva-kind-transfer: #475569;
    --iva-kind-cash: #15803D;
    --iva-kind-other: #64748B;
}

[data-bs-theme="dark"] {
    --iva-withdraw-0: rgba(251, 191, 36, .95);
    --iva-withdraw-1: rgba(251, 191, 36, .45);
    --iva-kind-contribution: #34D399;
    --iva-kind-withdrawal: #FBBF24;
    --iva-kind-buy: #A78BFA;
    --iva-kind-sell: #38BDF8;
    --iva-kind-income: #2DD4BF;
    --iva-kind-fee: #F87171;
    --iva-kind-transfer: #CBD5E1;
    --iva-kind-cash: #6EE7B7;
    --iva-kind-other: #94A3B8;
}

.iv-page-activity .iv-card,
.iv-page-activity .iv-card-body { min-width: 0; }
.iva-stack { gap: 1rem; }

/* ------------------------------------------------------------------ Toolbar (range picker, the range text, updating) */

.iva-toolbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .5rem .85rem;
    min-width: 0;
}

.iva-range-text {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--iv-muted);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.iva-updating {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--iv-icon-bg);
    color: var(--iv-icon);
    font-size: 11.5px;
    font-weight: 600;
}

.iva-updating .tx-glyph { font-size: 11px; }

/* ------------------------------------------------------------------ Totals: seven tiles, then four, then two */

.iva-tiles {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    min-width: 0;
    transition: opacity .2s ease;
}

.iva-tiles .iv-stat { height: 100%; }
.iva-tiles.is-refreshing { opacity: .6; }

@media (max-width: 1599.98px) {
    .iva-tiles .iv-stat { padding: 10px; gap: 8px; }
    .iva-tiles .iv-stat-chip { width: 30px; height: 30px; font-size: 12px; }
}

@media (max-width: 1399.98px) {
    .iva-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 767.98px) {
    .iva-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
}

@media (max-width: 379.98px) {
    .iva-tiles { grid-template-columns: minmax(0, 1fr); }
}

/* ------------------------------------------------------------------ Money in and out by month */

.iva-defs { position: absolute; width: 0; height: 0; overflow: hidden; pointer-events: none; }
.iva-stop-withdraw-0 { stop-color: var(--iva-withdraw-0); }
.iva-stop-withdraw-1 { stop-color: var(--iva-withdraw-1); }

.iva-chart { width: 100%; min-width: 0; transition: opacity .2s ease; }
.iva-chart.is-refreshing { opacity: .55; }
.iva-chart .e-chart { cursor: pointer; }
.iva-bones { padding-top: 8px; }
.iva-chart-fallback { padding: 2rem 0; text-align: center; }

/* The month the chart filters to: a green pill with a clear button. */
.iva-month-pill,
.iva-filter-pill {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: 3px 4px 3px 10px;
    border: 1px solid var(--iv-border);
    border-radius: 999px;
    background: var(--iv-icon-bg);
    color: var(--iv-icon);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
}

.iva-month-pill .tx-glyph,
.iva-filter-pill .tx-glyph { font-size: 11px; }

.iva-pill-clear {
    display: inline-grid;
    place-items: center;
    width: 20px;
    height: 20px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: inherit;
    cursor: pointer;
    transition: background-color .15s ease;
}

.iva-pill-clear:hover { background: color-mix(in srgb, var(--iv-icon) 16%, transparent); }
.iva-pill-clear .tx-glyph { font-size: 10px; }

/* ------------------------------------------------------------------ Table tabs and the transaction filters */

.iva-tabs { display: flex; min-width: 0; scroll-margin-top: 84px; }
.tx-seg.iva-tab-menu { min-width: min(100%, 640px); }

.iva-filters {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .6rem 1rem;
    margin-bottom: 12px;
    min-width: 0;
}

.iva-type-chips { min-width: 0; }
.iva-active-filters { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }

/* ------------------------------------------------------------------ Grid cells (shared by the four tables) */

.iva-account { display: inline-flex; align-items: center; gap: 6px; min-width: 0; max-width: 100%; }
.iva-account-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.iva-ticker {
    font-family: var(--tx-font);
    font-weight: 700;
    color: var(--iv-text);
    text-decoration: none;
    white-space: nowrap;
}

.admin-shell .e-grid .e-rowcell a.iva-ticker { color: var(--iv-text); }
.admin-shell .e-grid .e-rowcell a.iva-ticker:hover { color: var(--iv-green); text-decoration: underline; }

.iva-flow { font-variant-numeric: tabular-nums; font-weight: 600; }

/* The kind badge: one hue per kind of money movement. */
.iva-kind {
    --iva-kind: var(--iva-kind-other);
    display: inline-flex;
    align-items: center;
    padding: 1px 8px;
    border-radius: 7px;
    background: color-mix(in srgb, var(--iva-kind) 13%, transparent);
    color: var(--iva-kind);
    font-size: 11px;
    font-weight: 700;
    line-height: 1.6;
    white-space: nowrap;
}

.iva-kind-contribution { --iva-kind: var(--iva-kind-contribution); }
.iva-kind-withdrawal { --iva-kind: var(--iva-kind-withdrawal); }
.iva-kind-buy { --iva-kind: var(--iva-kind-buy); }
.iva-kind-sell { --iva-kind: var(--iva-kind-sell); }
.iva-kind-income { --iva-kind: var(--iva-kind-income); }
.iva-kind-fee { --iva-kind: var(--iva-kind-fee); }
.iva-kind-transfer { --iva-kind: var(--iva-kind-transfer); }
.iva-kind-cash { --iva-kind: var(--iva-kind-cash); }
.iva-kind-other { --iva-kind: var(--iva-kind-other); }

/* ------------------------------------------------------------------ Accounts tab (chart above the table) */

.iva-accounts { gap: 1rem; }
.iva-accounts-chart { width: 100%; min-width: 0; }

/* ------------------------------------------------------------------ Phones */

@media (max-width: 575.98px) {
    .iva-toolbar { gap: .5rem; }
    .iva-range-text { width: 100%; order: 3; }
    .iva-filters { flex-direction: column; align-items: stretch; }
    .iva-type-chips { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; }
}

@media (prefers-reduced-motion: reduce) {
    .iva-tiles, .iva-chart, .iva-pill-clear { transition: none; }
}