/* Birdeye Liquidity Pools — front-end styles */

/* ── Color mode variables ───────────────────────────── */

.blp-wrapper--light {
    --blp-card-bg:      #ffffff;
    --blp-bg-header:    #f9fafb;
    --blp-border:       #e5e7eb;
    --blp-border-heavy: #d1d5db;
    --blp-text:         #111827;
    --blp-text-head:    #6b7280;
    --blp-text-muted:   #374151;
    --blp-text-faint:   #9ca3af;
    --blp-row-hover:    #f9fafb;
    --blp-link-hover:   #4f46e5;
    --blp-btn-bg:       #4f46e5;
    --blp-btn-text:     #ffffff;
    --blp-shadow:       0 0 0 1px #e5e7eb, 0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.04);
}

.blp-wrapper--dark {
    --blp-card-bg:      #1e2235;
    --blp-bg-header:    #161929;
    --blp-border:       #2d3148;
    --blp-border-heavy: #3d4260;
    --blp-text:         #f1f5f9;
    --blp-text-head:    #94a3b8;
    --blp-text-muted:   #cbd5e1;
    --blp-text-faint:   #64748b;
    --blp-row-hover:    #252a42;
    --blp-link-hover:   #818cf8;
    --blp-btn-bg:       #6366f1;
    --blp-btn-text:     #ffffff;
    --blp-shadow:       0 0 0 1px #2d3148, 0 1px 3px rgba(0,0,0,0.3), 0 1px 2px rgba(0,0,0,0.2);
}

/* ── Card wrapper ───────────────────────────────────── */

.blp-wrapper {
    font-family: inherit;
    margin: 1.5em 0;
    background: var(--blp-card-bg) !important;
    box-shadow: var(--blp-shadow);
    color: var(--blp-text);
}

/* ── Header bar ─────────────────────────────────────── */

.blp-header {
    display: flex;
    align-items: center;
    gap: 0.5em;
    padding: 0.875em 1.25em;
    background: var(--blp-card-bg);
    border-bottom: 1px solid var(--blp-border);
}

.blp-wrapper .blp-title {
    font-size: 0.9375em;
    font-weight: 600;
    margin: 0;
    padding: 0;
    color: var(--blp-text-muted);
}

/* ── Overview: donut + KPI stats ────────────────────── */

.blp-overview {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2em;
    padding: 1.5em;
    background: var(--blp-card-bg);
    border-bottom: 1px solid var(--blp-border);
}

.blp-overview-chart {
    width: 220px;
    height: 220px;
    flex-shrink: 0;
}

.blp-donut-canvas {
    display: block;
    width: 100% !important;
    height: 100% !important;
}

.blp-overview-kpis {
    display: flex;
    flex-direction: column;
    gap: 1em;
}

.blp-kpi {
    display: flex;
    flex-direction: column;
    gap: 0.25em;
    align-items: center;
    text-align: center;
}

.blp-kpi-label {
    font-size: 0.68em;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--blp-text-head);
    white-space: nowrap;
}

.blp-kpi-value {
    font-size: 1.35em;
    font-weight: 700;
    color: var(--blp-text);
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Narrow overview: shrink chart but keep KPIs to the right */
@media (max-width: 480px) {
    .blp-overview-chart {
        width: 140px;
        height: 140px;
    }
}

/* ── Table ─────────────────────────────────────────── */

.blp-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    background: var(--blp-card-bg);
    border-top: 1px solid var(--blp-border);
}

.blp-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875em;
    line-height: 1.5;
}

.blp-wrapper .blp-table thead th {
    text-align: left;
    padding: 0.6em 1em;
    background: var(--blp-bg-header);
    border-bottom: 1px solid var(--blp-border);
    white-space: nowrap;
    font-size: 0.75em;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--blp-text-head);
}

.blp-table tbody tr {
    border-bottom: 1px solid var(--blp-border);
    transition: background 0.1s;
}

.blp-table tbody tr:last-child {
    border-bottom: none;
}

.blp-table tbody tr:hover {
    background: var(--blp-row-hover);
}

.blp-wrapper .blp-table td {
    padding: 0.75em 1em;
    vertical-align: middle;
    color: var(--blp-text);
}

/* ── Column widths ──────────────────────────────────── */

.blp-col-pair   { min-width: 140px; font-weight: 500; }
.blp-col-tvl,
.blp-col-volume {
    min-width: 100px;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.blp-wrapper .blp-table thead .blp-col-tvl,
.blp-wrapper .blp-table thead .blp-col-volume {
    text-align: right;
}

/* ── States ─────────────────────────────────────────── */

.blp-wrapper .blp-error {
    color: #dc2626;
    font-size: 0.875em;
    padding: 1em 1.25em;
    margin: 0;
}

.blp-wrapper .blp-empty {
    color: var(--blp-text-faint);
    font-size: 0.875em;
    padding: 1em 1.25em;
    margin: 0;
}

/* ── Footer ─────────────────────────────────────────── */

.blp-wrapper .blp-powered-by {
    font-size: 0.75em;
    color: var(--blp-text-faint);
    background: var(--blp-card-bg);
    margin: 0;
    padding: 0.6em 1.25em;
    border-top: 1px solid var(--blp-border);
    text-align: right;
}

.blp-wrapper .blp-powered-by a {
    color: var(--blp-text-faint);
    text-decoration: none;
}

.blp-wrapper .blp-powered-by a:hover {
    text-decoration: underline;
}