/*
 * ==============================================================================
 * Cash/Frontend/vault/cash_vault-styles.css
 * ==============================================================================
 * What:
 *     Page-specific styles for the Vault & Treasury dashboard (P4.2).
 *     Extends the shared hex design system.
 *
 * Depends:
 *     /shared/css/hex-design-system.css
 *     /shared/css/hex-components.css
 *     /shared/css/hex-utilities.css
 * ==============================================================================
 */

/* ── KPI position strip ───────────────────────────────────────────────────── */
.vault-kpi-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 16px;
    margin: 16px 20px 4px;
}

/* ── Drawdown gap highlight ───────────────────────────────────────────────── */
.drawdown-positive {
    color: var(--accent-red, #ef4444);
    font-weight: 700;
}

.drawdown-surplus {
    color: var(--accent-green, #10b981);
    font-weight: 700;
}

/* ── Transaction type badges ──────────────────────────────────────────────── */
.tx-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 3px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.tx-RECEIPT {
    background: rgba(16, 185, 129, 0.15);
    color: #10b981;
    border: 1px solid rgba(16, 185, 129, 0.30);
}

.tx-ISSUE {
    background: rgba(59, 130, 246, 0.15);
    color: #60a5fa;
    border: 1px solid rgba(59, 130, 246, 0.30);
}

.tx-RETURN_UNFIT {
    background: rgba(239, 68, 68, 0.15);
    color: #f87171;
    border: 1px solid rgba(239, 68, 68, 0.30);
}

.tx-RETURN_EXCESS {
    background: rgba(245, 158, 11, 0.15);
    color: #fbbf24;
    border: 1px solid rgba(245, 158, 11, 0.30);
}

/* ── Denomination kind badges ─────────────────────────────────────────────── */
.denom-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 3px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
}

.denom-note {
    background: rgba(99, 102, 241, 0.15);
    color: #a5b4fc;
    border: 1px solid rgba(99, 102, 241, 0.30);
}

.denom-coin {
    background: rgba(245, 158, 11, 0.15);
    color: #fbbf24;
    border: 1px solid rgba(245, 158, 11, 0.30);
}

/* ── Order highlight rows ─────────────────────────────────────────────────── */
.order-needed {
    background: rgba(239, 68, 68, 0.06) !important;
}

/* ── Idle capital annotation box ──────────────────────────────────────────── */
.idle-annotation {
    margin: 8px 20px 4px;
    padding: 10px 16px;
    background: rgba(245, 158, 11, 0.08);
    border: 1px solid rgba(245, 158, 11, 0.25);
    border-left: 4px solid #f59e0b;
    border-radius: 6px;
    color: #fbbf24;
    font-size: 13px;
    line-height: 1.5;
}

/* ── Totals summary strip ─────────────────────────────────────────────────── */
.totals-strip {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    margin: 12px 0 8px;
    padding: 10px 16px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 6px;
}

.total-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.total-label {
    font-size: 11px;
    color: var(--text-dim, #8b949e);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.total-value {
    font-size: 15px;
    font-weight: 600;
}