/* ===================================================================
   TradeMate VN — Admin Panel CSS
   =================================================================== */

/* ── Sections ─────────────────────────────────────────── */
.adm-section { margin-bottom: var(--space-lg); }
.adm-loading {
    text-align: center;
    padding: var(--space-3xl);
    color: var(--color-text-muted);
}

/* ── Action buttons ───────────────────────────────────── */
.adm-actions {
    white-space: nowrap;
}
.adm-btn-group {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex-wrap: nowrap;
}
.adm-btn-sm {
    padding: 4px 10px !important;
    min-height: 34px !important;
    font-size: var(--font-size-xs) !important;
}
.adm-btn-danger {
    color: var(--color-negative) !important;
    border-color: rgba(239,68,68,0.3) !important;
}
.adm-btn-danger:hover {
    background: rgba(239,68,68,0.15) !important;
}

/* ── Tier select ──────────────────────────────────────── */
.adm-tier-select {
    padding: 4px 8px;
    min-height: 34px;
    font-size: var(--font-size-xs);
    background: var(--color-bg-input);
    color: var(--color-text);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    cursor: pointer;
}

/* ── Tier badges ──────────────────────────────────────── */
.adm-tier-badge {
    display: inline-block;
    padding: 2px 10px;
    border-radius: var(--radius-full);
    font-size: var(--font-size-xs);
    font-weight: 600;
}
.adm-tier-free {
    background: rgba(100,116,139,0.15);
    color: var(--color-text-secondary);
}
.adm-tier-pro {
    background: rgba(99,102,241,0.15);
    color: var(--color-primary);
}
.adm-tier-admin {
    background: rgba(239,68,68,0.15);
    color: var(--color-negative);
}
.adm-badge-admin {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
}

/* ── Stats grid ───────────────────────────────────────── */
.adm-stats-grid {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-md);
    padding: var(--space-md) 0;
}
.adm-stat-item {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    background: var(--color-bg-secondary);
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
}

/* ── Responsive ───────────────────────────────────────── */
@media (max-width: 768px) {
    .adm-btn-group {
        flex-wrap: wrap;
        justify-content: center;
    }
    .adm-tier-select {
        min-height: 44px;
    }
    .adm-btn-sm {
        min-height: 44px !important;
    }
}
@media (max-width: 480px) {
    .adm-btn-group {
        gap: 2px;
    }
}