/* ══════════════════════════════════════════════════════════
   components-client.css — Client-specific overrides only.

   All shared component styles (Radzen overrides, glass morphism,
   gold accents, lending/LP/risk/perps, transactions, toolbar,
   search, blocked-guard, etc.) now live in components-shared.css
   which is loaded by both apps.

   Only classes that are genuinely client-specific belong here.
   ══════════════════════════════════════════════════════════ */

/* ── Stat Cards — client-only small variant ──────────────────
   .stat-card .stat-value (base) is in components-shared.css.
   This smaller font-size variant is only used on client dashboard
   where the 4-breakdown row needs more compact numbers. */
.stat-card .stat-value-sm {
    font-size: var(--az-text-h4, 1.5rem);
    font-weight: 700;
    background: var(--az-gold-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}


/* ── Dashboard 4-up variant — client-only ────────────────────
   Used on the breakdown row (Wallets / Lending / Pools / Perps).
   On desktop lays out as 4 even columns; on tablet falls back to
   2-cols (inherited from .az-dashboard-grid); on phones it stacks.
   Admin does not use this variant. */
.az-dashboard-grid-4 {
    margin-top: var(--az-space-6);
}

@media (min-width: 1025px) {
    .az-dashboard-grid-4 {
        grid-template-columns: repeat(4, 1fr);
    }
    .az-dashboard-grid-4 > *:nth-child(3) {
        grid-column: auto;
    }
}

/* ── Pendle badges — client LP markets only ──────────────────
   Pendle PT/YT kind badge used in LiquidityPoolsMarketsView when
   rendering Pendle pool rows. Admin markets view does not show
   these Pendle-specific cells. */
.az-pendle-kind-badge {
    display: inline-flex;
    align-items: center;
    margin-left: 6px;
    padding: 1px 6px;
    border-radius: 3px;
    font-size: 10px;
    font-weight: 600;
    line-height: 14px;
    letter-spacing: 0.4px;
}

.az-pendle-kind-principaltoken {
    background: rgba(76, 175, 80, 0.15);
    color: #4caf50;
    border: 1px solid rgba(76, 175, 80, 0.3);
}

.az-pendle-kind-yieldtoken {
    background: rgba(255, 152, 0, 0.15);
    color: #ff9800;
    border: 1px solid rgba(255, 152, 0, 0.3);
}

.az-pendle-expired-badge {
    display: inline-flex;
    align-items: center;
    margin-left: 6px;
    padding: 1px 6px;
    border-radius: 3px;
    font-size: 10px;
    font-weight: 600;
    line-height: 14px;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    background: rgba(229, 57, 53, 0.15);
    color: var(--az-health-danger, #e53935);
    border: 1px solid rgba(229, 57, 53, 0.3);
    cursor: help;
}

.az-pendle-expiry {
    margin-left: 6px;
    padding: 1px 4px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.06);
    color: var(--az-fg-3, #999);
    font-size: 10px;
    font-weight: 500;
}

/* ── Sync phase pills — OverviewTab per-wallet progress ──────
   Four compact pills (B / Tx / Ln / LP) rendered in the Sync
   column while a wallet sync is in flight. Falls back to the
   indeterminate RadzenProgressBar when no SignalR events arrive. */
.az-sync-phases {
    display: inline-flex;
    gap: 3px;
    align-items: center;
    flex-wrap: nowrap;
}

.az-sync-phase {
    display: inline-block;
    padding: 2px 5px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 600;
    line-height: 14px;
    letter-spacing: 0.3px;
    white-space: nowrap;
    transition: background 0.2s ease, color 0.2s ease;
}

.az-sync-phase--idle {
    background: rgba(255, 255, 255, 0.06);
    color: var(--az-surface-200, #666);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.az-sync-phase--active {
    background: rgba(var(--az-gold-rgb, 255, 215, 0), 0.18);
    color: var(--az-gold, #FFD700);
    border: 1px solid rgba(var(--az-gold-rgb, 255, 215, 0), 0.35);
    animation: az-sync-pulse 1.4s ease-in-out infinite;
}

.az-sync-phase--done {
    background: rgba(var(--az-gold-rgb, 255, 215, 0), 0.12);
    color: var(--az-gold, #FFD700);
    border: 1px solid rgba(var(--az-gold-rgb, 255, 215, 0), 0.25);
    opacity: 0.75;
}

.az-sync-phase--failed {
    background: rgba(229, 57, 53, 0.12);
    color: var(--az-health-danger, #e53935);
    border: 1px solid rgba(229, 57, 53, 0.3);
}

/* #310: per-wallet sync cooldown pill that REPLACES the Sync icon button while the
   30-min cooldown is active. Same footprint as the icon button so the Actions column
   never reflows as the timer ticks down (the earlier separate badge floated next to the
   icon and pushed Delete past the column edge). Gold tint signals "queued / on hold"
   without competing with the active Sync gold ring. Tabular-nums + fixed min-width
   keep the digits anchored as seconds drop from "1:00" to "0:59". */
.az-sync-cooldown-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 56px;
    height: 28px;
    padding: 0 10px;
    border-radius: 4px;
    background: rgba(var(--az-gold-rgb, 255, 215, 0), 0.06);
    border: 1px solid rgba(var(--az-gold-rgb, 255, 215, 0), 0.22);
    color: var(--az-gold, #FFD700);
    opacity: 0.78;
    font-variant-numeric: tabular-nums;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.3px;
    line-height: 1;
    cursor: not-allowed;
    user-select: none;
    vertical-align: middle;
}

.az-sync-cooldown-btn:focus { outline: none; }

@keyframes az-sync-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.55; }
}